Utiliser AJAX pour fournir des mises à jour dynamiques

par Microsoft

Télécharger le PDF

Il s’agit de l’étape 10 d’un didacticiel gratuit sur l’application « NerdDinner » qui explique comment créer une application web petite mais complète à l’aide de ASP.NET MVC 1.

L’étape 10 implémente la prise en charge pour les utilisateurs connectés pour RSVP leur intérêt à assister à un dîner, à l’aide d’une approche basée sur Ajax intégrée dans la page des détails du dîner.

Si vous utilisez ASP.NET MVC 3, nous vous recommandons de suivre les didacticiels Prise en main Avec MVC 3 ou MVC Music Store.

Étape 10 de NerdDinner : AJAX Activation des RSVPs accepte

Nous allons maintenant implémenter la prise en charge des utilisateurs connectés pour RSVP leur intérêt à assister à un dîner. Nous allons activer cela à l’aide d’une approche basée sur AJAX intégrée dans la page des détails du dîner.

Indiquant si l’utilisateur est RSVP

Les utilisateurs peuvent visiter l’URL /Dinners/Details/[id] pour afficher les détails d’un dîner particulier :

La méthode d’action Details() est implémentée comme suit :

//
// GET: /Dinners/Details/2

public ActionResult Details(int id) {

    Dinner dinner = dinnerRepository.GetDinner(id);

    if (dinner == null)
        return View("NotFound");
    else
        return View(dinner);
}

Notre première étape pour implémenter la prise en charge RSVP consiste à ajouter une méthode d’assistance « IsUserRegistered(username) » à notre objet Dinner (dans la classe partielle Dinner.cs que nous avons créée précédemment). Cette méthode d’assistance retourne true ou false selon que l’utilisateur est actuellement RSVP pour le dîner :

public partial class Dinner {

    public bool IsUserRegistered(string userName) {
        return RSVPs.Any(r => r.AttendeeName.Equals(userName, StringComparison.InvariantCultureIgnoreCase));
    }
}

Nous pouvons ensuite ajouter le code suivant à notre modèle d’affichage Details.aspx pour afficher un message approprié indiquant si l’utilisateur est inscrit ou non pour l’événement :

<% if (Request.IsAuthenticated) { %>
 
    <% if (Model.IsUserRegistered(Context.User.Identity.Name)) { %>       

        <p>You are registred for this event!</p>
    
    <% } else {  %>  
    
        <p>You are not registered for this event</p>
        
    <% }  %>
    
<% } else { %>
 
    <a href="/Account/Logon">Logon</a> to RSVP for this event.

<% } %>

Et maintenant, lorsqu’un utilisateur visite un dîner, il est inscrit pour qu’il voit ce message :

Et lorsqu’ils visitent un dîner, ils ne sont pas inscrits pour, ils verront le message ci-dessous :

Implémentation de la méthode Register Action

Ajoutons maintenant les fonctionnalités nécessaires pour permettre aux utilisateurs d’accéder à RSVP pour un dîner à partir de la page de détails.

Pour l’implémenter, nous allons créer une classe « RSVPController » en cliquant avec le bouton droit sur le répertoire \Controllers et en choisissant la commande de menu Ajouter-Contrôleur>.

Nous allons implémenter une méthode d’action « Register » dans la nouvelle classe RSVPController qui prend un ID pour un Dinner en tant qu’argument, récupère l’objet Dinner approprié, vérifie si l’utilisateur connecté figure actuellement dans la liste des utilisateurs qui s’y sont inscrits et, s’il n’y ajoute pas un objet RSVP :

public class RSVPController : Controller {

    DinnerRepository dinnerRepository = new DinnerRepository();

    //
    // AJAX: /Dinners/RSVPForEvent/1

