Bereitstellen von dynamischen Updates mithilfe von AJAX

von Microsoft

PDF herunterladen

Dies ist Schritt 10 eines kostenlosen "NerdDinner"-Anwendungstutorial , das die Erstellung einer kleinen, aber vollständigen Webanwendung mithilfe von ASP.NET MVC 1 durchläuft.

Schritt 10 implementiert unterstützung für angemeldete Benutzer, um ihr Interesse an einem Abendessen zu nutzen, wobei ein Ajax-basierter Ansatz verwendet wird, der in die Detailseite des Abendessens integriert ist.

Wenn Sie ASP.NET MVC 3 verwenden, empfiehlt es sich, die Tutorials Erste Schritte Mit MVC 3 oder MVC Music Store zu befolgen.

NerdDinner Schritt 10: AJAX-Aktivierung von RSVPs akzeptiert

Lassen Sie uns nun die Unterstützung für angemeldete Benutzer implementieren, um rsVP ihr Interesse an einem Abendessen zu besuchen. Wir ermöglichen dies mithilfe eines AJAX-basierten Ansatzes, der in die Detailseite des Abendessens integriert ist.

Gibt an, ob der Benutzer RSVP'd ist

Benutzer können die URL /Dinners/Details/[id] besuchen, um Details zu einem bestimmten Abendessen anzuzeigen:

Die Detail()-Aktionsmethode wird wie folgt implementiert:

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

public ActionResult Details(int id) {

    Dinner dinner = dinnerRepository.GetDinner(id);

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

Unser erster Schritt zur Implementierung der RSVP-Unterstützung besteht darin, dem Dinner-Objekt (innerhalb der zuvor erstellten Teilklasse Dinner.cs) eine Hilfsmethode "IsUserRegistered(benutzername)" hinzuzufügen. Diese Hilfsmethode gibt true oder false zurück, je nachdem, ob der Benutzer derzeit RSVP'd für das Dinner ist:

public partial class Dinner {

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

Anschließend können wir der Ansichtsvorlage Details.aspx den folgenden Code hinzufügen, um eine entsprechende Meldung anzuzeigen, die angibt, ob der Benutzer für das Ereignis registriert ist oder nicht:

<% 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.

<% } %>

Wenn ein Benutzer nun ein Dinner besucht, für das er registriert ist, wird die folgende Meldung angezeigt:

Und wenn sie ein Dinner besuchen, sind sie nicht für sie registriert, wird die folgende Meldung angezeigt:

Implementieren der Register Action-Methode

Nun fügen wir die Funktionen hinzu, die erforderlich sind, damit Benutzer rsVP für ein Abendessen auf der Detailseite verwenden können.

Um dies zu implementieren, erstellen wir eine neue "RSVPController"-Klasse, indem sie mit der rechten Maustaste auf das Verzeichnis \Controller klicken und den Menübefehl Add-Controller> auswählen.

Wir implementieren eine "Register"-Aktionsmethode in der neuen RSVPController-Klasse, die eine ID für ein Dinner-Objekt als Argument akzeptiert, das entsprechende Dinner-Objekt abruft, überprüft, ob sich der angemeldete Benutzer derzeit in der Liste der Benutzer befindet, die sich dafür registriert haben, und fügt ihnen ein RSVP-Objekt hinzu:

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!");
    }
}

Beachten Sie oben, wie wir eine einfache Zeichenfolge als Ausgabe der Aktionsmethode zurückgeben. Wir könnten diese Nachricht in eine Ansichtsvorlage eingebettet haben . Da sie jedoch so klein ist, verwenden wir einfach die Content()-Hilfsmethode für die Controller-Basisklasse und geben eine Zeichenfolgennachricht wie oben zurück.

Aufrufen der RSVPForEvent-Aktionsmethode mithilfe von AJAX

Wir verwenden AJAX, um die Aktionsmethode Register aus der Detailansicht aufzurufen. Die Implementierung ist ziemlich einfach. Zunächst fügen wir zwei Skriptbibliotheksverweise hinzu:

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

Die erste Bibliothek verweist auf den Kern ASP.NET clientseitigen AJAX-Skriptbibliothek. Diese Datei ist ca. 24 KB groß (komprimiert) und enthält die wichtigsten clientseitigen AJAX-Funktionen. Die zweite Bibliothek enthält Hilfsprogrammfunktionen, die in ASP.NET integrierten AJAX-Hilfsmethoden von MVC integriert werden (die wir in Kürze verwenden werden).

Anschließend können wir den Zuvor hinzugefügten Code für die Ansichtsvorlage aktualisieren, sodass anstelle der Meldung "Sie sind nicht für dieses Ereignis registriert" ein Link gerendert wird, der beim Pushen einen AJAX-Aufruf ausführt, der unsere RSVPForEvent-Aktionsmethode auf unserem RSVP-Controller und RSVPs für den Benutzer aufruft:

<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>

Die oben verwendete Ajax.ActionLink()-Hilfsmethode ist in ASP.NET MVC integriert und ähnelt der Html.ActionLink()-Hilfsmethode, mit dem Unterschied, dass sie anstelle einer Standardnavigation einen AJAX-Aufruf der Aktionsmethode ausführt, wenn auf den Link geklickt wird. Oben rufen wir die Aktionsmethode "Register" auf dem "RSVP"-Controller auf und übergeben die DinnerID als Parameter "id". Der letzte AjaxOptions-Parameter, den wir übergeben, gibt an, dass wir den von der Aktionsmethode zurückgegebenen Inhalt übernehmen und das HTML-div-Element <> auf der Seite aktualisieren möchten, deren ID "rsvpmsg" lautet.

Wenn ein Benutzer nun zu einem Abendessen sucht, für das er noch nicht registriert ist, wird dafür ein Link zu RSVP angezeigt:

