Cela fait un moment que je développe avec ASP.NET MVC 3 en utilisant en particulier le moteur de vue Razor pour mes pages Web.

J’ai décidé en ce jour de vous montrer la puissance qu’offre le Framework ASP.NET MVC 3 et le nouveau moteur de vue ASP.NET Razor pour la création d’un formulaire Web avec validation des données.

Pour information, Razor a été introduit avec l’environnement de développement Web gratuit WebMatrix et ASP.NET MVC 3. Le but de ce nouveau moteur est de faciliter la conception des pages ASP.NET. Il introduit une syntaxe de programmation assez facilement compréhensible, qui vous permet d’insérer du code serveur dans une page Web qui peut également contenir du HTML, du CSS et des scripts JavaScript.

Je ne vais pas entrer dans les détails sur Razor, puisque je suis en train de finaliser un article sur le sujet.

Plongeons nous directement dans l’objet de ce billet de blog.

Le résultat final sera la conception d’un simple formulaire Web avec validation des données, permettant d’enregistrer des produits.

Pour cela, nous allons lancer notre environnement de développement Visual Studio 2010, ou Visual Web Developper 2010. Bien évidement après avoir vérifié que nous avons installé ASP.NET MVC 3.

1 РCr̩ation du projet

Dans le menu fichier, nous allons cliquer sur nouveau projet. Dans la boite de dialogue qui s’affiche, nous devons sélectionner le langage C# (vous pouvez également utiliser VB.NET) ainsi que la version 4 du framework .NET.

Dans les modèles de projets proposés par defaut, nous allons sélectionner le type de projet « ASP.NET MVC 3 Web Application » et cliquer ensuite sur OK.

Lors de la création d’un nouveau projet ASP.NET MVC 3, la boite de dialogue vous permet désormais de spécifier le moteur d’affichage ainsi que le modèle de projet ASP.NET MVC que vous souhaitez utiliser.

Pour notre exemple, nous allons utiliser le template « Internet Application » et nous allons cliquer enfin sur Ok pour que la création du projet soit effectuée.

L’explorateur de solutions affiche l’ensemble des fichiers qui sont créés par défaut.

Il est à noter que les fichiers Razor ont pour extension .cshtml (pour C#) ou vbhtml (pour VB.NET) et sont stockés par défaut dans le dossier View.

La structure hiérarchique de l’application est la suivante :

2 РCr̩ation du mod̬le

Nous allons dans un premier temps créer le modèle que nous allons utiliser. Pour cela, nous devons ajouter au projet un nouveau fichier de classe avec pour nom « ProductModel.cs » dans le dossier « Models ».

Dans ce fichier, nous aurons les lignes de code suivantes.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.ComponentModel.DataAnnotations;

namespace MvcApplication2.Models
{

    public class Product
    {
        [Required(ErrorMessage = "Le libellé du produit est obligatoire")]
        [Display(Name = "Libellé")]  
        public string PLibelle { get; set; }
        [Required(ErrorMessage = "La description du produit est obligatoire")]
        [Display(Name = "Description")]  
        public string PDescription { get; set; }
        [Required (ErrorMessage = "La prix est obligatoire")]
        [Display(Name = "Prix")]
        [Range(0.01, 400.00, ErrorMessage = "Le prix doit être compris entre 0.01 et 400.00")]
        public decimal PPrix { get; set; }
    }

}

Vous remarquez que nous avons ajouté quelques validations à l’aide de Data Annotation introduit par ASP.NET MVC 3.

Je reviendrais dans un prochain billet sur la validation des données avec Data Annotation pour vous fournir plus d’explication sur le sujet.

3 РCr̩ation du contr̫leur

Maintenant, nous allons créer notre contrôleur en faisant un clic droit sur le dossier correspondant, et ensuite nous allons sélectionner « Ajouter » et cliquer ensuite sur «Contrôleur».

Nous allons donner comme nom à notre contrôleur : ProductController. Lorsque nous allons cliquer sur ajouter, Visual Studio va générer un fichier contenant par défaut une méthode public ActionResult Index().

Modifiez ce fichier pour que le code soit semblable à ceci.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
using System.Web.Security;
using MvcApplication2.Models;

namespace MvcApplication2.Controllers
{
    public class ProductController : Controller
    {
        //
        // GET: /Product/

        public ActionResult InsertProduct()
        {
            return View();
        }

        //
        // POST: /Clients/ 
        [HttpPost]
        public ActionResult InsertProduct(Product P)
        {
            if (ModelState.IsValid)
                return RedirectToAction("Index", "Accueil");

            // If we got this far, something failed, redisplay form
            return View();
        }



    }
}

N’oubliez pas d’ajouter une référence à MvcApplication2.Models.

Lorsque l’utilisateur va soumettre son formulaire, le contrôleur doit traiter les informations qu’il a transmises. C’est pour cela que nous avons ajouté le bloc de code suivant :

[HttpPost]
        public ActionResult InsertProduct(Product P)
        {
            if (ModelState.IsValid)
                return RedirectToAction("Index", "Accueil");

            // If we got this far, something failed, redisplay form
            return View();
        }

Si les données sont valides, alors il sera redirectionner vers l’index du site. Bien évidemment, dans votre application vous devez le redirectionner vers une page de confirmation de son enregistrement.

Dans le cas ou les informations ne sont pas correctes, la même page lui sera affichée avec un message d’erreur.

4 РCr̩ation de la vue

Maintenant, nous allons créer la vue associée à l’action InsertProduct().

Pour cela, dans le code du contrôleur, nous allons faire un clic droit à l’intérieur de la fonction InsertProduct(), comme l’illustre la capture ci-dessous :

Nous allons cliquer ensuite sur « Ajouter une Vue ».

Vous devez cochez l’option « créer une vue fortement typée », et dans la liste déroulante vous devez lier votre vue au modèle.

Choisissez également l’option « Create » dans la liste déroulante « Scaffold template » pour associer l’action d’ajout au formulaire de la vue.

Lorsque nous allons cliquer sur Ajouter, Visual Studio va générer automatiquement notre vue qui sera liée au contrôleur et au modèle.

Le code qui est généré est le suivant :

@model MvcApplication2.Models.Product

@{
    ViewBag.Title = "InsertProduct";
}

<h2>Enregistrement des produits</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Nouveau produit</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.PLibelle)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.PLibelle)
            @Html.ValidationMessageFor(model => model.PLibelle)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.PDescription)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.PDescription)
            @Html.ValidationMessageFor(model => model.PDescription)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.PPrix)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.PPrix)
            @Html.ValidationMessageFor(model => model.PPrix)
        </div>

        <p>
            <input type="submit" value="Enregistrer" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

Et voila le résultat final !

Vous avez maintenant de quoi vous détendre pour ce Week-end…