c# - 如何在同一个 .aspx 页面上使用两个更新面板

Question

我在一个页面上有两个更新面板。我想在 different-2 条件下更新这两个条件。但我不知道为什么这没有发生。我已经为两者指定了触发器但没有帮助，下面是我的代码。

请让我知道哪里错了。

实际上，当他们的 selectedindexchange 被触发时，第一个更新面板中有三个下拉列表，然后第二个更新面板的内容也会更新。

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

第二个如下:-

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

Answer 1

首先我想回顾一下 UpdateMode 的用法

• Always面板将更新其内容页面上的每个帖子，它们可以是部分渲染帖子或完整帖子，在这两种情况下面板的内容都会更新

• Conditional面板的内容只有在满足不同的条件时才会更新:

  • 默认情况下，其子对象触发的事件会触发更新，您可以更改此行为设置ChildrenAsTriggers="false"

  • 当您在 Triggers 中声明触发器时节UpdatePanel

  • 当您显式调用 UpdatePanel.Update() 时方法

  • 整页帖子将触发更新

以下代码执行以下操作:

• 每个 UpdatePanel 在其子控件引发事件时更新

• 更新面板 1 名为:up1将仅在其子控件引发事件时更新

• 名为 up2 的 UpdatePanel 2将在其子控件引发事件时更新

• 名为 up2 的 UpdatePanel 2当触发定义的触发器时，也会更新，在本例中，当 DropDownList名为 ddl1OnPanel1在 UpdatePanel 1 上触发其 SelectedIndexChanged

• 名为 up2 的 UpdatePanel 2也将在 DropDownList 时更新名为 ddl2OnPanel1在 UpdatePanel 1 上提高其 SelectedIndexChanged ，因为在代码中它明确调用:this.up2.Update();

我认为调整这段代码，您可以实现您想要的目标，只需将其复制粘贴到新页面并运行即可

检查以下代码(查看显示日期的标签如何根据引发的事件以不同方式受到影响):

代码隐藏

    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>

简单输出

您可以更改 UpdateMode="Always"在 UpdatePanel 2 上，查看不同之处，如果您这样做，此面板将在每个帖子上更新，无论是完整帖子还是来自 UpdatePanel1 的帖子