Korzystanie z technologii AJAX w celu dostarczania aktualizacji dynamicznych

autor: Microsoft

Pobierz plik PDF

Jest to krok 10 bezpłatnego samouczka aplikacji "NerdDinner" , który zawiera instrukcje dotyczące tworzenia małej, ale kompletnej aplikacji internetowej przy użyciu ASP.NET MVC 1.

Krok 10 implementuje obsługę zalogowanych użytkowników, którzy chcą wziąć udział w kolacji, korzystając z podejścia opartego na technologii Ajax zintegrowanego na stronie szczegółów kolacji.

Jeśli używasz ASP.NET MVC 3, zalecamy skorzystanie z samouczków Wprowadzenie With MVC 3 lub MVC Music Store.

NerdDinner — krok 10: Włączanie protokołu RSVP przez AJAX akceptuje

Teraz zaimplementujmy obsługę zalogowanych użytkowników, aby rsVP zainteresowali się udziałem w kolacji. Włączymy to przy użyciu podejścia opartego na technologii AJAX zintegrowanego na stronie szczegółów kolacji.

Wskazuje, czy użytkownik ma wartość RSVP

Użytkownicy mogą odwiedzić adres URL /Dinners/Details/[id], aby wyświetlić szczegółowe informacje o konkretnej kolacji:

Metoda akcji Details() jest implementowana w następujący sposób:

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

public ActionResult Details(int id) {

    Dinner dinner = dinnerRepository.GetDinner(id);

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

Pierwszym krokiem do zaimplementowania obsługi RSVP będzie dodanie metody pomocniczej "IsUserRegistered(username)" do obiektu Dinner (w ramach klasy częściowej Dinner.cs, która została skompilowana wcześniej). Ta metoda pomocnika zwraca wartość true lub false w zależności od tego, czy użytkownik ma obecnie wartość RSVP dla kolacji:

public partial class Dinner {

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

Następnie możemy dodać następujący kod do naszego szablonu widoku Details.aspx, aby wyświetlić odpowiedni komunikat wskazujący, czy użytkownik jest zarejestrowany, czy nie dla zdarzenia:

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

<% } %>

A teraz, gdy użytkownik odwiedzi kolację, zostanie zarejestrowany, zobaczy następujący komunikat:

A kiedy odwiedzają kolację, nie są zarejestrowani, zobaczą poniższy komunikat:

Implementowanie metody akcji Register

Teraz dodajmy funkcje niezbędne do umożliwienia użytkownikom programu RSVP na kolację ze strony szczegółów.

Aby to zaimplementować, utworzymy nową klasę "RSVPController", klikając prawym przyciskiem myszy katalog \Controllers i wybierając polecenie menu Add-Controller>.

Zaimplementujemy metodę akcji "Zarejestruj" w nowej klasie RSVPController, która przyjmuje identyfikator kolacji jako argument, pobiera odpowiedni obiekt Dinner, sprawdza, czy zalogowany użytkownik znajduje się obecnie na liście użytkowników zarejestrowanych dla niego, a jeśli nie doda dla nich obiektu 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!");
    }
}

Zwróć uwagę powyżej, jak zwracamy prosty ciąg jako dane wyjściowe metody akcji. Moglibyśmy osadzić ten komunikat w szablonie widoku , ale ponieważ jest tak mały, po prostu użyjemy metody pomocnika Content() w klasie podstawowej kontrolera i zwrócimy komunikat ciągu, jak powyżej.

Wywoływanie metody akcji RSVPForEvent przy użyciu technologii AJAX

Użyjemy technologii AJAX, aby wywołać metodę akcji Zarejestruj w widoku Szczegóły. Implementacja jest dość łatwa. Najpierw dodamy dwa odwołania do biblioteki skryptów:

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

Pierwsza biblioteka odwołuje się do podstawowej biblioteki skryptów ASP.NET AJAX po stronie klienta. Ten plik ma rozmiar około 24 tys. (skompresowany) i zawiera podstawowe funkcje AJAX po stronie klienta. Druga biblioteka zawiera funkcje narzędzi zintegrowane z wbudowanymi metodami pomocnika AJAX ASP.NET MVC (których wkrótce użyjemy).

Następnie możemy zaktualizować kod szablonu widoku, który został dodany wcześniej, tak aby zamiast zwracać komunikat "Nie jesteś zarejestrowany dla tego zdarzenia", zamiast tego renderujemy link, który po wypchnięciu wykonuje wywołanie AJAX, które wywołuje metodę akcji RSVPForEvent na kontrolerze RSVP i rsVPs użytkownika:

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

Użyta powyżej metoda pomocnika Ajax.ActionLink() jest wbudowana w ASP.NET MVC i jest podobna do metody pomocnika Html.ActionLink(), z tą różnicą, że zamiast standardowej nawigacji sprawia, że wywołanie AJAX do metody akcji po kliknięciu linku. Powyżej wywołujemy metodę akcji "Register" na kontrolerze "RSVP" i przekazujemy parametr DinnerID jako parametr "id". Ostatni przekazywany parametr AjaxOptions wskazuje, że chcemy podjąć zawartość zwróconą z metody akcji i zaktualizować element div> HTML <na stronie, którego identyfikator to "rsvpmsg".

