Ajax AngularJS ASP.NET Technology

ASP.NET AJAX partial postback in UpdatePanel control

ASP.NET AJAX partial postback in UpdatePanel control

Today, We want to share with you ASP.NET AJAX partial postback in UpdatePanel control.In this post we will show you ASP.NET AJAX partial postback solutions, hear for How to enable partial rendering with the AJAX UpdatePanel we will give you demo and example for implement.In this post, we will learn about All About UpdatePanel partial postback in Asp.Net with an example.

ASP.NET AJAX – What is a Partial Postback?

Updatepanel is used to perform partial postback of the page. UpdatePanel eliminates the need of a refresh of the whole page in each
postback request. This control is located inside Ajax Extensions tabs inside a toolbox.

Also Read :  Learn Angular 5 from Scratch - angular 5 Tutorial

The can have two childtags.

1. ContentTemplate: The content can be any valid tag that you normally put on your page, from literal text to web controls or data contol.
2. Trigger: The Triggers tag allows you to define certain triggers which will make the panel update it’s content.

In the following example,’Update Both’ button cause update of both updatepanel whereas ‘Update’ will update only main updatepanel.
You need to add a ScriptManager tag while using any Ajax contol in asp.net web form application.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UpdatePanelDemo.aspx.cs" Inherits="ValidationControl.UpdatePanelDemo" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>UpdatePanel control in ASP.NET for partial postback</title>
</head>
<body>
     <form id="frmMain" runat="server">
        <asp:ScriptManager ID="smMain" runat="server" />
        <asp:UpdatePanel runat="server" id="upMain" updatemode="Conditional">
        <Triggers>
            <asp:AsyncPostBackTrigger controlid="btnUpdate2" eventname="Click" />
        </Triggers>
            <ContentTemplate>
                <asp:Label runat="server" id="lblDateTimeLabel1" />
                <asp:Button runat="server" id="btnUpdate1" onclick="UpdateButton_Click" text="Update" />               
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel runat="server" id="upSub" updatemode="Conditional">           
            <ContentTemplate>
                <asp:Label runat="server" id="lblDateTimeLabel2" />
                <asp:Button runat="server" id="btnUpdate2" onclick="UpdateButton_Click" text="Update Both" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>
 

CodeBehind

protected void UpdateButton_Click(object sender, EventArgs e)
{
  lblDateTimeLabel1.Text = DateTime.Now.ToString();
  lblDateTimeLabel2.Text = DateTime.Now.ToString();
}

Try running above example, and observe the effect of both buttons. You can notice that first button update only first datestamp whereas second button cause update of both datestamps.

Also Read :  jQuery Mobile Based Slide Swipeable Side Menu

The AsyncPostBackTrigger tag is also easy to understand- it takes only two attributes, the controlid, a reference to the control which can trigger it, and the eventname, which tells which event type will cause the trigger to fire.

Read :

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about ASP.NET AJAX partial postback in UpdatePanel control.I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.