如何使用相同的.aspx页面上两个更新工作小组 [英] How to work with two update panels on same .aspx page
问题描述
我有一个页面上有两个更新面板。我想在不同的-2的条件来更新他们两个条件。但我不知道这是为什么不会发生。我指定了两个,但没有帮助的触发器,下面是我的code。
请让我知道我错了。
其实有在当他们的selectedindexchange触发那么第二个更新面板的内容也会更新首次更新第三小组的下拉列表。
< ASP:的UpdatePanel ID =upSearch=服务器ChildrenAsTriggers =真的UpdateMode =条件>
<&的ContentTemplate GT;
< DIV的风格=浮动:左;宽度:汽车;> < ASP:DropDownList的ID =ddlLocation=服务器WIDTH =206pxDataTextField =LOCATIONNAME
DataValueField =Locationid的AutoPostBack =真OnSelectedIndexChanged =ddlLocation_SelectedIndexChanged>
< / ASP:DropDownList的> &安培; NBSP;
< ASP:DropDownList的ID =ddlArea=服务器WIDTH =200像素DataTextField =AREANAME
DataValueField =areaID表示的AutoPostBack =真OnSelectedIndexChanged =ddlArea_SelectedIndexChanged>
< / ASP:DropDownList的> &安培; NBSP;
< ASP:DropDownList的ID =ddlRoom=服务器WIDTH =200像素DataTextField =ROOMNAME
DataValueField =Roomid>
< / ASP:DropDownList的>
&安培; NBSP; < / DIV>
< DIV的风格=浮动:左;宽度:80px;>
< ASP:按钮的ID =btnSearch=服务器文本=搜索的ValidationGroup =vgSearch
的CssClass =blueBtn的UseSubmitBehavior =假的OnClick =btnSearch_Click/>
< / DIV>
< DIV的风格=浮动:左;宽度:99%;填充:为5px 0像素;>
< / DIV>
< /&的ContentTemplate GT;
< / ASP:的UpdatePanel>
和第二个是如下: -
< ASP:的UpdatePanel ID =UpdatePanel1=服务器ChildrenAsTriggers =真的UpdateMode =条件>
<&的ContentTemplate GT;
< ASP:日历ID =calSchedule=服务器下一步prevFormat =FullMonthOnDayRender =calSchedule_DayRender
OnVisibleMonthChanged =calSchedule_VisibleMonthChanged>
< DayHeaderStyle的CssClass =dayheaderStyle/>
<接下来prevStyle />
< OtherMonthDayStyle背景色=#FFFFFF/>
< SelectedDayStyle的/>
< TitleStyle的CssClass =titleStyle/>
< TodayDayStyle的背景色=#ffffa0前景色=#6699CC/>
< WeekendDayStyle />
< DayStyle的CssClass =dayStyle/>
< / ASP:日历>
< /&的ContentTemplate GT;
<&触发器GT;
< ASP:AsyncPostBackTrigger控件ID =btnSearch事件名称=点击/>
< /触发器>
< / ASP:的UpdatePanel>
所有我想回顾使用的UpdateMode
-
-
条件
面板的内容才会被更新:-
在默认情况下它的子对象触发将触发更新的事件,你可以改变这种行为设定
ChildrenAsTriggers =FALSE
-
在声明中的
触发器
部分触发的的UpdatePanel
-
在显式调用
UpdatePanel.Update()
法 -
整版的帖子将触发更新
-
当不同的条件满足
以下code执行以下操作:
-
在其子控件引发事件的每个UpdatePanel的更新
-
命名的UpdatePanel的1:
上一条
将被更新的仅时,其子控件引发事件 -
命名在UpdatePanel 2
UP2
时,其子控件引发一个事件将被更新 -
命名在UpdatePanel 2
UP2
也将时定义的触发器被解雇,更新在这种情况下,当的DropDownList
名为ddl1OnPanel1
上的UpdatePanel 1触发其的SelectedIndexChanged
-
名为
UP2
在UpdatePanel 2也将被更新时,的DropDownList
名为ddl2OnPanel1
上的UpdatePanel 1提高其的SelectedIndexChanged
,因为在code将其明确要求:this.up2。更新();
的我认为这个调整code,你可以达到你想要的目的,只是复制粘贴在新页面上并运行它的
检查以下code(请参阅如何显示的日期标签都以不同的方式取决于引发的事件影响):
code
的背后 保护无效ddl1OnPanel1_SelectedIndexChanged(对象发件人,EventArgs的发送)
{
this.lblMessageOnPanel1.Text =从ddl1+ DateTime.Now.ToString();
this.calendarOnPanel2.SelectedDate = DateTime.Today.AddDays(1);
this.lblMessageOnPanel2.Text =从ddl1+ DateTime.Now.ToString();
} 保护无效ddl2OnPanel1_SelectedIndexChanged(对象发件人,EventArgs的发送)
{
this.lblMessageOnPanel1.Text =从DDL2+ DateTime.Now.ToString();
this.calendarOnPanel2.SelectedDate = DateTime.Today.AddDays(2);
this.lblMessageOnPanel2.Text =从DDL2+ DateTime.Now.ToString();
this.up2.Update();
}
ASPX
< ASP:的ScriptManager =服务器ID =ScriptManager的/>
< ASP:按钮文本=全邮报=服务器/>
< BR />
< ASP:的UpdatePanel =服务器ID =上一条的UpdateMode =条件>
<&的ContentTemplate GT;
< ASP:DropDownList的=服务器ID =ddl1OnPanel1的AutoPostBack =真OnSelectedIndexChanged =ddl1OnPanel1_SelectedIndexChanged>
< ASP:ListItem的文本=text1中的/>
< ASP:ListItem的文本=文本2/>
< / ASP:DropDownList的>
< BR />
< ASP:DropDownList的=服务器ID =ddl2OnPanel1的AutoPostBack =真OnSelectedIndexChanged =ddl2OnPanel1_SelectedIndexChanged>
< ASP:ListItem的文本=文字3/>
< ASP:ListItem的文本=文本4/>
< / ASP:DropDownList的>
< BR />
< ASP:标签=服务器ID =lblMessageOnPanel1/>
< BR />
< ASP:按钮的ID =Button1的文本=TEXT=服务器/>
< BR />
上面板1每一个岗位:LT;%:DateTime.Now%GT;
< /&的ContentTemplate GT;
< / ASP:的UpdatePanel> < BR />
< BR />
< ASP:的UpdatePanel =服务器ID =UP 2的UpdateMode =条件>
<&的ContentTemplate GT;
< ASP:日历ID =calendarOnPanel2=服务器>
< DayHeaderStyle的CssClass =dayheaderStyle/>
<接下来prevStyle />
< OtherMonthDayStyle背景色=#FFFFFF/>
< SelectedDayStyle的/>
< TitleStyle的CssClass =titleStyle/>
< TodayDayStyle的背景色=#ffffa0前景色=#6699CC/>
< WeekendDayStyle />
< DayStyle的CssClass =dayStyle/>
< / ASP:日历>
< BR />
< ASP:标签ID =lblMessageOnPanel2=服务器/>
< BR />
在每一个岗位上面板2:<%:DateTime.Now%GT;
< /&的ContentTemplate GT;
<&触发器GT;
< ASP:AsyncPostBackTrigger控件ID =ddl1OnPanel1事件名称=的SelectedIndexChanged/>
< /触发器>
< / ASP:的UpdatePanel>
简单输出
您可以在在UpdatePanel 2修改的UpdateMode =始终
,看出差别,如果你这样做,这个小组将在每一个岗位更新,无论是全帖或职位从UpdatePanel1未来
I have two update panels on a page. And I want to update both of them conditions at different-2 conditions. But I don't know why this is not happening. I have specified triggers for both but not helpful, below is my code.
Please let me know Where I am wrong.
Actually there are three dropdown lists in first update panel when their selectedindexchange is fired then the second update panel's content also updates.
<asp:UpdatePanel ID="upSearch" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
<ContentTemplate>
<div style="float: left; width: auto;">
<asp:DropDownList ID="ddlLocation" runat="server" Width="206px" DataTextField="LocationName"
DataValueField="Locationid" AutoPostBack="true" OnSelectedIndexChanged="ddlLocation_SelectedIndexChanged">
</asp:DropDownList>
<asp:DropDownList ID="ddlArea" runat="server" Width="200px" DataTextField="AreaName"
DataValueField="Areaid" AutoPostBack="true" OnSelectedIndexChanged="ddlArea_SelectedIndexChanged">
</asp:DropDownList>
<asp:DropDownList ID="ddlRoom" runat="server" Width="200px" DataTextField="RoomName"
DataValueField="Roomid">
</asp:DropDownList>
</div>
<div style="float: left; width: 80px;">
<asp:Button ID="btnSearch" runat="server" Text="Search" ValidationGroup="vgSearch"
CssClass="bluebtn" UseSubmitBehavior="false" OnClick="btnSearch_Click" />
</div>
<div style="float: left; width: 99%; padding: 5px 0px;">
</div>
</ContentTemplate>
</asp:UpdatePanel>
And the second one is as follow:-
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
<ContentTemplate>
<asp:Calendar ID="calSchedule" runat="server" NextPrevFormat="FullMonth" OnDayRender="calSchedule_DayRender"
OnVisibleMonthChanged="calSchedule_VisibleMonthChanged">
<DayHeaderStyle CssClass="dayheaderStyle" />
<NextPrevStyle />
<OtherMonthDayStyle BackColor="#ffffff" />
<SelectedDayStyle />
<TitleStyle CssClass="titleStyle" />
<TodayDayStyle BackColor="#ffffa0" ForeColor="#6699cc" />
<WeekendDayStyle />
<DayStyle CssClass="dayStyle" />
</asp:Calendar>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSearch" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
First of all I would like to recall the use of UpdateMode
Always
The panel will update its content on every post on the page, they can be partial rendering posts or full posts, in both cases the content of the panel will be updatedConditional
The content of the panel will only be updated when different conditions are met:By default the events triggered by its child objects will trigger an update, you can change this behavior setting
ChildrenAsTriggers="false"
When you declare a trigger in the
Triggers
section of theUpdatePanel
When you explicitly call the
UpdatePanel.Update()
methodFull page posts will trigger the update
The following code does the following:
Each UpdatePanel is updated when its child controls raise an event
The UpdatePanel 1 named:
up1
will be updated only when its child controls raise an eventThe UpdatePanel 2 named
up2
will be updated when its child controls raise an eventThe UpdatePanel 2 named
up2
will also be updated when the triggers defined are fired, in this case, when theDropDownList
namedddl1OnPanel1
on the UpdatePanel 1 fires itsSelectedIndexChanged
The UpdatePanel 2 named
up2
will also be updated when theDropDownList
namedddl2OnPanel1
on the UpdatePanel 1 raises itsSelectedIndexChanged
, because in code it explicitly calls:this.up2.Update();
I think that tweaking this code, you could achieve your desired goal, just copy paste it on a new page and run it
Check the following code (see how the labels showing the date are affected in different ways depending on the events raised):
Code Behind
protected void ddl1OnPanel1_SelectedIndexChanged(object sender, EventArgs e)
{
this.lblMessageOnPanel1.Text = "From ddl1 " + DateTime.Now.ToString();
this.calendarOnPanel2.SelectedDate = DateTime.Today.AddDays(1);
this.lblMessageOnPanel2.Text = "From ddl1 " + DateTime.Now.ToString();
}
protected void ddl2OnPanel1_SelectedIndexChanged(object sender, EventArgs e)
{
this.lblMessageOnPanel1.Text = "From ddl2 " + DateTime.Now.ToString();
this.calendarOnPanel2.SelectedDate = DateTime.Today.AddDays(2);
this.lblMessageOnPanel2.Text = "From ddl2 " + DateTime.Now.ToString();
this.up2.Update();
}
ASPX
<asp:ScriptManager runat="server" ID="scriptManager" />
<asp:Button Text="Full Post" runat="server" />
<br />
<asp:UpdatePanel runat="server" ID="up1" UpdateMode="Conditional">
<ContentTemplate>
<asp:DropDownList runat="server" ID="ddl1OnPanel1" AutoPostBack="true" OnSelectedIndexChanged="ddl1OnPanel1_SelectedIndexChanged">
<asp:ListItem Text="text1" />
<asp:ListItem Text="text2" />
</asp:DropDownList>
<br />
<asp:DropDownList runat="server" ID="ddl2OnPanel1" AutoPostBack="true" OnSelectedIndexChanged="ddl2OnPanel1_SelectedIndexChanged">
<asp:ListItem Text="text3" />
<asp:ListItem Text="text4" />
</asp:DropDownList>
<br />
<asp:Label runat="server" ID="lblMessageOnPanel1" />
<br />
<asp:Button ID="Button1" Text="text" runat="server" />
<br />
On every post on Panel 1: <%:DateTime.Now %>
</ContentTemplate>
</asp:UpdatePanel>
<br />
<br />
<asp:UpdatePanel runat="server" ID="up2" UpdateMode="Conditional">
<ContentTemplate>
<asp:Calendar ID="calendarOnPanel2" runat="server" >
<DayHeaderStyle CssClass="dayheaderStyle" />
<NextPrevStyle />
<OtherMonthDayStyle BackColor="#ffffff" />
<SelectedDayStyle />
<TitleStyle CssClass="titleStyle" />
<TodayDayStyle BackColor="#ffffa0" ForeColor="#6699cc" />
<WeekendDayStyle />
<DayStyle CssClass="dayStyle" />
</asp:Calendar>
<br />
<asp:Label ID="lblMessageOnPanel2" runat="server" />
<br />
On every post On Panel 2: <%:DateTime.Now %>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddl1OnPanel1" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
Simple Output
You could change the UpdateMode="Always"
on the UpdatePanel 2, to see the difference, if you do it, this panel will be updated on every post, either full posts or posts coming from the UpdatePanel1
这篇关于如何使用相同的.aspx页面上两个更新工作小组的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!