A teraz, gdy użytkownik przejdzie do kolacji, nie jest jeszcze zarejestrowany, zobaczy link do RSVP dla niego:

Kliknięcie linku "RSVP dla tego zdarzenia" spowoduje wywołanie AJAX do metody akcji Register na kontrolerze RSVP, a po jego zakończeniu zobaczy zaktualizowany komunikat, jak pokazano poniżej:

Przepustowość sieci i ruch związany z wykonywaniem tego wywołania AJAX są naprawdę lekkie. Gdy użytkownik kliknie link "RSVP dla tego zdarzenia", zostanie wykonane małe żądanie sieci HTTP POST do adresu URL /Dinners/Register/1 , który wygląda następująco w sieci:

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

Odpowiedź z naszej metody akcji Zarejestruj jest po prostu:

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

To lekkie wywołanie jest szybkie i będzie działać nawet przez powolną sieć.

Dodawanie animacji jQuery

Zaimplementowana funkcja AJAX działa dobrze i szybko. Czasami jednak może się tak szybko zdarzyć, że użytkownik może nie zauważyć, że link RSVP został zastąpiony nowym tekstem. Aby wynik był nieco bardziej oczywisty, możemy dodać prostą animację, aby zwrócić uwagę na komunikat aktualizacji.

Domyślny szablon projektu MVC ASP.NET obejmuje bibliotekę jQuery — doskonałą (i bardzo popularną) open source bibliotekę Języka JavaScript obsługiwaną przez firmę Microsoft. Zestaw jQuery udostępnia wiele funkcji, w tym ładny wybór modelu DOM HTML i bibliotekę efektów.

Aby użyć zestawu jQuery, najpierw dodamy do niego odwołanie do skryptu. Ponieważ będziemy używać zapytania jQuery w różnych miejscach w naszej witrynie, dodamy odwołanie do skryptu w naszym pliku strony wzorcowej Site.master, aby wszystkie strony mogły go używać.

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

Kod napisany przy użyciu metody JQuery często używa globalnej metody Języka JavaScript "$()", która pobiera jeden lub więcej elementów HTML przy użyciu selektora CSS. Na przykład $("#rsvpmsg") wybiera dowolny element HTML o identyfikatorze rsvpmsg, podczas gdy element $(".something") wybiera wszystkie elementy o nazwie klasy CSS "coś". Możesz również pisać bardziej zaawansowane zapytania, takie jak "zwracanie wszystkich zaznaczonych przycisków radiowych" przy użyciu zapytania selektora, takiego jak $("input[@type=radio][@checked]").

Po wybraniu elementów możesz wywoływać metody, aby podejmować działania, takie jak ukrywanie ich: $("#rsvpmsg").hide();

W naszym scenariuszu RSVP zdefiniujemy prostą funkcję JavaScript o nazwie "AnimateRSVPMessage", która wybiera element div> "rsvpmsg" <i animuje rozmiar zawartości tekstowej. Poniższy kod uruchamia mały tekst, a następnie powoduje zwiększenie go w przedziale czasu 400 milisekund:

<script type="text/javascript">

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

</script>

Następnie możemy połączyć tę funkcję JavaScript, która zostanie wywołana po pomyślnym zakończeniu wywołania AJAX, przekazując jej nazwę do metody pomocnika Ajax.ActionLink() (za pośrednictwem właściwości zdarzenia "OnSuccess"):

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

A teraz po kliknięciu linku "RSVP dla tego zdarzenia", a nasze wywołanie AJAX zostanie zakończone pomyślnie, wiadomość z zawartością wysłana z powrotem będzie animować i rozwijać duże:

Oprócz udostępniania zdarzenia "OnSuccess" obiekt AjaxOptions uwidacznia zdarzenia OnBegin, OnFailure i OnComplete, które można obsłużyć (wraz z różnymi innymi właściwościami i przydatnymi opcjami).

Oczyszczanie — refaktoryzacja widoku częściowego RSVP

Nasz szablon widoku szczegółów zaczyna trochę trwać, co w godzinach nadliczbowych utrudni zrozumienie. Aby zwiększyć czytelność kodu, ukończmy tworzenie widoku częściowego — RSVPStatus.ascx — który hermetyzuje cały kod widoku RSVP dla naszej strony Szczegółów.

Możemy to zrobić, klikając prawym przyciskiem myszy folder \Views\Dinners, a następnie wybierając polecenie menu Dodaj widok>. Będziemy mieli obiekt Dinner jako silnie typizowany model ViewModel. Następnie możemy skopiować/wkleić zawartość RSVP z widoku Details.aspx.

Po wykonaniu tej czynności utwórzmy również inny widok częściowy — EditAndDeleteLinks.ascx — który hermetyzuje kod widoku linku Edytuj i Usuń. Będziemy również mieli do niego obiekt Dinner jako silnie typizowany model ViewModel, a następnie skopiuj/wklej logikę Edytuj i Usuń z widoku Details.aspx.

Nasz szablon widoku szczegółów może następnie zawierać dwa wywołania metody Html.RenderPartial() u dołu:

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

Dzięki temu kod jest czystszy do odczytu i konserwacji.

Następny krok

Przyjrzyjmy się teraz, jak możemy jeszcze bardziej używać technologii AJAX i dodać obsługę mapowania interakcyjnego do naszej aplikacji.

WsteczDalej