In this article we will learn how to use
updatePanel control in ASP.NET Ajax.
UpdatePanel Control
UpdatePanel control is used with ScriptManager
control to enable partial rendering of the page. You must be aware that partial
page rendering reduces the need for synchronous postbacks and complete page
updates when a part of the page need to be updated.
ContentTemplate
ContentTemplate tag is used inside the
updatepanel and all the contents within the <contentTemplate> tag alone will be
updated during the partial page update.
Properties
Figure 1.
Triggers - A collection of triggers that
can be cause the UpdatePanel to be updated.
UpdateMode - Indicates weather the
UpdatePanel will refresh on every asynchronous postback or only as the result of
specific action.
ClientIDMode -Indicates how the client
id should be generated for the control.
For example:
Drag a Updatepanel control, ScriptManager
control, one button control, and a label control from the toolbox on the form.
Figure 2.
Now when we click on the button, then we will
see the label get a new number each time. Notice the wonderful absence of a
blinking window and a running status bar.
Now click on the source button from design
window.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<br />
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate >
<asp:Button ID="Button1" runat="server" Text="Update" />
<br />
<br />
<br />
<br />
<asp:Label ID="Label1" runat="server" Text="[Label]"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Now double click on the button and add the following code.
Protected Sub Button1_Click(ByVal
sender As Object,
ByVal e As EventArgs) Handles
Button1.Click
Label1.Text = "Random Number : " &
New Random().Next().ToString()
End Sub
Now save and run the application.
Figure 3.
The above figure displays when we click on the button repeatedly the page will
not refresh and label generates different random number.