Comment soumettre un formulaire sans recharger la page avec asp.net ,mvc3, jquery et razor

Je vais expliquer dans ce billet comment faire pour soumettre très simplement un formulaire dans une page web sans avoir a rechercher celle-ci et afficher le résultat de la soumission en lieu et place du formulaire, mais aussi comment valider et afficher les erreurs éventuelles de validation coté client et serveur toujours sans recharger la page.

Le scénario sera l’insertion d’un contact dans une base de donnée, le modèle de données est le suivant :

il faut maintenant creer le formulaire Html suivant :

Jusque la du “classique” si ce n’est la nouvelle syntaxe Razor , ce qu’il faut noter c’est la mise en place de la ligne 5 dans laquel il est fait appel à un formulaire Ajax

voici comment le fomulaire est appelé dans la page hote :

on peut voir la l’appel ligne 12, il s’agit d’une méthode d’extension que j’ai créé pour rendre le code un peu plus propre, le détail est le suivant :

Le rendu final du formulaire est le suivant :

Maintenant il faut  coder l’Action AddCustomer, c’est cette action qui est appelée dans le formulaire Ajax.

Dans un premier temps, il faut verifier si le model est valide si ce n’est pas le cas , on retourne sur la vue en cours , grace au controle ValidationSummary les erreurs eventuelles seront affichées et l’utilisateur pourra savoir pourquoi l’insertion est un echec. Dans le cas contraire nous afficherons en lieu et place du formulaire, une vue partielle indiquant à l’utilisateur que l’insertion est un succès.  Un click sur le bouton inserer affiche la page suivante :

L’insertion est un succès mais nous avons changé de page, pour passer sur /Home/AddCustomer, pour rester sur la page d’accueil nous allons mettre en place les points suivants :

1 – Il faut s’assurer dans le fichier web.config que la validation coté client est activée

 

2 -

Dans la page master _Layout, il faut s’assurer que les javascripts suivants sont appelés :

Ligne 5, il s’agit d’une librairie de fonctions javascript pour la gestion de la validation coté client.

3 - Dans le formulaire d’ajout , j’ajoute les lignes de code javascript suivantes  :

Le but de ce code est d’intercepter justement l’action submit et d’injecter les resultat retourné par l’Action AddCustomer du controller HomeController, maintenant voici ce qui est affiché lors d’un submit :

la vue partielle  “_Success.cshtml” à bien été injectée sans rechargement de la page, voici son contenu :

Pour l’instant aucune validation du model n’a été effectuée, pour la mise en place des validators, en standard avec MVC3 nous avons la possibilité d’annoter le model avec des attributs spécialisés dans la validation des données, voici le nouveau model avec les attributs de validation :

Le renseignement de toutes les propriétés du model sont devenues obligatoire, de plus j’ai ajouté un validateur spécialisé dans la verification de la forme de l’email, si l’on clique maintenant sur le bouton submit sans rien renseigner dans le formulaire, voici le résultat affiché :

La “magie” d’asp.net MVC3 c’est qu’en l’occurence la validation s’est effectuée coté client pour l’instant sans ecrire une seule ligne de code javascript, on peut remarquer au passage que les message de validation sont en Anglais par defaut, ceci vient du fait que l’attribut “Required” ne contient pas le message d’erreur, ceci va etre corrigé, et nous allons faire une verfication coté serveur pour verifier son restons bien sur la meme page, pour ce faire je vais modifier l’action AddCustomer dans le controller Home de la manière suivante :

Je valide de nouveau le formulaire en indiquant “marc” comme pseudo :

On peut voir que le formulaire à bien été posté sur le serveur et que le message d’erreur retourné est bien placé au bon endroit

Dernier point avant de conclure cet article, il est possible de verifier un champs de saisie particulier à la volée directement sur le serveur grace au nouvel attribut “Remote”, nous allons verifier si le pseudo est déja pris pendant la saisie du formulaire avant meme de cliquer sur le bouton submit voici comment proceder :

Nous modifions le model pour ajouter la ligne 12, le premier paramètre est l’action du controller et la 2eme methode est le nom du controller utilisé pour la validation de la propriété :

lors de la saisie du pseudo dans le formulaire une verfication sera effectuée coté serveur, attention ! a chaque caractère saisie dans la texbox nickname (a mon sens , ceci peut vite devenir abusif)

on peut voir que le validator en remoting fonctionne car le message d’erreur est affiché seul alors que les autres champs requis ne sont pas renseignés.

ci-dessous le code source utilisé pour la solution :

Pour conclure, avec MVC3 il devient très facile de produire des formulaires très puissants, avec des validations temps réel coté client pour toujours obtenir une experience utilisateur de plus en plus riche sans nuire à la productivité du développeur.