JQuery si WebMethod

Prin noiembrie 2006 descoperisem la HALO interactive posibilitatea de a apela dintr-o pagina HTML o metoda dintr-o pagina aspx folosind un ScriptManager. Trebuia sa fac o autentificare in doi pasi. ScriptManger-ul genereaza ceva JavaScript folosit pentru a construi apelul AJAX, dar si pentru a folosi o sintaxa de genul PageMethods.MethodName, valabila atata timp cat e setata true optiunea EnablePageMethods.
Mult mai usor de scris e insa atunci cand se foloseste JQuery. O dezbatere am gasit aici.
Vreau doar sa dau un exemplu intersant de folosit intr-un shopping cart. Intr-un astfel de site exista cred mai multe pagini statice, decat dinamice. Adica fizic mai multe html-uri decat aspx-uri. Acum pe fiecare pagina html sau aspx apare undeva in pagina numarul de produse puse in cos. Daca ar fi sa se aleaga Master Pages pentru a-l afisa, odata ce se adauga o pagina noua in site trebuie recompilat tot situl. Solutia cea mai buna e sa se foloseasca AJAX. Partea frumoasa e ca poti face cumparaturi pe o pagina ASPX, iar cand ajungi in pagina HTML nu trebuie sa iti faci griji ca a disparut cosul, pentru ca AJAX tine cont de sesiune.

Pe server metoda trebuie sa se afle intr-o pagina ASPX, sa fie publica, statica si decorata cu atributul WebMethod;

[WebMethod]
public static int GetItemsCount()
{
if (HttpContext.Current.Session["items"] != null
&& HttpContext.Current.Session["items"] is Int32)
return ((Int32)HttpContext.Current.Session["items"]);
return 0;
}


La nivel de client (browser), se face apelul folosind JQuery. Nici o alta setare magica nu se face ( cu exceptia faptului ca trebuie download fisierul JavaScript care contine JQuery ).


$(document).ready(
$.ajax({
type: "POST",
url: "Products.aspx/GetItemsCount",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {

$("#productsCount").text(msg.d);
}
})
);


De fiecare data, la incarcarea paginii pe client, se va face un apel la la metoda GetItemsCount. Rezultatul este pus in interiorul unui element din html care are idul productsCount.

Codul asta l-am pus intr-un fisier js si poate fi referentiat intr-o pagina HTML.


<head>
<title>Help</title>

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

<script src="js/shopping cart.js" type="text/javascript"></script>

</head>


Acu.. Download source code and play

Comments

Popular posts from this blog

IIS 7.5, HTTPS Bindings and ERR_CONNECTION_RESET

Verify ILogger calls with Moq.ILogger

Table Per Hierarchy Inheritance with Column Discriminator and Associations used in Derived Entity Types