How to Refresh a Set of Controls or DIV without Refreshing other Controls Inside UpdatePanel control in ASP.Net AJAX?
Sometimes, we will have a need to refresh an area or a DIV inside an UpdatePanel for an AJAX postback.
It can be done by including nested UpdatePanel control. Just include a separate an UpdatePanel control for that area or DIV and make the UpdateMode property for parent and nested UpdatePanel to "Conditional".
The below code will demonstrate the same.
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="btnClick1" runat="server" OnClick="btnClick1_Click" Text="Click- Parent UpdatePanel" />
<asp:Label ID="lblTime1" runat="server" Text="Label"></asp:Label>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div>
<asp:Button ID="btnClick2" runat="server" OnClick="btnClick2_Click" Text="Click- Nested UpdatePanel" />
<asp:Label ID="lblTime2" runat="server" Text="Label"></asp:Label>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</asp:UpdatePanel>
CodeBehind
protected void Page_Load(object sender, EventArgs e)
{
lblTime1.Text = "Refreshed on:" + DateTime.Now.ToString();
lblTime2.Text = "Refreshed on:" + DateTime.Now.ToString();
}
protected void btnClick1_Click(object sender, EventArgs e)
{
}
protected void btnClick2_Click(object sender, EventArgs e)
{
}
The above code snippet will display the last refreshed time in the correspoding Label control on respective button click inside the UpdatePanel. We will notice the button (btnClick2) will not refresh the controls in UpdatePanel1. But, If you click the button(btnClick1) in parent UpdatePanel it will also refresh the child UpdatePanel contents.
|