Navigator : Home > Tutorials > AJAX Tutorials > ...
Partial Page updating in AJAX
This tutorial will teach you how to create a basic AJAX application that uses the Partial Page update feature which is the basis for the importance of AJAX.
AJAX Partial Page Update Intro ASP.NET 4.0
This tutorial will cover an intro to the AJAX Control Toolkit and show how AJAX can be used to
perform its most common task a Partial Page Update.
*You should have already installed the AJAX Control Toolkit if you haven't yet get it from here.
Overview
1. Create a Web Page and Add AJAX Controls
2. Test the Page and witness the Postbacks
3. Add Triggers and an Update Panel
We are using Server Intellect and have found that by far, they are the most friendly,
responsive, and knowledgeable support team we've ever dealt with!
Create a Web Page and Add AJAX Controls
1. Create a new Empty ASP.NET Application
2. Add a ScriptManager to the page. When making AJAX Applications you always have
to have one and only one ScriptManager on the form regardless of whether you have
inserted code into it or not.
3. Add a Text Box and a Label to the web form (named TextBox1 and Label1)
4. Add a Timer from the AJAX Extensions tab of the Toolbar and set the
interval to 500(500 ms is half a second)
5. Now double click on the Timer to open the Timer1_Tick Event Function and insert this code
Label1.Text = TextBox1.Text;
|
6. This code will make it so that every time the Timer updates(or Ticks)
it will set the Label to whatever you have typed into the TextBox
Test the Page and Witness the PostBack
1. Now run the Code and witness the error that is happening with the Postback
2. The page should appear to be refreshing itself every half a second leaving you barely any
time to type into the textbox. This is because it is calling a Full Page Update (Postback).
Basically we have an AJAX Control but we are not using it in an AJAX friendly way.
3. The next step will be to add Triggers and an Update Panel so that we can witness the way AJAX is supposed to run.
We chose Server Intellect for its dedicated servers,for our web hosting.
They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.
Add Triggers and an Update Panel
1. The First Step is to add an Update Panel to the Form from the AJAX Extensions tab of the Toolbar
2. Next go to Design View and drag your Label into the Update Panel. We do this because the Update Panel
is what will perform the Partial Page Update.
3. Next we need to add a Trigger to the Update Panel so that it knows to update when the Timer Ticks
4. Go into the Update Panel Section of the Source View and insert this code to add an AsyncPostBackTrigger
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" />
</Triggers>
|
5. This code will tell the Update Panel to update when the Timer1 Control Performs an operation.
6. We could have also dragged the Timer into the Update Panel, but for educational purposes we added the Trigger manually.
We did this because we may not always want the Trigger to be in the Update Panel we may want it outside and this
is how it is done.
7. Now run the code and type text into the TextBox after half a second it should set the Label equal to whatever
you have typed inside the TextBox.Also notice how much easier it is to type now that you dont have a
Full PostBack triggering every .5 seconds.
Conclusion
In this tutorial we have used an AJAX control to perform a Partial Page Update which is the first essential step to an
AJAX application. We also learned about Triggers and how to add them manually if we need to.
Full Code Sample(ASP.NET)
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" />
</Triggers>
</asp:UpdatePanel>
</div>
<asp:Timer ID="Timer1" Interval="250" runat="server" ontick="Timer1_Tick">
</asp:Timer>
<p>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</p>
</form>
</body>
</html>
|
Yes, it is possible to find a good web host. Sometimes it takes a while. After trying several,
we went with Server Intellect and have been very happy. They are the most professional,
customer service friendly and technically knowledgeable host we've found so far.