Wenn sie auf den Link "RSVP für dieses Ereignis" klicken, wird ein AJAX-Aufruf der Aktionsmethode Register auf dem RSVP-Controller ausgeführt, und nach Abschluss wird eine aktualisierte Meldung wie folgt angezeigt:

Die Netzwerkbandbreite und der Datenverkehr, die bei diesem AJAX-Aufruf involviert sind, sind sehr einfach. Wenn der Benutzer auf den Link "RSVP for this event" klickt, wird eine kleine HTTP POST-Netzwerkanforderung an die URL /Dinners/Register/1 gesendet, die wie unten auf dem Kabel aussieht:

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

Die Antwort unserer Aktionsmethode Register lautet einfach:

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

Dieser einfache Anruf ist schnell und funktioniert auch über ein langsames Netzwerk.

Hinzufügen einer jQuery-Animation

Die ajax-Funktionalität, die wir implementiert haben, funktioniert gut und schnell. Manchmal kann dies jedoch so schnell geschehen, dass ein Benutzer möglicherweise nicht bemerkt, dass der RSVP-Link durch neuen Text ersetzt wurde. Um das Ergebnis ein wenig offensichtlicher zu machen, können wir eine einfache Animation hinzufügen, um die Aufmerksamkeit auf die Updatemeldung zu lenken.

Die Standard-ASP.NET MVC-Projektvorlage enthält jQuery – eine hervorragende (und sehr beliebte) Open Source JavaScript-Bibliothek, die auch von Microsoft unterstützt wird. jQuery bietet eine Reihe von Features, einschließlich einer schönen HTML-DOM-Auswahl- und Effektbibliothek.

Um jQuery zu verwenden, fügen wir zuerst einen Skriptverweis dazu hinzu. Da wir jQuery an einer Vielzahl von Stellen auf unserer Website verwenden werden, fügen wir den Skriptverweis auf unserer Website hinzu. master master Seitendatei, damit sie von allen Seiten verwendet werden kann.

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

Code, der mit JQuery geschrieben wurde, verwendet häufig eine globale "$()"-JavaScript-Methode, die ein oder mehrere HTML-Elemente mithilfe eines CSS-Selektors abruft. Beispielsweise wählt $("#rsvpmsg") jedes HTML-Element mit der ID von rsvpmsg aus, während $(".something") alle Elemente mit dem CSS-Klassennamen "something" auswählt. Sie können auch erweiterte Abfragen wie "Alle aktivierten Optionsfelder zurückgeben" mithilfe einer Selektorabfrage wie $("input[@type=radio][@checked]") schreiben.

Nachdem Sie Elemente ausgewählt haben, können Sie Methoden für sie aufrufen, um Aktionen auszuführen, z. B.: $("#rsvpmsg").hide();

Für unser RSVP-Szenario definieren wir eine einfache JavaScript-Funktion namens "AnimateRSVPMessage", die das div> "rsvpmsg" <auswählt und die Größe des Textinhalts animiert. Der folgende Code beginnt den Text klein und bewirkt dann, dass er sich über einen Zeitrahmen von 400 Millisekunden erhöht:

<script type="text/javascript">

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

</script>

Anschließend können wir diese JavaScript-Funktion so verknüpfen, dass sie aufgerufen wird, nachdem unser AJAX-Aufruf erfolgreich abgeschlossen wurde, indem wir ihren Namen an die Ajax.ActionLink()-Hilfsmethode übergeben (über die AjaxOptions-Ereigniseigenschaft "OnSuccess"):

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

Wenn nun auf den Link "RSVP für dieses Ereignis" geklickt wird und unser AJAX-Aufruf erfolgreich abgeschlossen ist, wird die zurückgesendete Inhaltsnachricht animiert und groß:

Zusätzlich zur Bereitstellung eines "OnSuccess"-Ereignisses macht das AjaxOptions-Objekt OnBegin-, OnFailure- und OnComplete-Ereignisse verfügbar, die Sie verarbeiten können (zusammen mit einer Vielzahl anderer Eigenschaften und nützlicher Optionen).

Bereinigen: Umgestalten einer RSVP-Partielle Ansicht

Unsere Detailansichtsvorlage wird langsam etwas lang, was die Überstunden ein wenig schwieriger zu verstehen macht. Um die Lesbarkeit des Codes zu verbessern, erstellen wir abschließend eine partielle Ansicht – RSVPStatus.ascx –, die den gesamten RSVP-Ansichtscode für unsere Detailseite kapselt.

Hierzu klicken Sie mit der rechten Maustaste auf den Ordner \Views\Dinners und wählen dann den Menübefehl Add-View> aus. Es wird ein Dinner-Objekt als stark typisiertes ViewModel verwendet. Anschließend können wir den RSVP-Inhalt aus der Detail.aspx-Ansicht kopieren/einfügen.

Nachdem wir dies getan haben, erstellen wir auch eine weitere Teilansicht – EditAndDeleteLinks.ascx –, die unseren Code für die Linkansicht bearbeiten und löschen kapselt. Außerdem wird es ein Dinner-Objekt als stark typisiertes ViewModel-Objekt verwenden und die Logik Bearbeiten und Löschen aus der Detail.aspx-Ansicht kopieren/einfügen.

Unsere Detailansichtsvorlage kann dann nur zwei Aufrufe der Html.RenderPartial()-Methode unten enthalten:

<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>

Dadurch ist der Code sauberer zu lesen und zu verwalten.

Nächster Schritt

Sehen wir uns nun an, wie wir AJAX noch weiter verwenden und unserer Anwendung unterstützung für interaktive Zuordnungen hinzufügen können.

ZurückWeiter