Reintroduction to AJAX ASP.NET 4.0
Welcome to AJAXTutorials.com were we will go step by step into beggining examplesof AJAX used in ASP.NET applications.
This is an Overview of ASP.NET and its different powerfull Tools. This is Step one in getting situated with AJAX. Feel free to comment or Suggest any tutorials you would like to see.
· No flickering during postback
· No change of scroll position during postback
· State of the multimedia in page is unaffected
· Reduction of bandwidth costs
· Dynamic, faster and provides a richer user experience.
Let’s start with the core component of ASP.NET AJAX, which is the Script Manager control. Its primary role is the arbitration of all other ASP.NET AJAX controls on the Web Form and the addition of the right scripting libraries to the Web browser so that the client portion of ASP.NET AJAX can function.
The UpdatePanel Control
The UpdatePanel control is the control that delimits the server-side content that will take part in the partial rendering functionality of the AJAX Extensions. There is no limit to the number of UpdatePanel controls that can be on a page, and they can be nested. Each UpdatePanel is isolated, so that each can work independently (you can have two UpdatePanels running at the same time, rendering different parts of the page, independent of the page’s postback). By default, when a partial page render is triggered, all UpdatePanel controls on the page will be refreshed, whether or not the UpdatePanel controls defined triggers for such action. For example, if one UpdatePanel defines a Button control, and that Button control is clicked, all UpdatePanel controls on that page will be refreshed by default. This is because, by default, the UpdateMode property of the UpdatePanel is set to Always. Alternatively, you may set the UpdateMode property to Conditional, which means that the UpdatePanel will only be refreshed if a specific trigger is hit.
The UpdateProgress Control
In an AJAX application there is often a noticeable pause between the time the browser makes a network request and the time the browser receives a response. To let the user know that the network conversation is taking place, the ASP.NET AJAX UpdateProgress control provides immediate feedback by displaying an animated image, ‘loading’ text, or other HTML( the template as you provide) that disappears once the network response is received.
Now we can create a Sample web application which demonstrates the controls mentioned above.
Open Microsoft Visual Studio 2010, create a new ASP.NET Web Site project by going to File -> New -> Web Site and selecting ASP.NET Web Site from the templates available. Let’s name it to AjaxTutorials.
You can see a blank default page with basic ASP.NET markup. To use the Ajax controls you need to include the AjaxControlToolkit.dll in your Bin folder. Create the bin folder in the root and add the reference to this dll. To display toolkit controls in your toolbox, add a new tab in Toolbox. name it Ajax Control Toolkit or as you wish. Then right the tab and click Choose Items. You can select the dll which you have just added to the bin folder and you will see the controls in the toolbox. This is only needed for the first time you use AJAX. Next time onwards, the toolkit controls will be automatically added in your toolbox. You can drag and drop the controls in to the web forms.
In this sample we will see a simple usage of Update Progress control and thereby the usage of ScriptManager and UpdatePanel. Now in the Default.aspx page, drag Script Manager control from the toolbox which is the basic for AJAX application. This should be placed inside the form tag. The controls causing partial post back are to be kept in the UpdatePanel. In the UpdatePanel there is a ContentTemplate property where we include all the server controls. Let’s add a Label and a Button inside UpdatePanel. Below Update Panel drag a UpdateProgress control to show the progress of the button click action. Inside UpdateProgress control, there is a ProgressTemplate where we should add the template for showing progress. You can add a text or a image or both. Now the page markup will look like:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<title>ASP>NET Ajax sample code</title>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div style="text-align: center">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<asp:Label ID="Label1" runat="server" Width="134px"></asp:Label><br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Show Today's Date" />
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<img src="progress.gif" />
Updating Page ......
In the button click include the code below:
protected void Button1_Click(object sender, EventArgs e)
Label1.Text = DateTime.Now.ToString();
Here when the button is clicked, the current date is shown in the Label, but only after a 3 seconds delay created by Thread.Sleep method. This delay is caused so as to show the working of UpdateProgress control.
When you run the page and click on the button you can see the update progress showing up.
When the process is completed the progress bar disappears and date is displayed on the label.