This tutorial was created with Visual Studio.NET 2010. 2008 can be used, but Microsoft’s ASP.NET AJAX Extensions, which can be downloaded at
this link
, must be installed.
Using AJAX in ASP.NET, we are able to programmatically force an UpdatePanel to Update – we do not have to rely solely on triggers. Similarly, we are able to stop an UpdatePanel from updating if certain criteria are not met.
We used over 10 web hosting companies before we found Server Intellect . They offer dedicated servers , and they now offer cloud hosting !
In this tutorial, we will be looking at how we can programmatically make an UpdatePanel update when certain criteria are met. We will be using an UpdatePanel to display the current time, and we’ll also have a textbox and a button, which we’ll use to require the user to enter a string before the UpdatePanel is updated.
The first thing we will do is build our ASPX page. First, we will add the ScriptManager tag, if it has not already been added for us:
Using AJAX in ASP.NET, we are able to programmatically force an UpdatePanel to Update – we do not have to rely solely on triggers. Similarly, we are able to stop an UpdatePanel from updating if certain criteria are not met.
We used over 10 web hosting companies before we found Server Intellect . They offer dedicated servers , and they now offer cloud hosting !
In this tutorial, we will be looking at how we can programmatically make an UpdatePanel update when certain criteria are met. We will be using an UpdatePanel to display the current time, and we’ll also have a textbox and a button, which we’ll use to require the user to enter a string before the UpdatePanel is updated.
The first thing we will do is build our ASPX page. First, we will add the ScriptManager tag, if it has not already been added for us:
<asp:ScriptManager ID="ScriptManager1" runat="server" />The ScriptManager will handle all the AJAX calls for us; ASP.NET makes it really easy for us to implement and use AJAX. We also need to add the UpdatePanel:
<form id="form2" runat="server"> <asp:scriptmanager id="ScriptManager2" runat="server" /> <asp:updatepanel id="UpdatePanel2" runat="server"> <ContentTemplate> </ContentTemplate> </asp:updatepanel> </form>We stand behind Server Intellect and their support team. They offer dedicated servers , and they are now offering cloud hosting !
Because we will be programmatically updating the UpdatePanel, we need to set two attributes – UpdateMode and ChildrenAsTriggers. We do not want the UpdatePanel to Update all the time (hijack all PostBacks), so we set this to Conditional. We also do not want to specify the child controls of the UpdatePanel as triggers, causing it to update, also. So our UpdatePanel will look like this:
<form id="form2" runat="server"> <asp:scriptmanager id="ScriptManager2" runat="server" /> <asp:updatepanel id="UpdatePanel2" runat="server" updatemode="Conditional" childrenastriggers="false"> <ContentTemplate> </ContentTemplate> </asp:updatepanel> </form>Now we can add the controls to our ContentTemplate:
<form id="form2" runat="server"> <asp:scriptmanager id="ScriptManager2" runat="server" /> <asp:updatepanel id="UpdatePanel2" runat="server" updatemode="Conditional" childrenastriggers="false"> <ContentTemplate> Time now: <%= DateTime.Now.ToStringundefined"T") %> <br /><br /> Please type Update in the textbox, and hit the button:<br /> <asp:TextBox ID="TextBox1" runat="server" /><br /> <asp:Button ID="Button1" runat="server" Text="Update" onclick="butUpdate_Click" /> </ContentTemplate> </asp:updatepanel> </form>Notice we have the button onclick attribute set to call a method. The method will look something like this:
Partial Class _Default Inherits System.Web.UI.Page Protected Sub butUpdate_ClickundefinedByVal sender As Object, ByVal e As System.EventArgs) Handles butUpdate.Click If txtUpdate.Text = "Update" Then UpdatePanel1.Updateundefined) End If End Sub End ClassYes, it is possible to find a good web host . Sometimes it takes a while to find one you are comfortable with. After trying several, we went with Server Intellect and have been very happy thus far. They are by far the most professional, customer service friendly and technically knowledgeable host we’ve found so far.
If the user followed the instructions, the UpdatePanel will refresh; but if the user made a mistake, the UpdatePanel will not update.
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub butUpdate_ClickundefinedByVal sender As Object, ByVal e As System.EventArgs) Handles butUpdate.Click
If txtUpdate.Text = "Update" Then
UpdatePanel1.Updateundefined)
End If
End Sub
End Class
Now hit f5 to debug your application and run it. You will see how you can type update in the box and it will display the current time.See how easy that was? Thank you for reading our tutorial on AJAX Controls, we aim to provide the best AJAX tutorials. Learning AJAX in ASP.NET is easy and we hope you are getting your hands dirty by trying different things and coming up with your own ideas.