AJAX in Asp.net [AJAX Quick Overview]
AJAX in Asp.net – One major difference between the Web Applications and Desktop Applications is that Web Applications are stateless. That means a web application runs on the client-side and communicates with the server-side in a stateless manner.
When we use AJAX in our web form to submit form, JavaScript will make a request to the server, interpret the results and update the current portion of the screen, at that time user would never know anything that data was transmitted to the server.
For instance, when user signup with a website using registration form, user needs to fill up all the required details and submit that details to database server to complete the signup process. This all process works on client-server architecture. After filling in all the details, a user needs to submit the form data using submit button to the server and then the server receives the request, validates data, and communicates with the database server to store the information, and sends the response back to the user on a client web browser. This process requires postback to the server, and it causes refreshing or reloading all the data of the web page again. So it dramatically effects on server load and slow server response time. On the other hand, by using AJAX we can achieve this without refreshing or reloading the web page.
What is AJAX in asp .net?
AJAX stands for Asynchronous JavaScript and XML. AJAX provides a technique that can communicate asynchronously between the client and server without postback for creating fast and dynamic web pages without refreshing web pages. Some of the examples of AJAX are: jQuery Autocomplete textbox, jQuery lazy loading when page scrolls down, Google Maps, etc.
Advantages:
- AJAX allows web pages to be updated asynchronously by exchanging small amounts of data, which means that it updates some specific parts of a web page without refreshing or reloading the whole page
- AJAX is a web browser technology that independent of web server software
- It is Data-driven as opposed to Page-driven
AJAX in Asp.net with UpdatePanel Example?
In my previous tutorial, I’d explained how to call code-behind method using jquery ajax call and more cracking tutorials on Ajax here. Now, I’m going to explain how to use AJAX in asp.net. Let’s start creating new asp.net project.
First open Visual Studio, and select File from the top menu, then create new project or website. After creating new project or website, add a new master page and copy-paste the following code in a master page.
Site1.master – [.master]
<head id=”Head1″ runat=”server”>
<title>Simple AJAX Example</title>
<asp:ContentPlaceHolder ID=”head” runat=”server”>
</asp:ContentPlaceHolder>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
</asp:ScriptManager>
<asp:ContentPlaceHolder ID=”ContentPlaceHolder1″ runat=”server”>
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
As you notice that I have added <asp:ScriptManager> in master page, that needs to use AJAX, and added to the master page means we can use AJAX on every webpage that is inherited by Site1.master page. Note that, if you want to use AJAX only in single page instead of every page then you need to add this tag only on that page instead master page.
After adding the master page now we need to add one web page that is inherited by Site1.master page. So create a new Web Form using Master Page click OK and select your master page, and copy-paste the following code to your web page let’s say AJAXExample.aspx page.
Ajax in ASP.net – AJAXExample.aspx – [.aspx]
<%@ Page Language=”C#” MasterPageFile=”~/Site1.Master” AutoEventWireup=”true”
CodeBehind=”AJAXExample.aspx.cs” Inherits=”AJAXExample.AJAXExample” %>
<asp:Content ID=”Content1″ ContentPlaceHolderID=”head” runat=”server”>
</asp:Content>
<asp:Content ID=”Content2″ ContentPlaceHolderID=”ContentPlaceHolder1″ runat=”server”>
<h5>Type your name in textbox and click on submit button</h5>
** Note that whole webpage will not refresh or reload
<asp:UpdatePanel ID=”UpdatePanel1″ runat=”server”>
<ContentTemplate>
<table>
<tr>
<td>Name:</td>
<td>
<asp:TextBox ID=”txtName” runat=”server”></asp:TextBox>
</td>
</tr>
<tr>
<td colspan=”2″> </td>
</tr>
<tr>
<td> </td>
<td>
<asp:Button ID=”btnSubmit” runat=”server” Text=”Submit”
OnClick=”btnSubmit_Click” />
</td>
</tr>
<tr>
<td colspan=”2″> </td>
</tr>
<tr>
<td> </td>
<td>
<asp:Label ID=”lblMsg” runat=”server” />
</td>
</tr>
</table>
<asp:UpdateProgress ID=”UpdateProgress1″ AssociatedUpdatePanelID=”UpdatePanel1″
runat=”server”>
<ProgressTemplate>
<div id=”ajaxloader”>
Loading..</div>
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID=”btnSubmit” EventName=”Click” />
</Triggers>
</asp:UpdatePanel>
</asp:Content>
Now add the following code for code-behind, choose your language (C# or Vb.net):
AJAXExample.aspx.cs – [C#]
{
System.Threading.Thread.Sleep(5000);
lblMsg.Text = “You typed ‘” + txtName.Text + “‘ in above textbox”;
}
AJAXExample.aspx.vb – [Vb.net]
Threading.Thread.Sleep(5000)
lblMsg.Text = “You typed ‘” & txtName.Text & “‘ in above textbox”
End Sub
Example Result
