如何使用相同的.aspx页面上两个更新工作小组 [英] How to work with two update panels on same .aspx page

查看:213
本文介绍了如何使用相同的.aspx页面上两个更新工作小组的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个页面上有两个更新面板。我想在不同的-2的条件来更新他们两个条件。但我不知道这是为什么不会发生。我指定了两个,但没有帮助的触发器,下面是我的code。

请让我知道我错了。

其实有在当他们的selectedindexchange触发那么第二个更新面板的内容也会更新首次更新第三小组的下拉列表。

 < ASP:的UpdatePanel ID =upSearch=服务器ChildrenAsTriggers =真的UpdateMode =条件>
                    <&的ContentTemplate GT;
                        < D​​IV的风格=浮动:左;宽度:汽车;>                            < 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>
                        < D​​IV的风格=浮动:左;宽度:80px;>
                            < ASP:按钮的ID =btnSearch=服务器文本=搜索的ValidationGroup =vgSearch
                                的CssClass =blueBtn的UseSubmitBehavior =假的OnClick =btnSearch_Click/>
                        < / DIV>
                        < D​​IV的风格=浮动:左;宽度: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>
                        < D​​ayHeaderStyle的CssClass =dayheaderStyle/>
                        <接下来prevStyle />
                        < OtherMonthDayStyle背景色=#FFFFFF/>
                        < SelectedDayStyle的/>
                        < TitleStyle的CssClass =titleStyle/>
                        < TodayDayStyle的背景色=#ffffa0前景色=#6699CC/>
                        < WeekendDayStyle />
                        < D​​ayStyle的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

的背后

 保护无效ddl1​​OnPanel1_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=服务器>
                < D​​ayHeaderStyle的CssClass =dayheaderStyle/>
                <接下来prevStyle />
                < OtherMonthDayStyle背景色=#FFFFFF/>
                < SelectedDayStyle的/>
                < TitleStyle的CssClass =titleStyle/>
                < TodayDayStyle的背景色=#ffffa0前景色=#6699CC/>
                < WeekendDayStyle />
                < D​​ayStyle的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>

                            &nbsp;
                            <asp:DropDownList ID="ddlArea" runat="server" Width="200px" DataTextField="AreaName"
                                DataValueField="Areaid" AutoPostBack="true" OnSelectedIndexChanged="ddlArea_SelectedIndexChanged">
                            </asp:DropDownList>

                            &nbsp;
                            <asp:DropDownList ID="ddlRoom" runat="server" Width="200px" DataTextField="RoomName"
                                DataValueField="Roomid">
                            </asp:DropDownList>
                            &nbsp;

                        </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 updated

  • Conditional 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 the UpdatePanel

    • When you explicitly call the UpdatePanel.Update() method

    • Full 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 event

  • The UpdatePanel 2 named up2 will be updated when its child controls raise an event

  • The UpdatePanel 2 named up2 will also be updated when the triggers defined are fired, in this case, when the DropDownList named ddl1OnPanel1 on the UpdatePanel 1 fires its SelectedIndexChanged

  • The UpdatePanel 2 named up2 will also be updated when the DropDownList named ddl2OnPanel1 on the UpdatePanel 1 raises its SelectedIndexChanged, 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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