How to use UpdatePanel Control in ASP.NET using VB.NET

In this article you will learn that how you can use UpdatePanel control.
  • 6156
 

Introduction
 
The UpdatePanel control is probably the most important control in the ASP.NET AJAX package. It will AJAX'ify control contained within it allowing partial rendering of the area. The <asp:UpdatePanel> has two child tags- the ContentTemplate and the Triggers tags. The ContentTemplate tag is required. Since it hold the content of the panel. The content can be anything that you would normally put on your page from literal text to Web controls. The Trigger tag allow you to define certain triggers which will make the panel Update its content. Here we are discussing an example in which you will see the first Button only updates the First DateStamp while the second Button Updates the both DateStamp. It is so because we have set the panels update conditionally, which means that their content is only updated if something insides them causes a PostBack, or if one of the defined Triggers are fired.

Getting Started

  • Simply Create a new ASP.NET web application.
  • Drag the Label, Button, UpdatePanel, ScriptManager control on your page. Your page will look like below.

    updatepanel1.gif
     
  • You can also add the controls manually by the below code.

    <%@ Page Title="Home Page" Language="vb"  AutoEventWireup="false"
        CodeBehind="Default.aspx.vb" Inherits="UpdatePanel._Default" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <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>
     
  • Then attach the below code in code behind file.

       
    Protected Sub UpdateButton_Click(ByVal sender As Object, ByVal e As EventArgs)
            DateTimeLabel1.Text = DateTime.Now.ToString()
            DateTimeLabel2.Text = DateTime.Now.ToString()
        End Sub

     
  • Now run your application.

Output

updatepanel2.gif

updatepanel3.gif

updatepanel4.gif

updatepanel5.gif

updatepanel6.gif
 
Summary
In this article you learned that how to use the UpdatePanel control.

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.