The UpdatePanel control in C# allows partial rendering of a page without refreshing the entire page. When using an UpdatePanel, you can specify one or more triggers that will cause the panel to update. There are two types of triggers available: AsyncPostBackTrigger and PostBackTrigger.
Table of Contents
AsyncPostBackTrigger
AsyncPostBackTrigger is used when you want to perform an asynchronous postback to the server when the trigger control is clicked. This means that only the UpdatePanel and its child controls will be refreshed, and the rest of the page will not be reloaded. This is useful when you want to update a small portion of the page without affecting the rest of the page.
example AsyncPostBackTrigger
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Original Text"></asp:Label>
<br />
<asp:Button ID="Button1" runat="server" Text="Update" OnClick="Button1_Click" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Updated Text";
}
PostBackTrigger
PostBackTrigger is used when you want to perform a full postback to the server when the trigger control is clicked. This means that the entire page will be reloaded, including the UpdatePanel and its child controls. This is useful when you need to perform a file upload, since file uploads cannot be performed using an AJAX request.
Example PostBackTrigger
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Upload" OnClick="Button1_Click" />
<br />
<asp:Label ID="Label1" runat="server" Text="No file uploaded"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="Button1" />
</Triggers>
</asp:UpdatePanel>
protected void Button1_Click(object sender, EventArgs e)
{
if (FileUpload1.HasFile)
{
string filename = Path.GetFileName(FileUpload1.FileName);
FileUpload1.SaveAs(Server.MapPath("~/") + filename);
Label1.Text = "File uploaded successfully";
}
else
{
Label1.Text = "Please select a file to upload";
}
}
example of how to use both AsyncPostBackTrigger and PostBackTrigger:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Original Text"></asp:Label>
<br />
<asp:Button ID="Button1" runat="server" Text="Async Postback" OnClick="Button1_Click" />
<br />
<asp:Button ID="Button2" runat="server" Text="Full Postback" OnClick="Button2_Click" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
<asp:PostBackTrigger ControlID="Button2" />
</Triggers>
</asp:UpdatePanel>