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 .