2 ways to implement AJAX in ASP.NET

Sourav.Kayal
Posted by in ASP.NET category on for Beginner level | Points: 250 | Views : 2101 red flag

Two different ways to implement AJAX in ASP.NET

2 ways to implement AJAX in ASP.NET


In this article we are going to look into how to implement Progress bar in AJAX .  Modern web applications are much faster than the earlier one. In old days, web application was not much smart, If anything need to get from server there was need to refresh or reload the whole page.

Now, there is great problem in that. When whole page get loads by nature all the controls get load and here is main bottleneck of web application.

To solve this problem the concept of AJAX was introduced and currently web application is smart enough by help of AJAX.

How AJAX solved the problem?  By help of AJAX we can exchange data from server without loading whole page.

 So, this is the history behind introduction of AJAX in web application. Now next question is “How to implement AJAX?”

Here we will see two different ways to implement AJAX in asp.net application

Implement AJAX by UpdatePanel control

Step 1 ) Add below code in aspx page

<%@ Page
Language="C#"
AutoEventWireup="true"
CodeBehind="ajaxProgressBar.aspx.cs"
Inherits="ASP.NET.ajaxProgressBar"
%>
<!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>
</head>
<body>
    <form id="form1" runat="server">
    <div>
   
        AJAX using Update Panel<br />
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>                <asp:TextBox ID="TextBox1"runat="server"></asp:TextBox>
                <asp:Button ID="Button1" runat="server" Text="Request to AJAX" onclick="Button1_Click"/>
                <asp:Label ID="Label1" runat="server"></asp:Label>
            </ContentTemplate>
           
        </asp:UpdatePanel>
    </div>
 
    </form>
</body>
</html>
 

Step 2) Add below code in .cs file

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
namespace ASP.NET
{
    public partial class ajaxProgressBar : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
 
        }
 
        protected void Button1_Click(object sender, EventArgs e)
        {
            //Code to server client process
            System.Threading.Thread.Sleep(5000);
            this.Label1.Text = "AJAX Response : "+ this.TextBox1.Text;
        }
    }
}

This is the example to implement AJAX using update panel. Here Update panel has been used and within this update panel controls are kept which are needed to change dynamically. Basically this is partial post back. When user will click button whole page will not get post back only the portion within Update panel will change and refresh.

 

So, this is one way to implement AJAX in asp.net

Implement AJAX by JQuery ajax method

2) JQuery ajax function to implement AJAX

This is second way to implement ajax in ASP.NET application . Here we will use ajax method of JQuery . 

You can host JQuery in your local system or can able to access from CDN of Google or Microsoft. Here CDN is used, If you use same code then make sure you have internet in your computer.

Step 1) Add below code in your aspx page

<%@ Page
Language="C#"
AutoEventWireup="true"
CodeBehind="ajaxTest.aspx.cs"
Inherits="ASP.NET.ajaxTest"
%>
<!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="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
        function CallAjax() {
 
            var Value = document.getElementById("TextBox1").value;
            $.ajax({
                type: "POST",
                async: false,
                url: "ajaxTest.aspx/GetData",
                data: '{Value:"' + Value + '"}',
                contentType: "application/json; charset=utf-8",
                dataType: "JSON",
                success: function (mag) {
                    alert(mag.d);
                }
            })
        }
    </script>
 
 
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="CallAjax()"/>
        <p id="Result"></p>
    </div>
 
    </form>
</body>
</html>
 

Step 2) Add below code in .cs file

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Web.Script.Services;
 
namespace ASP.NET
{
    public partial class ajaxTest : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
 
        }
 
        [WebMethod]
        [ScriptMethod(UseHttpGet = false)]
        public static String GetData(String Value)
        {
            return "Your name is " + Value;
        }
    }
}
 

Here is the output


Conclusion:- 

Those are two different techniques to implement AJAX in asp.net application . But second one is much faster then Update Panel . 

Page copy protected against web site content infringement by Copyscape

About the Author

Sourav.Kayal
Full Name: Sourav Kayal
Member Level: Silver
Member Status: Member,MVP
Member Since: 6/20/2013 2:09:01 AM
Country: India
Read my blog here http://ctrlcvprogrammer.blogspot.in/
http://www.dotnetfunda.com
I am .NET developer working for HelixDNA Technologies,Bangalore in healthcare domain. Like to learn new technology and programming language. Currently working in ASP.NET ,C# and other microsoft technologies.

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)