Asp.Net MVC4 (beta) Web Api et Autocompletion via JQuery

 

Je n’ai pas bloggé depuis très longtemps faute de temps, je profite donc de la fin de mes congés pour écrire un petit billet concernant l’utilisation de Web Api dans asp.net MVC4.

Nous allons voir comment mettre en place toutes ces technologie pour activer une auto-completion asynchrone dans une Textbox avec JQuery. Notamment la mise en place d’une couche de service REST.

Dans un premier temps nous allons commencer un projet asp.net mvc4

Ce que l’on peut voir pour un nouveau projet MVC grâce au template “Internet Application” c’est que toutes les assemblies nécessaires sont chargées via NuGet, je trouve ça très agile.

Pour la mise en place de notre page d’autocompletion, il faut ajouter une methode dans le controller HomeController de la manière suivante :

   1:          public ActionResult Autocomplete()

   2:          {

   3:              ViewBag.Message = "Your quintessential contact page.";

   4:   

   5:              return View();

   6:          }

Puis il faut ajouter la vue dans le repertoire /views/home/autocomplete.cshtml avec le contenu suivant :

@{

    ViewBag.Title = "Autocomplete";

}

<h2>Autocomplete</h2>

<input type="text" name="autocomplete" />

le rendu sera le suivant en appelant la page /home/autocomplete :

Maintenant nous allons mettre en place un service dont le role sera de gerer une liste de pays avec leurs caractèristiques intrinseques. Dans ce service la methode GetStartWith(…) permettra de recuperer la liste des n pays dont le nom commence par un terme, voici son implementation :

   1:      public class CountryService

   2:      {

   3:          public IEnumerable<string> GetStartWith(string term, int count)

   4:          {

   5:              return Country.GetValues().Where(i => i.LocalizedName.StartsWith(term, StringComparison.InvariantCultureIgnoreCase)).Select(i => i.LocalizedName).Take(count);

   6:          }

   7:      }

(Pour le détail de la liste des pays ce n’est pas l’objet de ce billet il suffira de regarder le code source.)

Pour appeler ce service nous allons maintenant utiliser une nouveauté d’asp.net mvc4 qui est Web Api, pour commencer il faut ajouter un controller de type WebApi :

   1:      public class CountryApiController : ApiController

   2:      {

   3:          public CountryApiController()

   4:          {

   5:              this.CountryService = new Services.CountryService();

   6:          }

   7:   

   8:          protected Services.CountryService CountryService { get; private set; }

   9:   

  10:          public IEnumerable<string> CountryNameStartWith(string term)

  11:          {

  12:              return CountryService.GetStartWith(term, 15);

  13:          }

  14:      }

Ce controller de type ApiController est a mettre dans le repertoire des controllers aux cotés de homecontroller.

Maintenant il nous reste à appeler celui-ci via JQuery :

<input type="text" name="autocomplete" id="country"/>

<script type="text/javascript">

    $("#country").autocomplete({

        source: function (request, response) {

            $.ajax({

                type: "POST",

                contentType: "application/json; charset=utf-8",

                url: "/api/country/CountryNameStartWith",

                data: '"' + request.term + '"',

                success: function (data) {

                    response(data);

                }

            });

        }

    });

</script>

Pour que le bon controlleur CountryApiController soit appelé via JQuery j’ai déclaré au préalable dans App_Start la route qui permet de le retrouver :

   1:              routes.MapHttpRoute(

   2:                  "CountryApi"

   3:                  , "api/country/{action}"

   4:                  , new { controller = "CountryApi" }

   5:              );

et voici le résultat :

A noter , il était tout a fait possible de réaliser la même chose avec MVC3, ce qui change avec MVC4 et Web Api c’est que le formatage de sortie est auto-adaptatif , si l’appel est fait a partir d’un client JQuery le résultat sera renvoyé au format JSon :

Directement dans l’url et le résultat sera retourné en XML

Conclusion :

On peut voir qu’un nouveau modèle apparait avec MVC4, le Modèle et le Controller sont gérés sur le serveur IIS alors que la vue est gérée par le client , la communication entre la vue et le controlleur étant gérée via WCF avec une surcouche Web Api, la vue est gérée via JQuery et une surcouche Knockout pour la partie MVC “Client”. Je trouve cette architecture très puissante et je n’ai aucun doute sur le fait qu’elle va devenir un vrai standard.

Ci-dessous , le code source :