如何在同一个 .aspx 页面上使用两个更新面板 [英] How to work with two update panels on same .aspx page

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

问题描述

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

请让我知道我错在哪里.

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

<asp:UpdatePanel ID="upSearch" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional"><内容模板><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 style="float: left; width: 80px;"><asp:Button ID="btnSearch" runat="server" Text="Search" ValidationGroup="vgSearch"CssClass="bluebtn" UseSubmitBehavior="false" OnClick="btnSearch_Click"/>

<div style="float: left; width: 99%; padding: 5px 0px;">

</内容模板></asp:UpdatePanel>

第二个如下:-

<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional"><内容模板><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:日历></内容模板><触发器><asp:AsyncPostBackTrigger ControlID="btnSearch" EventName="点击"/></触发器></asp:UpdatePanel>

解决方案

首先我想回忆一下UpdateMode

的使用

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

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

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

    • 当您在 UpdatePanel

      • 的 Triggers 部分声明触发器时

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

    • 整页帖子将触发更新

以下代码执行以下操作:

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

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

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

  • 当定义的触发器被触发时，名为 up2 的 UpdatePanel 2 也将被更新，在这种情况下，当名为 ddl1OnPanel1 的 DropDownListUpdatePanel 1 上的 code> 触发其 SelectedIndexChanged

  • 当 UpdatePanel 1 上名为 ddl2OnPanel1 的 DropDownList 引发其 时，名为 up2 的 UpdatePanel 2 也会更新SelectedIndexChanged，因为在代码中它显式调用:this.up2.Update();

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

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

背后的代码

 protected void ddl1OnPanel1_SelectedIndexChanged(object sender, EventArgs e){this.lblMessageOnPanel1.Text = "从 ddl1" + DateTime.Now.ToString();this.calendarOnPanel2.SelectedDate = DateTime.Today.AddDays(1);this.lblMessageOnPanel2.Text = "从 ddl1" + DateTime.Now.ToString();}protected void ddl2OnPanel1_SelectedIndexChanged(object sender, EventArgs e){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 runat="server" ID="scriptManager"/><asp:Button Text="Full Post" runat="server"/><br/><asp:UpdatePanel runat="server" ID="up1" UpdateMode="Conditional"><内容模板><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/>在面板 1 上的每个帖子上:<%:DateTime.Now %></内容模板></asp:UpdatePanel><br/><br/><asp:UpdatePanel runat="server" ID="up2" UpdateMode="Conditional"><内容模板><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:日历><br/><asp:Label ID="lblMessageOnPanel2" runat="server"/><br/>在面板 2 上的每个帖子上:<%:DateTime.Now %></内容模板><触发器><asp:AsyncPostBackTrigger ControlID="ddl1OnPanel1" EventName="SelectedIndexChanged"/></触发器></asp:UpdatePanel>

简单输出

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

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

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