能否用UpdateProgress刷新整页?如何初始化UpdatePanel外控件?
解决方案:异步回发下修改UpdatePanel外控件及内部控件初始化
首先明确:默认情况下,AsyncPostBackTrigger只会触发关联UpdatePanel的局部更新,UpdatePanel外的控件不会在异步回发后同步服务器端的修改。不过不用全页UpdatePanel也能解决这个问题,下面分场景给出具体方案:
一、修改UpdatePanel外的控件(如BankDdl、FamilyDdl等)
方法1:新增UpdatePanel包裹外部需要修改的控件
这是最直接的服务器端解决方案,把搜索筛选区域(包含所有DropDownList、KeywordsTbx等)放到另一个UpdatePanel中,并添加对应的AsyncPostBackTrigger关联重置按钮:
修改后的ASPX代码片段:
<asp:ScriptManager runat="server" ID="ScriptManager"></asp:ScriptManager> <asp:Panel runat="server" CssClass="panel-page-title">Création de demande</asp:Panel> <!-- 新增的UpdatePanel包裹搜索筛选区域 --> <asp:UpdatePanel runat="server" ID="SearchFiltersUpnl" UpdateMode="Conditional"> <ContentTemplate> <asp:Panel runat="server" CssClass="panel-primary"> <asp:Panel runat="server" CssClass="panel-heading">Configuration de la recherche</asp:Panel> <asp:Panel runat="server" CssClass="panel-body"> <asp:Table runat="server"> <!-- 原有的所有TableRow(BankRow、FamilyRow等) --> </asp:Table> <br /> <asp:Button runat="server" ID="ResearchBtn" Text="Rechercher" OnClick="ResearchBtn_Click" /> <asp:Button runat="server" ID="ReinitializeBtn" Text="Réinitialiser" OnClick="ReinitializeBtn_Click" /> </asp:Panel> </asp:Panel> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="ReinitializeBtn" EventName="Click" /> <asp:AsyncPostBackTrigger ControlID="ResearchBtn" EventName="Click" /> </Triggers> </asp:UpdatePanel> <br /> <!-- 原有的ResultsUpnl保持不变 --> <asp:UpdatePanel runat="server" ID="ResultsUpnl" ChildrenAsTriggers="true" UpdateMode="Conditional"> <!-- ... 原有内容 ... --> </asp:UpdatePanel>
点击重置按钮时,SearchFiltersUpnl和ResultsUpnl会同时触发异步更新,你在HandleReinitialization中对外部控件的修改(比如重置DropDownList选项、清空TextBox)会自动同步到前端。
方法2:用JavaScript在异步回发完成后修改外部控件
如果不想添加额外的UpdatePanel,可以利用ScriptManager的EndRequest事件,在后台注册脚本直接操作DOM:
在HandleReinitialization方法末尾添加以下代码:
// 注册重置外部控件的脚本 ScriptManager.RegisterStartupScript(this, GetType(), "ResetExternalControls", $@" // 重置各DropDownList到默认选项 document.getElementById('{BankDdl.ClientID}').selectedIndex = 0; document.getElementById('{FamilyDdl.ClientID}').selectedIndex = 0; document.getElementById('{MotiveDdl.ClientID}').selectedIndex = 0; document.getElementById('{SubmotiveDdl.ClientID}').selectedIndex = 0; // 清空关键词输入框 document.getElementById('{KeywordsTbx.ClientID}').value = ''; ", true);
这段脚本会在异步回发完成后执行,直接修改UpdatePanel外的控件,无需额外服务器端更新。
二、初始化UpdatePanel内的控件(DropDownList、TextBox、Repeater)
你现有的HandleReinitialization方法逻辑已经正确,只需注意几个细节确保生效:
- 确保UpdatePanel触发更新:
ResultsUpnl已设置ChildrenAsTriggers="true",且Triggers中添加了ReinitializeBtn的AsyncPostBackTrigger,点击按钮时UpdatePanel会自动更新,后台修改会同步到前端。 - DropDownList重置逻辑:确认
LoadFamilies(true)、LoadMotives(false)等方法会清空原有选项并绑定默认值(比如添加空选项或默认选项)。 - Repeater清空:
ResultsRpt.DataSource = null; ResultsRpt.DataBind();是正确的清空方式,会移除所有列表项。 - 控件ID大小写匹配:注意后台代码中控件变量的大小写(比如前台是
FamilyDdl,后台不要写成familyDdl),避免找不到控件的错误。
最终优化后的HandleReinitialization示例
private void HandleReinitialization() { // 重置UpdatePanel内的提示文本 this.ResultsLb.Text = DemandCreationConstants.ResearchDefaultText; // 重置筛选值变量 this.familyDdlSelectedValue = string.Empty; this.motiveDdlSelectedValue = string.Empty; this.submotiveDdlSelectedValue = string.Empty; // 重置DropDownList(确保Load方法会清空并绑定默认选项) this.LoadFamilies(true); this.LoadMotives(false); this.LoadSubmotives(false); // 清空结果列表 this.ResultsRpt.DataSource = null; this.ResultsRpt.DataBind(); // 重置UpdatePanel内的隐藏域和关键词输入框 this.KeywordsSearchHfi.Value = string.Empty; this.KeywordsTbx.Text = string.Empty; // 若使用方法2,添加脚本注册代码 ScriptManager.RegisterStartupScript(this, GetType(), "ResetExternalControls", $@" document.getElementById('{BankDdl.ClientID}').selectedIndex = 0; document.getElementById('{FamilyDdl.ClientID}').selectedIndex = 0; document.getElementById('{MotiveDdl.ClientID}').selectedIndex = 0; document.getElementById('{SubmotiveDdl.ClientID}').selectedIndex = 0; ", true); LogServiceInstance.Debug("L'utilisateur " + UserSession.UserLogOn + " a réinitialisé la recherche."); }
内容的提问来源于stack exchange,提问作者Valentin DS
相关产品推荐
相关产品推荐