    [Authorize, AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Register(int id) {

        Dinner dinner = dinnerRepository.GetDinner(id);

        if (!dinner.IsUserRegistered(User.Identity.Name)) {
        
            RSVP rsvp = new RSVP();
            rsvp.AttendeeName = User.Identity.Name;

            dinner.RSVPs.Add(rsvp);
            dinnerRepository.Save();
        }

        return Content("Thanks - we'll see you there!");
    }
}

Notez ci-dessus comment nous renvoyons une chaîne simple comme sortie de la méthode d’action. Nous aurions pu intégrer ce message dans un modèle d’affichage, mais comme il est si petit, nous allons simplement utiliser la méthode d’assistance Content() sur la classe de base du contrôleur et retourner un message de chaîne comme ci-dessus.

Appel de la méthode d’action RSVPForEvent à l’aide d’AJAX

Nous allons utiliser AJAX pour appeler la méthode d’action Inscrire à partir de notre vue Détails. L’implémentation de ceci est assez facile. Tout d’abord, nous allons ajouter deux références de bibliothèque de scripts :

<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>

La première bibliothèque fait référence au cœur ASP.NET bibliothèque de scripts côté client AJAX. Ce fichier a une taille d’environ 24 000 (compressé) et contient les principales fonctionnalités AJAX côté client. La deuxième bibliothèque contient des fonctions utilitaires qui s’intègrent à ASP.NET méthodes d’assistance AJAX intégrées de MVC (que nous utiliserons sous peu).

Nous pouvons ensuite mettre à jour le code de modèle d’affichage que nous avons ajouté précédemment afin qu’au lieu d’afficher un message « Vous n’êtes pas inscrit pour cet événement », nous restituions à la place un lien qui effectue un appel AJAX qui appelle notre méthode d’action RSVPForEvent sur notre contrôleur RSVP et les RSVP l’utilisateur :

<div id="rsvpmsg">

<% if(Request.IsAuthenticated) { %>
 
    <% if(Model.IsUserRegistered(Context.User.Identity.Name)) { %>       

        <p>You are registred for this event!</p>

    <% } else { %>  
    
        <%= Ajax.ActionLink( "RSVP for this event",
                             "Register", "RSVP",
                             new { id=Model.DinnerID }, 
                             new AjaxOptions { UpdateTargetId="rsvpmsg"}) %>         
    <% } %>
    
<% } else { %>
 
    <a href="/Account/Logon">Logon</a> to RSVP for this event.

<% } %>
    
</div>

La méthode d’assistance Ajax.ActionLink() utilisée ci-dessus est intégrée ASP.NET MVC et est similaire à la méthode d’assistance Html.ActionLink(), sauf qu’au lieu d’effectuer une navigation standard, elle effectue un appel AJAX à la méthode d’action lorsque vous cliquez sur le lien. Ci-dessus, nous appelons la méthode d’action « Register » sur le contrôleur « RSVP » et lui transmettons le DinnerID comme paramètre « id ». Le paramètre AjaxOptions final que nous transmettons indique que nous voulons prendre le contenu retourné par la méthode d’action et mettre à jour l’élément HTML <div> sur la page dont l’ID est « rsvpmsg ».

Et maintenant, lorsqu’un utilisateur accède à un dîner pour lequel il n’est pas encore inscrit, il voit un lien vers RSVP pour celui-ci :

S’ils cliquent sur le lien « RSVP pour cet événement », ils passent un appel AJAX à la méthode d’action Register sur le contrôleur RSVP, et une fois qu’elle se termine, un message mis à jour s’affiche comme ci-dessous :

La bande passante réseau et le trafic impliqués lors de cet appel AJAX sont vraiment légers. Lorsque l’utilisateur clique sur le lien « RSVP pour cet événement », une petite demande réseau HTTP POST est envoyée à l’URL /Dinners/Register/1 qui ressemble à celle ci-dessous sur le câble :

POST /Dinners/Register/49 HTTP/1.1
X-Requested-With: XMLHttpRequest
Content-Type: application/x-www-form-urlencoded; charset=utf-8
Referer: http://localhost:8080/Dinners/Details/49

Et la réponse de notre méthode d’action Inscrire est simplement :

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 29
Thanks - we'll see you there!

Cet appel léger est rapide et fonctionne même sur un réseau lent.

Ajout d’une animation jQuery

La fonctionnalité AJAX que nous avons implémentée fonctionne bien et rapidement. Parfois, cela peut se produire si rapidement, cependant, qu’un utilisateur peut ne pas remarquer que le lien RSVP a été remplacé par un nouveau texte. Pour rendre le résultat un peu plus évident, nous pouvons ajouter une animation simple pour attirer l’attention sur le message de mise à jour.

Le modèle de projet MVC par défaut ASP.NET comprend jQuery, une bibliothèque JavaScript excellente (et très populaire) open source qui est également prise en charge par Microsoft. jQuery fournit un certain nombre de fonctionnalités, notamment une belle bibliothèque d’effets et de sélection DOM HTML.

Pour utiliser jQuery, nous allons d’abord lui ajouter une référence de script. Étant donné que nous allons utiliser jQuery à différents endroits de notre site, nous allons ajouter la référence de script dans notre site. master master fichier de page afin que toutes les pages puissent l’utiliser.

<script src="/Scripts/jQuery-1.3.2.js" type="text/javascript"></script>

Le code écrit à l’aide de JQuery utilise souvent une méthode JavaScript « $() » globale qui récupère un ou plusieurs éléments HTML à l’aide d’un sélecteur CSS. Par exemple, $(« #rsvpmsg ») sélectionne n’importe quel élément HTML avec l’ID de rsvpmsg, tandis que $(« .something ») sélectionne tous les éléments avec le nom de classe CSS « quelque chose ». Vous pouvez également écrire des requêtes plus avancées telles que « renvoyer toutes les cases d’option cochées » à l’aide d’une requête de sélecteur telle que : $(« input[@type=radio][@checked] »).

Une fois que vous avez sélectionné des éléments, vous pouvez appeler des méthodes sur ceux-ci pour effectuer une action, par exemple en les masquant : $(« #rsvpmsg »).hide();

Pour notre scénario RSVP, nous allons définir une fonction JavaScript simple nommée « AnimateRSVPMessage » qui sélectionne le div> « rsvpmsg » <et anime la taille de son contenu texte. Le code ci-dessous démarre le texte petit, puis l’augmente sur une période de 400 millisecondes :

<script type="text/javascript">

    function AnimateRSVPMessage() {
        $("#rsvpmsg").animate({fontSize: "1.5em"},400);
    }

</script>

Nous pouvons ensuite connecter cette fonction JavaScript pour qu’elle soit appelée une fois que notre appel AJAX s’est terminé avec succès en passant son nom à notre méthode d’assistance Ajax.ActionLink() (via la propriété d’événement AjaxOptions « OnSuccess ») :

<%= Ajax.ActionLink( "RSVP for this event",
                     "Register", "RSVP",
                     new { id=Model.DinnerID }, 
                     new AjaxOptions { UpdateTargetId="rsvpmsg",
                                       OnSuccess="AnimateRSVPMessage"}) %>

Et maintenant que le lien « RSVP pour cet événement » est cliqué et que notre appel AJAX se termine correctement, le message de contenu renvoyé s’anime et grandit :

En plus de fournir un événement « OnSuccess », l’objet AjaxOptions expose les événements OnBegin, OnFailure et OnComplete que vous pouvez gérer (ainsi que diverses autres propriétés et options utiles).

Nettoyage - Refactorisation d’une vue partielle RSVP

Notre modèle d’affichage des détails commence à devenir un peu long, ce qui le rend un peu plus difficile à comprendre. Pour améliorer la lisibilité du code, nous allons terminer en créant une vue partielle ( RSVPStatus.ascx) qui encapsule tout le code de la vue RSVP pour notre page Détails.

Pour ce faire, cliquez avec le bouton droit sur le dossier \Views\Dinners, puis choisissez la commande de menu Add-View>. Nous allons faire en sorte qu’il prenne un objet Dinner comme son ViewModel fortement typé. Nous pouvons ensuite copier/coller le contenu RSVP de notre vue Details.aspx dans celui-ci.

Une fois que nous avons fait cela, nous allons également créer une autre vue partielle, EditAndDeleteLinks.ascx, qui encapsule notre code d’affichage Modifier et Supprimer des liens. Nous allons également prendre un objet Dinner comme viewModel fortement typé, et copier/coller la logique Modifier et supprimer de notre vue Details.aspx dans celui-ci.

Notre modèle d’affichage des détails peut alors simplement inclure deux appels de méthode Html.RenderPartial() en bas :

<asp:Content ID="Title" ContentPlaceHolderID="TitleContent"runat="server">
    <%= Html.Encode(Model.Title) %>
</asp:Content>

<asp:Content ID="details" ContentPlaceHolderID="MainContent" runat="server">

    <div id="dinnerDiv">

        <h2><%=Html.Encode(Model.Title) %></h2>
        <p>
            <strong>When:</strong> 
            <%=Model.EventDate.ToShortDateString() %> 

            <strong>@</strong>
            <%=Model.EventDate.ToShortTimeString() %>
        </p>
        <p>
            <strong>Where:</strong> 
            <%=Html.Encode(Model.Address) %>,
            <%=Html.Encode(Model.Country) %>
        </p>
         <p>
            <strong>Description:</strong> 
            <%=Html.Encode(Model.Description) %>
        </p>       
        <p>
            <strong>Organizer:</strong> 
            <%=Html.Encode(Model.HostedBy) %>
            (<%=Html.Encode(Model.ContactPhone) %>)
        </p>
    
        <% Html.RenderPartial("RSVPStatus"); %>
        <% Html.RenderPartial("EditAndDeleteLinks"); %>
 
    </div>
         
</asp:Content>

Cela rend le code plus propre à lire et à gérer.

étape suivante

Voyons maintenant comment nous pouvons utiliser AJAX encore plus loin et ajouter la prise en charge du mappage interactif à notre application.

PrécédentSuivant