One major difference between the Web Applications and Desktop Applications is that Web Applications are stateless. That means a web application runs on client-side and communicates with server-side in a stateless manner.
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 all the details, user needs to submit the form data using submit button to the server and then server receives the request, validates data and communicate with the database server to store the information and sends the response back to the user on client web browser. This process requires postback to the server, and it cause to 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, with using AJAX we can achieve this without refreshing or reloading web page.
What is AJAX?
- AJAX allows web pages to be updated asynchronously by exchanging small amounts of data, 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 new master page and copy paste following code in master page.
Site1.master – [.master]
<head id=”Head1″ runat=”server”>
<title>Simple AJAX Example</title>
<asp:ContentPlaceHolder ID=”head” runat=”server”>
<form id=”form1″ runat=”server”>
<asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
<asp:ContentPlaceHolder ID=”ContentPlaceHolder1″ runat=”server”>
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 are inherited by Site1.master page. Note that, if you want to use AJAX only in single page instead every page then you need to add this tag only on that page instead master page.
After adding master page now we need to add one web page that is inherited by Site1.master page. So create new Web Form using Master Page click OK and select your master page, and copy paste following code to your web page let’s say AJAXExample.aspx page.
AJAXExample.aspx – [.aspx]
CodeBehind=”AJAXExample.aspx.cs” Inherits=”AJAXExample.AJAXExample” %>
<asp:Content ID=”Content1″ ContentPlaceHolderID=”head” runat=”server”>
<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”>
<asp:TextBox ID=”txtName” runat=”server”></asp:TextBox>
<td colspan=”2″> </td>
<asp:Button ID=”btnSubmit” runat=”server” Text=”Submit”
<td colspan=”2″> </td>
<asp:Label ID=”lblMsg” runat=”server” />
<asp:UpdateProgress ID=”UpdateProgress1″ AssociatedUpdatePanelID=”UpdatePanel1″
<asp:AsyncPostBackTrigger ControlID=”btnSubmit” EventName=”Click” />
Now add the following code for code-behind, choose your language (C# or Vb.net):
AJAXExample.aspx.cs – [C#]
lblMsg.Text = “You typed ‘” + txtName.Text + “‘ in above textbox”;
AJAXExample.aspx.vb – [Vb.net]
lblMsg.Text = “You typed ‘” & txtName.Text & “‘ in above textbox”