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

How to work with two update panels on same .aspx page

提问by Ram

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.

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

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.

实际上，当它们的 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>

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>

采纳答案by Jupaol

First of all I would like to recall the use of UpdateMode

首先我想回忆一下使用 UpdateMode

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

• ConditionalThe 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 Triggerssection of the UpdatePanel

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

  • Full page posts will trigger the update

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

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

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

  • 当您Triggers在UpdatePanel

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

  • 整页帖子将触发更新

The following code does the following:

以下代码执行以下操作：

• Each UpdatePanel is updated when its child controls raise an event

• The UpdatePanel 1 named: up1will be updated onlywhen its child controls raise an event

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

• The UpdatePanel 2 named up2will also be updated when the triggers defined are fired, in this case, when the DropDownListnamed ddl1OnPanel1on the UpdatePanel 1 fires its SelectedIndexChanged

• The UpdatePanel 2 named up2will also be updated when the DropDownListnamed ddl2OnPanel1on the UpdatePanel 1 raises its SelectedIndexChanged, because in code it explicitly calls: this.up2.Update();

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

• UpdatePanel 1 命名为：仅当其子控件引发事件时up1才会更新

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

• up2当定义的触发器被触发时，命名的 UpdatePanel 2也将被更新，在这种情况下，当UpdatePanel 1 上的DropDownList命名ddl1OnPanel1触发它的SelectedIndexChanged

• up2当UpdatePanel 1 上的DropDownListnamedddl2OnPanel1引发其时，命名的 UpdatePanel 2也将更新SelectedIndexChanged，因为在代码中它显式调用：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

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

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

回答by Rakesh_HBK

If you are using nested update panels refer below sample code:

如果您使用嵌套更新面板，请参考以下示例代码：

<asp:UpdatePanel id="UpdatePanel1" UpdateMode="Conditional" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>Parent UpdatePanel</legend>
                Last refresh <%=DateTime.Now.ToString() %> <br />
                <asp:Button ID="Button1" runat="server" Text="Refresh Outer Panel" />
                <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                    <ContentTemplate>
                        <fieldset>
                        <legend>Nested UpdatePanel</legend>
                         Last refresh <%=DateTime.Now.ToString() %> <br />
                        <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
                        </fieldset>
                    </ContentTemplate>
                </asp:UpdatePanel>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>

If not using nested update panels then remove "UpdateMode" conditions from both Updatepanels of your code.

如果不使用嵌套更新面板，则从代码的两个更新面板中删除“UpdateMode”条件。

回答by JoonasL

Remove the Autopostback="True" from the DropdownLists if you want an asyncpostback to happen. Also, what exactly is wrong at the moment? The updatepanels don't update at all?

如果您希望发生异步回发，请从 DropdownLists 中删除 Autopostback="True"。另外，目前到底出了什么问题？更新面板根本不更新？

EDIT. Also remove childrenAsTriggers as it is not needed at this occasion

编辑。还要删除 childrenAsTriggers，因为此时不需要它

回答by Markteq Developer

I used this successfully for 4 updatepanel.

我成功地将它用于 4 个更新面板。

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnableScriptGlobalization="true" CombineScripts="false" ScriptMode="Release">
</asp:ToolkitScriptManager>