Updating partial page using Asp.net AJAX C# VB.Net

In my previous article i have described “How to use Asp.net Ajax UpdatePanel“. In this article i will explore the UpdatePanel in more detail. Why we use AJAX UpdatePanel? By using Ajax UpdatePanel we can refresh only the UpdatePanel portion of the page instead of refreshing whole page or flickering whole page. UpdatePanel control has two child elements. The mostly used element is the ContentTemplate, which is the container of all UpdatePanel elements like TextBox, DropdownList, Button etc. The another one is Triggers element.

Basics of Triggers element:
Understanding the Triggers element is most important. For a complex aspx page we need to add more than one UpdatePanel section as well as need to keep some more server side controls outside the UpdatePanels. From the basic, we knew that if we click a button inside an UpdatePanel then only this UpdatePanel portion updated without refreshing the whole page. Now let’s say an aspx page has two UpdatePanels and we want to update only a specific UpdatePanel from a Button out side the UpdatePanels. In general this Button click event will refresh all UpdatePanel Contents. There is a UpdatePanel property named “UpdateMode”. Which has two values: “Always” & “Conditional”. The default value is “Always”. That’s why any event outside the UpdatePanel can modify the all UpdatePanel contents. To prevent update set the value to “Conditional”. So now we know that how we can prevent update of UpdatePanel contents from outside events. Now if we want to update a specific set of UpdatePanel then we need to set all UpdatePanels UpdateMode to “Conditional” as well as need to add “Triggers” element on those UpdatePanels we want to update. The default syntax of a “Triggers” element is:

<Triggers><asp:AsyncPostBackTrigger ControlID="Button1_ext" EventName="Click" /></Triggers>

Here ControlID denotes, which outside control can update this UpdatePanel & EventName denotes the corresponding event name.

Let’s move to an Example:
Add two UpdatePanels in your page. ID’s are UpdatePanel1 & UpdatePanel2. Add two Button controls outside the UpdatePanels. Each UpdatePanel contains a Label & a Button control. If we click one of the UpdatePanel Button then the corresponding UpdatePanel Label will show current Date & Time. Add Triggers event in UpdatePanel1 & UpdatePanel2 and point them to Button1 & Button2 respectively. So if we click on Button1 then only UpdatePanel1 contents will be updated. If we click on Button2 then only UpdatePanel2 contents will be updated.

Prepare the MarkUP like below:

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

    <div style="background-color:Silver;">
        <b>UPADTE PANEL 1:</b>
        <hr />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Label runat="server" ID="lbl1"></asp:Label>
                <br /><br />
                <asp:Button runat="server" ID="Button1" Text="Async PostBack 1"
                onclick="Button1_Click" />
            </ContentTemplate>
        
            <Triggers><asp:AsyncPostBackTrigger ControlID="Button3" EventName="Click" /></Triggers>
        </asp:UpdatePanel>
    </div>

    <br />
    
    <asp:Button runat="server" ID="Button3" Text="Outside Button Will Update UpdatePanel1 Content"
    onclick="Button3_Click" />

    <br />
    <br />
    <br />
    
    <div style="background-color:Silver;">
        <b>UPADTE PANEL 2:</b>
        <hr />
        <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
            <asp:Label runat="server" ID="lbl2"></asp:Label>
            <br /><br />
            <asp:Button runat="server" ID="Button2" Text="Async PostBack 2"
            onclick="Button2_Click" />
            </ContentTemplate>

            <Triggers><asp:AsyncPostBackTrigger ControlID="Button4" EventName="Click" /></Triggers>
        </asp:UpdatePanel>
    </div>
    <br />

    <asp:Button runat="server" ID="Button4" Text="Outside Button Will Update UpdatePanel1 Content"
    onclick="Button4_Click" />

Now Find the Server Side Code from Below:
C# Code:

    protected void Button1_Click(object sender, EventArgs e)
    {
        lbl1.Text = "Current Time Is: " + DateTime.Now;
    }

    protected void Button2_Click(object sender, EventArgs e)
    {
        lbl2.Text = "Current Time Is: " + DateTime.Now;
    }

    protected void Button3_Click(object sender, EventArgs e)
    {
        // Trying to update both label of UpdatePanel1 & UpdatePanel2
        lbl1.Text = "Current Time Is: " + DateTime.Now;
        lbl2.Text = "Current Time Is: " + DateTime.Now;
    }

    protected void Button4_Click(object sender, EventArgs e)
    {
        // Trying to update both label of UpdatePanel1 & UpdatePanel2
        lbl1.Text = "Current Time Is: " + DateTime.Now;
        lbl2.Text = "Current Time Is: " + DateTime.Now;
    }

VB.Net Code:

    Protected Sub Button1_Click(sender As Object, e As EventArgs)
        lbl1.Text = "Current Time Is: " + DateTime.Now
    End Sub
    Protected Sub Button2_Click(sender As Object, e As EventArgs)
        lbl2.Text = "Current Time Is: " + DateTime.Now
    End Sub
    Protected Sub Button3_Click(sender As Object, e As EventArgs)
        'Trying to update both label of UpdatePanel1 & UpdatePanel2
        lbl1.Text = "Current Time Is: " + DateTime.Now
        lbl2.Text = "Current Time Is: " + DateTime.Now
    End Sub
    Protected Sub Button4_Click(sender As Object, e As EventArgs)
        'Trying to update both label of UpdatePanel1 & UpdatePanel2
        lbl1.Text = "Current Time Is: " + DateTime.Now
        lbl2.Text = "Current Time Is: " + DateTime.Now
    End Sub

Now check the Output:
Ajax_Partial_Update

Experiment the sourcecode provided below to learn AJAX:
Download Code Example C#        Download Code Example VB.Net

Posted in .Net, Ajax, Asp.net, C#, VB.Net

Leave a Reply

Your email address will not be published. Required fields are marked *

AlphaOmega Captcha Classica  –  Enter Security Code
     
 

*