Dans le développement web, l'utilisation de formulaires est courante. Après avoir soumis les données d'un formulaire HTML à un contrôleur back end, il est essentiel de savoir comment ce contrôleur peut recevoir ces informations. Cet article présente plusieurs méthodes couramment utilisées pour y parvenir dans un environnement ASP.NET MVC.
Page HTML du Formulaire
Commençons par la partie frontend. Nous utiliserons un formulaire simple de nom d'utilisateur et de mot de passe comme exemple.
Pour ce faire, créez un nouveau projet MVC et ajoutez un contrôleur nommé AccountController. Dans la méthode d'action par défaut (généralement Index), ajoutez une vue qui servira de page d'inscription.
Voici le code de la vue :
@{ Layout = null; }
<meta content="width=device-width" name="viewport"></meta>
<title>Inscription</title>
<div>
<form action="@Url.Action(" method="post" processlogin="">
<table>
<tr>
<td>
Nom d'utilisateur : <input name="username" type="text"></input>
</td>
</tr>
<tr>
<td>
Mot de passe : <input name="password" type="password"></input>
</td>
</tr>
<tr>
<td>
<input type="submit" value="Se connecter"></input>
</td>
</tr>
</table>
</form>
</div>
</div>Le point crucial ici est de spécifier correctement l'URL de l'action dans l'attribut `action` du formulaire, qui pointe vers la méthode du contrôleur chargée de traiter les données.
Traitement des données dans le contrôleur ASP.NET MVC
-----------------------------------------------------
Maintenant, concentrons-nous sur la manière de traiter les données soumises par le formulaire dans le contrôleur.
### Méthode 1 : Passage direct des paramètres
La première méthode consiste à définir des paramètres dans la méthode d'action du contrôleur dont les noms correspondent exactement aux attributs `name` des champs du formulaire.
<div>```
using System.Web.Mvc;
namespace YourProject.Controllers
{
public class AccountController : Controller
{
public ActionResult Index()
{
return View();
}
// Les noms des paramètres doivent correspondre aux 'name' des champs du formulaire.
public ActionResult ProcessLogin(string username, string password)
{
// Pour des raisons de démonstration, affichons les valeurs reçues.
return Content($"Utilisateur: {username}, Mot de passe: {password}");
}
}
}
FormCollection encapsule toutes les valeurs soumises par le formulaire sous forme de paires clé-valeur, où la clé est le nom du champ du formulaire.
using System.Web.Mvc;
namespace YourProject.Controllers { public class AccountController : Controller { public ActionResult Index() { return View(); }
// FormCollection contient toutes les valeurs du formulaire sous forme de paires clé-valeur.
public ActionResult ProcessLogin(FormCollection collection)
{
string username = collection["username"];
string password = collection["password"];
// Affichage des valeurs reçues pour la démonstration.
return Content($"Utilisateur: {username}, Mot de passe: {password}");
}
}
}
</div>### Méthode 3 : Accès via l'objet `Request`
Il est également possible d'accéder directement aux valeurs du formulaire via l'objet `Request`.
<div>```
using System.Web.Mvc;
namespace YourProject.Controllers
{
public class AccountController : Controller
{
public ActionResult Index()
{
return View();
}
// Accès direct aux valeurs via l'objet Request.
public ActionResult ProcessLogin()
{
string username = Request["username"];
string password = Request["password"];
// Affichage des valeurs pour la démonstration.
return Content($"Utilisateur: {username}, Mot de passe: {password}");
}
}
}
La méthode la plus structurée consiste à créer une classe modèle dont les propriétés correspondent aux noms des champs du formulaire. Le framwork MVC se charge alors automatiquement de mapper les valeurs du formulaire aux propriétés de l'objet modèle.
using System.Web.Mvc;
namespace YourProject.Controllers { public class AccountController : Controller { public ActionResult Index() { return View(); }
// Le framework lie automatiquement les données du formulaire aux propriétés de l'objet User.
public ActionResult ProcessLogin(UserLoginModel userModel)
{
string username = userModel.Username;
string password = userModel.Password;
// Affichage des valeurs pour la démonstration.
return Content($"Utilisateur: {username}, Mot de passe: {password}");
}
}
// Modèle pour représenter les données du formulaire de connexion.
public class UserLoginModel
{
public string Username { get; set; }
public string Password { get; set; }
}
}
</div>Cette approche est généralement préférée pour sa clarté, sa maintenabilité et sa robustesse, surtout lorsque le formulaire contient un grand nombre de champs.