Hi friends, in this article I will explain about the Update
Panel in AJAX.I already explained in the previous article Ajax Tutorial | Ajax small Example to show date | Ajax in ASP.NET.
The following example will show the use of both childtags.
Update Panel:
It is the most important control in ASP.NET AJAX Package.
It is allowing partial rendering of
the area.
We already used it in the previous article Ajax with example , and in this article, we will go in depth with more aspects of the
control.
The <asp:UpdatePanel> tag has two
childtags.
1. ContentTemplate : The
ContentTemplate tag is required, since it holds the content of the panel like
labels textboxes buttons etc. The content can be anything that you would
normally put on your page, from literal text to web controls.
2. Triggers :The Triggers tag allows you to
define certain triggers which will make the panel update it's content.
The following example will show the use of both childtags.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>UpdatePanel</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel runat="server" id="UpdatePanel" updatemode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger controlid="UpdateButton2" eventname="Click" />
</Triggers>
<ContentTemplate>
<asp:Label runat="server" id="DateTimeLabel1" />
<asp:Button runat="server" id="UpdateButton1" onclick="UpdateButton_Click" text="Update"
/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel runat="server" id="UpdatePanel1" updatemode="Conditional">
<ContentTemplate>
<asp:Label runat="server" id="DateTimeLabel2" />
<asp:Button runat="server" id="UpdateButton2" onclick="UpdateButton_Click" text="Update"
/>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
|
VB.NET Code:
Protected Sub
UpdateButton_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles
UpdateButton1.Click
DateTimeLabel1.Text = DateTime.Now.ToString()
DateTimeLabel2.Text = DateTime.Now.ToString()
End Sub
|
C# Code:
protected
void UpdateButton_Click(object sender, System.EventArgs e)
{
DateTimeLabel1.Text = DateTime.Now.ToString();
DateTimeLabel2.Text = DateTime.Now.ToString();
}
|
If we run this page the output will like below.
If you observer the output,first button only shows the
update of first timestamp.if you click on second button then the output will
changes the both timestamps.Because for button2 we put the trigger.
Happy Reading..........
"If you like my blog or articles, you can appreciate by leaving your comments or Liking my Facebook page Aspdotnet-kishore, following on Google+ Aspdotnet-Kishore, Twitter on AspdotnetKishore, Linked in Aspdotnet-Kishore, stumbling my posts on stumble upon and subscribing on RSSfeed Aspdotnet-Kishore for free updates directly to your Email inbox . Watch my blog for more articles"
No comments:
Post a Comment