ASP.NET MVC 2 cz. 10 Ajax

Dzisiaj trochę o technologi Ajax czyli Asynchroniczny (od A w nazwie) JavaScript. Dzięki zastosowaniu tej technologii strona nie musi być w całości przeładowywana przez użytkownika a w wydzielonych częściach.

Kiedy więc warto korzystać z Ajaxu?:
- renderowanie poszczególnych części strony - mając do czynienia ze skomplikowaną stroną html, warto zastanowić się czy nie podzielić ją na części i korzystając z Ajaxu renderować te części z którymi aktualnie prowadzi interakcję użytkownik. Dzięki temu odciążamy serwer.
- odczucie, że witryna działa szybciej - nie wysyłamy całej strony do serwera a tylko fragment. Dzięki temu przeładowuje się tylko ta wysyłana część co sprawia wrażenie szybszego jej działania.
- odciążenie serwera (nie trzeba ponownie odpytywać bazy danych w celu załadowania całej strony), zmniejszenie ilości połączeń
- asynchroniczność działania witryny - interakcja ze stroną w sposób jaki znamy z aplikacji deskopowych (część informacji może sama się zmieniać w przeglądarce)

Oczywiście nic nie jest bez wad. Ajax niesie także za sobą takie niebezpieczeństwa jak:
- wymuszenie włączonego JavaScriptu w przeglądarce klienta - jeżeli cała witryna jest wykonana w technologii Ajax, a użytkownik ma wyłączoną obsługę JavaScript, użytkownik nie będzie miał możliwości interakcji z naszą witryną
- strata funkcjonalności klawiszy wstecz/następny oraz funkcjonalności zakładek - korzystając z Ajax najczęściej tracimy możliwość wykorzystania funkcji przeglądarki oferujących możliwość cofnięcia się na stronie jak i dodania strony do zakładek. W przypadku korzystania z Ajaxu pasek adresu nie zmienia się, więc zapamiętanie aktualnie przeglądanej informacji jest niemożliwe.
- większa ilość przesyłanych danych - pliki JavaScrpt mogą mieć duże rozmiary co dodatkowo powiększa ilość danych które musi przesłać serwer jak i odebrać użytkownik.


Mając na uwadze podane powyżej zalety i wady warto zastosować prosty wzorzec tworzenia stron wykorzystujących Ajax:
- każde zapytanie Ajax używa osobnej akcji w kontrolerze
- w akcji sprawdzamy czy zapytanie jest Ajaxowe
- każda akcja zwraca dedykowany widok o ile zapytanie nie jest Ajaxowe
Dzięki takiemu postępowaniu unikniemy problemów w przypadku gdy użytkownik ma wyłączoną obsługę JavaScript.

Aby było możliwe korzystanie z Ajaxu w naszej aplikacji MVC dodajemy referencję do plików: MicrosoftAjax.js oraz MicrosoftMvcAjax.js:

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

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

Jak już mamy dodane referencje czas na napisanie przykładu, który pokaże jak posługiwać się Ajaxem w praktyce:
Na początek stworzymy zwykłą formę, która umożliwia wpisanie użytkownikowi frazy (np. poszukiwanej rzeczy) i zwróci prostego stringa:

    <% using (Html.BeginForm(new { action = "MojaAkcja" }))

       { %>

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

       <input type="submit" value="Wyślij" />

    <% } %>

    <div id="rezultat">

    </div>

        public string MojaAkcja(string zapytanie)

        {

            return "Wpisałeś: " + zapytanie;

        }

Przerobienie powyższego kodu na wykorzystujący Ajax sprowadza się do:

    <% using (Ajax.BeginForm("MojaAkcja", new AjaxOptions { UpdateTargetId = "rezultat" }))

       { %>

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

       <input type="submit" value="Wyślij" />

    <% } %>

    <div id="rezultat">

    </div>

Jak widać efekt uzyskaliśmy zmieniając zaledwie jedną linijkę. Oczywiście jest haczyk - jeżeli użytkownik nie będzie mieć włączonej obsługi JavaScript zostanie mu wyświetlona tylko zawartość metody MojaAkcja. Tak więc zniknie MasterPage i wszelka grafika a zostanie 1 linijka tekstu. Tego raczej nie chcielibyśmy.
Z pomocą przychodzi nam sam JavaScript który dodaje do wysyłanych nagłówków informacje o tym, że żądanie miało miejsce przy użyciu Ajaxa. W naszej akcji możemy to sprawdzić za pomocą pola IsAjaxReguest:

        public ActionResult Index(string zapytanie = "")

        {

            ViewData["dane"] = zapytanie;

            return View();

        }

        public ActionResult MojaAkcja(string zapytanie)

        {

            if (Request.IsAjaxRequest())

            {

                return Content("Wpisałeś: " + zapytanie);

            }

            return RedirectToAction("Index", new { zapytanie = zapytanie});

        }

Teraz w zależności od tego czy użytkownik ma włączoną obsługę czy też nie, zostanie przeładowana cała witryna bądź też wysłany będzie mały fragment. Oczwiście metod jest kilkanaście do wybory (np. ActionLink, RouteLink).

Zwykłe podmienianie zawartości diva to oczywiście nie wszystko co można osiągnąć za pomocą Ajaxa. Aby osiągnąć więcej można pobrać Ajax Control Toolkit, skopiować skrypty do folderu Scripts i korzystać z wielu gotowych kontrolek.

Wszystko co można osiągnąć za pomocą Ajax można także stworzyć korzystając z jQuery. To do nas należy którego z frameworków będziemy używać. metodoa IsAjaxRequest działa zarówno dobrze dla Microsoft Ajax jak i dla jQuery.

Dostajemy więc potężne narzędzie udostępniajace ogromne możliwości.