Ajax Zwykle, gdy chcemy zrobić cokolwiek asynchronicznie w ASP.NET korzystamy z gotowego frameworku ASP.NET AJAX. Dzięki niemu mamy wciąż kontrole nad stroną używając tylko C# . Znajomość JavaScript i jQuery nie jest wcale wymagana w takich asynchronicznych scenariuszu.

Niestety takie rozwiązanie też ma swoje wady. ASP.NET AJAX nie jest wydajny. Jest on w końcu uniwersalny rozwiązaniem na problem asynchroniczności. Uniwersalność tworzy dużo kodu i procedur, które zwykle nie są potrzebne dla prostych rozwiązań.

W tym wpisie użyje JQuery aby dynamicznie wywołać metodę strony ASP.NET bez użycia ScriptManager i jego właściwości EnablePageMethods . Pokazując w ten sposób prostą alternatywę dla asynchronicznego kodu w C# w ASP.NET AJAX.

Dla prostoty przykładu wyświetlimy asynchronicznie aktualną datę i godzinie na stronie.

Informacje będą przekazywane w formacie JSON.

Na początku utworzyłem pusty projekt web w Visual Studio 2010. Używając NuGet szybko do projektu dodałem aktualne skrypty JQuery. Oczywiście można to też zrobić ręcznie ,ale ten sposób jest dużo szybszy.

image

Układ projektu wygląda następująco.

image

Domyślna strona zawiera tylko deklaracje skryptów jQuery oraz mojego kodu w default.js. W stronie też znajduję się prosty div o id “Result”. Gdy klikniemy na zawartość tego diva wykonamy asynchroniczne zapytanie do serwera.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TestJqueryWebMethod.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
<script src="Scripts/jquery-1.8.1.min.js" type="text/javascript"></script>
<script src="Scripts/Default.js" type="text/javascript"></script>
<html>
<head>
  <title>Wywołanie metody JQuery C</title>
</head>
<body>
  <div id="Result">Kliknij na mnie by odczytać czas</div>
</body>
</html>

W kodzie pobocznym znajduję deklaracja metody strony. Musi być ona statyczna oraz zawierać atrybut [WebMethod]. Metoda ta zwraca obecną datę.

using System;
using System.Web.Services;

namespace TestJqueryWebMethod
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        [WebMethod]
        public static string GetDate()
        {
            return DateTime.Now.ToString();
        }
    }
}

Do uruchomienia metody strony nie potrzebujemy ScriptManager z ASP.NET AJAX. ScriptManager tak naprawdę tworzy tylko nakładkę dla JavaScript . Właściwość “EnablePageMethods” jest więc trochę oszukana, ponieważ metody strony wciąż mogą być wywoływane.

Ta nakładka tak naprawdę wysyła tylko proste zapytanie HTTP o odpowiedniej treści. Co oznacza ,że ten mechanizm łatwo skopiować do jQuery.

Wiemy ,że metoda strony jest wywoływana jak usługa sieciowa. Możemy odwołać się do niej poprzez dodanie do adres strony nazwy metody.

$(document).ready(function () {
    //Dodanie metody przy kliknięciu div z id Result
    $("#Result").click(function () {
        $.ajax({
            type: "POST",
            url: "WebForm1.aspx/GetDate",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                //zmienie zawartości diva gdy data został pobrane poprawnie
                $("#Result").text(msg.d);
            }
        });
    });
});

Ten kod jQuery po kompletnym załadowaniu strony stworzy zdarzenie kliknięcia dla div-a o id “Result”. W zdarzeniu kliknięcia wykona się asynchroniczne zapytanie POST, które wywoła metodę strony. Serwer zwróci wynik w formacie JSON. Ten wynik jest ukryty w zmiennej msg.d. Zawartość diva jest zastąpiona wartością tej zmiennej.

W ten sposób zaoszczędzimy jakieś 100 kb zbędnego kodu JavaScript generowanego przez ASP.NET AJAX.