如何让UpdatePanel仅响应btn_search点击更新,而非dl_past选择事件?
问题原因
你的UpdatePanel1虽然设置了UpdateMode="Conditional",但默认属性ChildrenAsTriggers="true",这意味着UpdatePanel内部的任何控件触发回发时,都会自动触发UpdatePanel更新。而dl_past设置了AutoPostBack="true",所以它的SelectedIndexChanged事件会触发UpdatePanel更新。
解决方案
方案一:禁用内部控件自动触发UpdatePanel更新
直接设置UpdatePanel的ChildrenAsTriggers="false",这样只有你指定的AsyncPostBackTrigger(即btn_search的点击事件)才会触发UpdatePanel更新。
修改后的代码:
<asp:UpdatePanel ID="UpdatePanel1" class="card" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false"> <ContentTemplate> <div class="card-header"> <div class="row align-items-center"> <div class="col-md"> Game Type <asp:DropDownList> <!-- some items --> </asp:DropDownList> </div> <div class="col-md"> Past Days <asp:DropDownList ID="dl_past" title="choose past" CssClass="form-control" runat="server" OnSelectedIndexChanged="dl_past_SelectedIndexChanged" AutoPostBack="true"> <asp:ListItem Text="Today" Value="0"></asp:ListItem> <asp:ListItem Text="Yesterday" Value="1"></asp:ListItem> <asp:ListItem Text="Last 7 days" Value="7" Selected="True"></asp:ListItem> <asp:ListItem Text="Last 10 days" Value="10"></asp:ListItem> <asp:ListItem Text="Last 30 days" Value="30"></asp:ListItem> <asp:ListItem Text="Custom Date" Value="custom"></asp:ListItem> </asp:DropDownList> </div> <div class="col" id="div_dates1" runat="server"> From Date <asp:TextBox ID="txt_fromdate" title="From Date" runat="server" TextMode="Date" CssClass="form-control"></asp:TextBox> </div> <div class="col" id="div_dates2" runat="server"> To Date <asp:TextBox ID="txt_todate" title="To date" runat="server" TextMode="Date" CssClass="form-control"></asp:TextBox> </div> <div class="col-md text-center"> <asp:LinkButton ID="btn_search" runat="server" OnClick="btn_search_Click" CssClass="btn btn-info">Search</asp:LinkButton> <a class="btn btn-info" href="">Reset</a> </div> </div> </div> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="btn_search" EventName="Click" /> </Triggers> </asp:UpdatePanel>
注意:如果你的
dl_past_SelectedIndexChanged事件需要在服务器端修改UpdatePanel内的控件(比如显示/隐藏日期输入框),这些修改不会在页面上生效,因为UpdatePanel不会更新。这种情况下建议用客户端JS处理显示/隐藏,或者参考方案三。
方案二:将下拉列表移出UpdatePanel
如果不需要在dl_past的事件中操作UpdatePanel内的控件,直接把它移到UpdatePanel外面,这样它的回发不会影响UpdatePanel1:
<div class="col-md"> Past Days <asp:DropDownList ID="dl_past" title="choose past" CssClass="form-control" runat="server" OnSelectedIndexChanged="dl_past_SelectedIndexChanged" AutoPostBack="true"> <asp:ListItem Text="Today" Value="0"></asp:ListItem> <asp:ListItem Text="Yesterday" Value="1"></asp:ListItem> <asp:ListItem Text="Last 7 days" Value="7" Selected="True"></asp:ListItem> <asp:ListItem Text="Last 10 days" Value="10"></asp:ListItem> <asp:ListItem Text="Last 30 days" Value="30"></asp:ListItem> <asp:ListItem Text="Custom Date" Value="custom"></asp:ListItem> </asp:DropDownList> </div> <asp:UpdatePanel ID="UpdatePanel1" class="card" runat="server" UpdateMode="Conditional"> <ContentTemplate> <!-- 其他内容(不含dl_past) --> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="btn_search" EventName="Click" /> </Triggers> </asp:UpdatePanel>
方案三:拆分UpdatePanel实现局部更新
如果需要在dl_past选择时更新日期输入框的显示状态,同时保持搜索按钮只更新主内容,可将日期输入框放到独立的UpdatePanel中:
<asp:UpdatePanel ID="UpdatePanel1" class="card" runat="server" UpdateMode="Conditional"> <ContentTemplate> <div class="card-header"> <div class="row align-items-center"> <div class="col-md"> Game Type <asp:DropDownList> <!-- some items --> </asp:DropDownList> </div> <div class="col-md"> Past Days <asp:DropDownList ID="dl_past" title="choose past" CssClass="form-control" runat="server" OnSelectedIndexChanged="dl_past_SelectedIndexChanged" AutoPostBack="true"> <!-- 列表项不变 --> </asp:DropDownList> </div> <!-- 日期输入框放到独立UpdatePanel --> <asp:UpdatePanel ID="UpdatePanel_Dates" runat="server" UpdateMode="Conditional"> <ContentTemplate> <div class="col" id="div_dates1" runat="server"> From Date <asp:TextBox ID="txt_fromdate" title="From Date" runat="server" TextMode="Date" CssClass="form-control"></asp:TextBox> </div> <div class="col" id="div_dates2" runat="server"> To Date <asp:TextBox ID="txt_todate" title="To date" runat="server" TextMode="Date" CssClass="form-control"></asp:TextBox> </div> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="dl_past" EventName="SelectedIndexChanged" /> </Triggers> </asp:UpdatePanel> <div class="col-md text-center"> <asp:LinkButton ID="btn_search" runat="server" OnClick="btn_search_Click" CssClass="btn btn-info">Search</asp:LinkButton> <a class="btn btn-info" href="">Reset</a> </div> </div> </div> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="btn_search" EventName="Click" /> </Triggers> </asp:UpdatePanel>
内容的提问来源于stack exchange,提问作者haxkd
相关产品推荐
相关产品推荐

