This tutorial was created with Visual Studio.NET 2008. 2005 can be used, but Microsoft's ASP.NET AJAX Extensions, which can be downloaded at this link, must be installed.
In AJAX, we can specify areas of a page to be refreshed without refreshing the whole page. For this, we use UpdatePanels, which also have the ability to make use of triggers. These triggers allow us to specify which control initiates a certain postback. We can choose to initiate a partial postback, or a full one.
We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect's help, we were able to avoid any headaches!
In this example, we will look at how we can specify different controls to refresh the whole page, and parts of the page. We will create two UpdatePanels and see how we can refresh each of them as well as refresh the whole page with the triggers.
First, we will start off by adding the ScriptManager, if it's not already there, like so:
| <asp:ScriptManager ID="ScriptManager1" runat="server" /> |
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!
This will handle all of our AJAX calls for us, which makes it a lot easier to develop AJAX applications.
Next, we add the UpdatePanel controls:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="lblTime2" runat="server" /><br />
<asp:Button ID="butTime2" runat="server" Text="Refresh Page" /><br />
</ContentTemplate>
</asp:UpdatePanel>
<br />
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:Label ID="lblTime3" runat="server" /><br />
</ContentTemplate>
</asp:UpdatePanel> |
We used over 10 web hosting companies before we found Server Intellect. Their dedicated servers and add-ons were setup swiftly, in less than 24 hours. We were able to confirm our order over the phone. They respond to our inquiries within an hour. Server Intellect's customer support and assistance are the best we've ever experienced.
Each UpdatePanel has its own ContentTemplate, which is the area that will be refreshed upon an Asynchronous postback. We have included a label in each content, and will use the code-behind to display the current time. This will allow us to easily see what area of the page is being refreshed - we will also put a label and a button outside of the UpdatePanels so that we can see when the whole page is being refreshed - independent from the Panels.
We will use the button outside of the UpdatePanel to refresh the panel, and the button within the UpdatePanel to refresh the whole page. By default, a postback called within an UpdatePanel will be hijacked by AJAX. Using triggers, we can have more control.
We add another label and a button:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:Label ID="lblTime1" runat="server" /><br />
<asp:Button ID="butTime1" runat="server" Text="Refresh Panel" /><br /><br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="lblTime2" runat="server" /><br />
<asp:Button ID="butTime2" runat="server" Text="Refresh Page" /><br />
</ContentTemplate>
</asp:UpdatePanel>
<br />
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:Label ID="lblTime3" runat="server" /><br />
</ContentTemplate>
</asp:UpdatePanel> |
Try Server Intellect for Windows Server Hosting. Quality and Quantity!
Now that we have a label and button on our page, and also in each UpdatePanel, we will add the code-behind:
| Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
lblTime1.Text = DateTime.Now.ToString("T")
lblTime2.Text = DateTime.Now.ToString("T")
lblTime3.Text = DateTime.Now.ToString("T")
End Sub |
This simply sets the current time to the labels we created when the page is loaded. This will also run when a partial postback is performed.
Buttons are not the only control we can use for triggers. We will also add a DropDownList:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:Label ID="lblTime1" runat="server" /><br />
<asp:Button ID="butTime1" runat="server" Text="Refresh Panel" /><br /><br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="lblTime2" runat="server" /><br />
<asp:Button ID="butTime2" runat="server" Text="Refresh Page" /><br />
</ContentTemplate>
</asp:UpdatePanel>
<br />
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:Label ID="lblTime3" runat="server" /><br />
</ContentTemplate>
</asp:UpdatePanel>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true">
<asp:ListItem>Change</asp:ListItem>
<asp:ListItem>My</asp:ListItem>
<asp:ListItem>Value</asp:ListItem>
</asp:DropDownList> |
Need help with Windows Dedicated Hosting? Try Server Intellect. I'm a happy customer!
Finally, we can add the triggers. We will use the button outside of the UpdatePanels to reload them, and the button inside the first Panel will reload the page. The DropDownList will reload the Panels:
<Triggers>
<asp:AsyncPostBackTrigger ControlID="butTime1" EventName="Click" />
<asp:PostBackTrigger ControlID="butTime2" />
..
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
</Triggers> |
I just signed up at Server Intellect and couldn't be more pleased with my Windows Server! Check it out and see for yourself.
The ASPX page will now look something like this:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:Label ID="lblTime1" runat="server" /><br />
<asp:Button ID="butTime1" runat="server" Text="Refresh Panel" /><br /><br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="butTime1" EventName="Click" />
<asp:PostBackTrigger ControlID="butTime2" />
</Triggers>
<ContentTemplate>
<asp:Label ID="lblTime2" runat="server" /><br />
<asp:Button ID="butTime2" runat="server" Text="Refresh Page" /><br />
</ContentTemplate>
</asp:UpdatePanel>
<br />
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
</Triggers>
<ContentTemplate>
<asp:Label ID="lblTime3" runat="server" /><br />
</ContentTemplate>
</asp:UpdatePanel>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true">
<asp:ListItem>Change</asp:ListItem>
<asp:ListItem>My</asp:ListItem>
<asp:ListItem>Value</asp:ListItem>
</asp:DropDownList> |
To download this project, enter your email address and a link will be emailed to you.
