Wednesday, September 5, 2012

$.ajax Method - Asynchronous postback

 $.ajax({
                    type: "POST",
                    url: "sample.aspx/ShowValue",
                    data: "{'data':'jisha','value1':'123456'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: true,
                    success: function (msg) {
                        suc(msg);
                    }

                });

  data: "{'data':'jisha','value1':'123456'}" - the data is the parameter needed for the method.
here "data" and "value1" are the parameter names - should be same as the code behind parameter name.

each $.ajax function needs a post back. so total 5 post backs in the button btn click.
try and feel... lol..............

Look at the below button click function, i ve 5 post backs. bt the user does not feel even one.
Ajax made it all happen.

html code
*****************************************************************************
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="sample.aspx.cs" Inherits="sample" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $("#<%=txt.ClientID %>").keypress(function (e) {
                if (e.charCode == 44 || e.which == 44) {
                    if ($.browser.msie)
                        event.returnValue = false;

                    return false;
                }
            });

            $("#<%=btn.ClientID %>").click(function () {
                $.ajax({
                    type: "POST",
                    url: "sample.aspx/ShowValue",
                    data: "{'data':'chris','value1':'123456'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: true,
                    success: function (msg) {
                        suc(msg);
                    }

                });
              
                $.ajax({
                    type: "POST",
                    url: "sample.aspx/ShowValue",
                    data: "{'data':'sonu','value1':'123456a'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: true,
                    success: function (msg) {
                        suc(msg);
                    },
                    error: function (msg) {
                        alert(msg.responseText);
                    }

                });

                $.ajax({
                    type: "POST",
                    url: "sample.aspx/ShowValue",
                    data: "{'data':'golda','value1':'123456'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: true,
                    success: function (msg) {
                        suc(msg);
                    }

                });

                $.ajax({
                    type: "POST",
                    url: "sample.aspx/ShowValue",
                    data: "{'data':'jisha','value1':'123456'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: true,
                    success: function (msg) {
                        suc(msg);
                    }

                });

                $.ajax({
                    type: "POST",
                    url: "sample.aspx/ShowValue",
                    data: "{'data':'ramees','value1':'123456'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: true,
                    success: function (msg) {
                        suc(msg);
                    }

                });

                return false;
            });
        });

        function suc(msg) {           
            var text = $("#divBody").html();
            $("#divBody").html(text + "<br/>" + msg.d);
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="scr" runat="server" EnablePageMethods="true"></asp:ScriptManager>
        <div>
            <asp:TextBox ID="txt" runat="server"></asp:TextBox>
            <asp:Button ID="btn" runat="server" Text="Click" />
        </div>
        <div id="divBody"></div>
   
    </form>
</body>
</html>

*****************************************************************************

Code behind

*****************************************************************************
using System;
using System.Web.Services;

public partial class sample : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    [WebMethod]
    public static string ShowValue(string data, int value1)
    {
        return DateTime.Now.ToString() + " " + data + " " + value1;
    }
}
*****************************************************************************

Written by at

4 comments:

  1. giriFebruary 21, 2013 at 2:36 PM

    Thanks for sharing this useful info. Keep updating same way.
    Regards,Siddu

    Corporate Training

    ReplyDelete
  2. Sandeep SEODecember 22, 2017 at 3:41 PM

    Thanks for all the information, it was very helpful I really like that you are providing information.....................Please contact us for Oracle Fusion HCM training details in our Erptree Training Institute

    ReplyDelete
  3. UnknownAugust 10, 2018 at 3:22 PM

    Very interesting blog to read and to share, thanks for sharing such a good blog. Keep posting more blogs like this thank you.


    Oracle Fusion PPM Training in Dallas

    ReplyDelete
  4. RajeshAugust 21, 2018 at 11:12 AM

    This is the information that I was looking for.. Thanks for the efforts you put to gather such a nice content and posted here. Visit Our Website for more details..

    ReplyDelete

Subscribe to: Post Comments (Atom)