Ajax in ASP.NET cu JQuery

Vezi toate articole

Exista mai multe metode de a folosi AJAX in ASP.NET 2.0, dar cea pe care am descoperit-o ca a fi cea mai eficienta e a “hacui” platforma ASP.NET Ajax prin intermediul JQuery.

Intai sa facem o prezentare a posibilitatilor de a folosi AJAX in ASP.NET.

-    Avem UpdatePanel, care este usor de utilizat, dar aceasta este versiunea mai putin eficienta de AJAX. Doar da iluzia de incarcare partiala a paginii.

-    Apoi, exista optiunea de a utiliza traditionalele servicii web ASMX, dar aceasta implementare e putin mai costisitoare.

-    Si acum vine metoda mea preferata : PageMethods. Cu ajutorul inserarii unui ScriptManager putem declara pe server, o metoda speciala cu atributul [WebMethod].

Un exemplu al acestui lucru:

public partial class _Default : System.Web.UI.Page
{

protected void Page_Load(object sender, EventArgs e)
      {

   }
   [WebMethod]
      public static string GetCurrentDate()
      {
            return DateTime.Now.ToString("HH:mm:ss");
   }
}

Si in pagina .aspx :

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />

<script language="javascript">
function UpdateTime()
{
       PageMethods.GetCurrentDate(OnSucceeded, OnFailed);
}

function OnSucceeded(result, userContext, methodName)
{
        $get('lblClock').innerHTML = result;
}
function OnFailed(error, userContext, methodName)
{
        $get('lblClock').innerHTML = "eroare";
}

setTimeout("UpdateTime()",1000);
</script>

<asp:Label ID="lblClock" CssClass="txt1" runat="server" >

P.S. Foarte important. La ScriptManager de pe pagina, trebuie sa fie setata proprietatea EnablePageMethods. Altfel acest lucru nu merge.

In urma acestui exemplu, avem un ceas ce se updateaza in fiecare secunda fara a face un postback pe server.

Exista insa o problema.
Acest cod merge perfect in IE dar pe Mozilla Firefox acest cod poate sa genereze ocazional o eroare de gen : “PageMethods not found”. Si aceasta apare doar ocazional.

Solutia vine cu ajutorul JQuery.
Si realizam acest lucru fara sa schimbam nimic server-side.
Toate modificarile se fac in pagina .aspx.

Intai de toate, trebuie introdus in tagul <head>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>

Nu mai este necesara pastrarea pe pagina nici a ScriptManager.

Codul va arata asa:
<script language='javascript'>
function ajax() {
    $.ajax({
      type: "POST",
      url: "Default.aspx/GetCurrentDate",
      data: "{}",
      contentType: "application/json; charset=utf-8",
      dataType: "json",

      success: function(returnMsg) {
        $("#Clock").text(returnMsg);
        setTimeout(ajaxx, 1000);
      },
      error:('error'); //or whatever you want to do
}function(){
       alert
    });
}

setTimeout(ajax,1000);

</script>

<div id="Clock">time..?</div>

Si in urma acestei operatii suntem browser compatible, si in experienta mea aceasta e cea mai buna metoda de a utiliza AJAX in ASP.NET.

Ajax in ASP.NET cu JQuery

WEB DESIGN

ARTICOLE WEB DESIGN

NEWSLETTER