Ajax using nested UpdatePanel

Posted by Karthik2010_Mca under Interview Questions on 4/20/2013 | Points: 10 | Views : 2181 | Status : [Member] | Replies : 1
Hi,
Please let me know anyone the below mentioned scenarios.

<asp:UpdatePanel ID="Upd1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="Btn1" runat="server" Text="Refresh All" onclick="Btn1_Click"/>
<asp:Label ID="lblTime1" runat="server"></asp:Label>
<asp:UpdatePanel ID="Upd2" runat="server" >
<ContentTemplate>
<asp:Button ID="Btn2" runat="server" Text="Refresh One Time" onclick="Button1_Click" />
<asp:Label ID="lblTime2" runat="server"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</asp:UpdatePanel>

protected void Btn1_Click(object sender, EventArgs e)
{
lblTime1.Text = "Refreshed on :" + DateTime.Now.ToString();
lblTime2.Text = "Refreshed on :" + DateTime.Now.ToString();
}
protected void Btn2_Click(object sender, EventArgs e)
{
lblTime1.Text = "Refreshed on :" + DateTime.Now.ToString();
lblTime2.Text = "Refreshed on :" + DateTime.Now.ToString();
}

The above code it is working fine,
When I click the Btn1, Refreshing Both label(lblTime1,lblTime2) time. Also
When I click the Btn2, Refreshing 2nd label(lblTime2) time.

Note : When I click the Btn2, I want update and refresh only 1st label(lblTime1) time.
- How can I change the code. Please help me.

Kindly let me know what is the purpose of UpdatePanel Mode as set Conditional, Always and the property of ChildrenAsTriggers as set true.

Thanks

Karthik


Responses

Posted by: Raj.Trivedi on: 4/20/2013 [Member] [MVP] Starter | Points: 25

Up
0
Down
Hello Karthik

Update Panel is used to prevent complete post back of the web page.

It does a Partial Postback to the page

Suppose if you want certain page to be refreshed then you can avoid reloading the page instead just refresh that portion

For more details check

http://www.mindfiresolutions.com/UpdatePanel-in-ASPNET-and-its-different-modes-546.php

Here is the code that you have to change

No change in the code behind only add UpdateMode = Conditional in the Second Update Panel

Note when you are using Update panel avoid using Nested Update Panel....that will be better.

HTML Mark up

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="Toolkitscriptmanager1" runat="server">
</asp:ToolkitScriptManager>
<asp:UpdatePanel ID="Upd1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="lblTime1" runat="server" Text="Label"></asp:Label> <br />
<asp:Button ID = "btn1" runat="server" Text="Refresh All" onclick="btn1_Click" />
<asp:UpdatePanel ID="Upd2" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:Label ID="lblTime2" runat="server" Text="Label"></asp:Label><br />
<asp:Button ID="btn2" runat ="server" Text="Refresh Label 2" onclick="btn2_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>


Code behind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}

protected void btn1_Click(object sender, EventArgs e)
{
lblTime1.Text = "Refreshed on :" + DateTime.Now.ToString();
lblTime2.Text = "Refreshed on :" + DateTime.Now.ToString();
}
protected void btn2_Click(object sender, EventArgs e)
{
lblTime1.Text = "Refreshed on :" + DateTime.Now.ToString();
lblTime2.Text = "Refreshed on :" + DateTime.Now.ToString();
}
}

The change is becuase the Second Button in the Second Update Panel is causing the the Post back and in that the child control is Label2

Regard's
Raj.Trivedi
"Sharing is Caring"
Please mark as answer if your Query is resolved

Karthik2010_Mca, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response