Tuesday, 8 May 2012

Update Panel in AJAX | AJAX Tutorial | Example for Update Panel | Code for Update Panel in AJAX

                               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.
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

© 2012-2014 Aspdotnet-Kishore.blogspot.com. All Rights Reserved.
The content is copyrighted to Kishore and may not be reproduced on other websites without permission from the owner.