Tuesday, April 3, 2012

Ajax - the 3 simple ways example

the most easy way to do ajax, if you're developing with .Net, is to use the AjaxUpdatePanel. tp use it you must add a script manager to your page, preferred in you master page if you have one, and from there on all your standard logic and fields and whatever inside the Content Template

<asp:ScriptManager ID="ScriptManager1" runat="server" > </asp:ScriptManager>
<asp:UpdatePanel ID="uppContact" runat="server" UpdateMode="Conditional">
      <!-- html tags -->
      <%-- server tags --%>
most developers don't like the UpdatePanel and for good reasons:
1 - for it to trigger you need a server control that will trigger a post back
2 - it actually do a full postback, with a full page life cycle, and a full response, only in the client if "fakes" it to feel as only whatever in the panel has changed, meaning its really heavy, and kinda lose the point of ajax, its more useful for big stuff like paging or big forms.
another option given by the .Net framework is the PageMethods, where if you develop a .Net page you can give some static methods a WebMethod attribute (System.Web.Services) and call them from the client. For that you must enable the page methods within the script manager

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

an example for a WebMethods in the server code:

public static string GetTime(int modifier)
      return DateTime.Now.AddDays(modifier);

and in order to call it via javascript you need 2 methods, one to call it and another for the callback:

function GetTime(value){
    PageMethods.UpdateExstension(c, conId, OnUpdateComplete);

function OnUpdateComplete(result){

the last option, and the most common one, is the original one, using jQuery

using jQuery in your page you must use a jQuery lib of any version, for example

<script src="jquery-1.9.1.min.js" ></script>

you are most welcome to use their CDN's like this

<script src="https://code.jquery.com/jquery-1.11.2.js" ></script>

here we can choose what to call, a WebMethod, some generic handler, or any api available, lets start by demonstrating how to call a WebMethod

<script type="text/javascript">
$(document).ready(function () {
    // Add the page method call as an onclick handler for the div.
    $("#MyButton").click(function () {
            type: "POST",
            url: "Default.aspx/GetDate",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
               // Replace the div's content with the page method's return.
               $("#Result").text(msg.d); //DO NOT FORGET .d

in case you don't want to use any WebMethod, or maybe you just can't, then its really easy to create a handler for yourself. I have 2 posts, one with some explanations and the other with an example


from there the ajax call gets as easy as this

url: "Handler1.ashx",
  success: function (data) {


No comments:

Post a Comment