Simple Server Callbacks using JQuery in ASP.Net page

Amit Choudhary
14y
25k
0
0

Article

Using server side Ajax in asp.net is not much faster as Jquery ajax calls. Here I'm showing you how to prepare ajax calls using jquery and showing the data coming from server side to html page without any postback.

First you need to download the latest Jquery file from here. Add the script tag in the head of the page.

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

or you can use following script tag to use it from google code if you are connecting to internet.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
</script>

Now your page is ready to use the JQuery function in your page. Next you have to do is to write the following script inside you head tag.

    <script type="text/javascript">
    function showDetails(){
    $("#divResult").load("InfoDisplay.aspx",
                             { action: $("#TextBox1" ).val() });
    }
    </script>

What this function is doing is, $("#divResult") is identifying the div tag in which the information that will come from callback will be displayed. The next is $("#divResult").load(), this function takes three arguments

Page to display
Optional parameters to send with the page request
Action after result of the callback

Now here we have used only first two options.

load("InfoDisplay.aspx", this is the URL of requested page.

{ action: $("#TextBox1" ).val() }); This is the Parameter named "action" and value is Text of a TextBox1 control.

Now the coding of the rest aspx page will be like this:

<body>
    <form id="form1" runat="server">
    <div>
    Enter word to get Details:
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <input type="button" id="btnGetDetail" value="Click me" onclick="showDetails();" />
    <div id="divResult" style="width:420px"></div>
    </div>
    </form>
</body>

Now you have to create page InfoDisplay.aspx like below

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <fieldset>
            <legend>This is loaded from infoDisplay.aspx page using Jquery Ajax callback</legend>
            <hr />
            <b>
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></b>
            <hr />
            hello
            <br />
            #######################??
            <br />
            #################################################<br />
            #####################.
            <asp:Image ID="Image1" runat="server" ImageUrl="~/image/asd.jpg" Height="130px" Width="120px" />
        </fieldset>
    </div>
    </form>
</body>
</html>

And it's code behing page_load will be like this:

protected void Page_Load(object sender, EventArgs e)
    {
        string symbol = Request.Params["action"] ?? "";
        Label1.Text = symbol;
    }

And now run the project and see how fast it is using Jquery callbacks.

Download the attached project for sample. Aspx files are inside SimpleLoad folder.

Happy Coding...

Up Next

Ebook Download

View all

Node Js and Angular CheatSheet

Read by 26 people

Download Now!

Learn

View all