通过内容页面上的 DropDownList 更改动态控件答案

【问题标题】：Changing Dynamic Controls via DropDownList on Content Page通过内容页面上的 DropDownList 更改动态控件
【发布时间】：2011-05-05 04:49:46
【问题描述】：

问题：带有向导控件的内容页面，带有 UpdatePanel 和占位符。 UpdatePanel 上方是一个 DropDownList。当用户更改下拉列表中的选择时，我需要在下拉列表下方显示不同的输入控件。当用户在向导控件上单击“下一步”时，我还需要能够从这些动态控件中获取数据。

我知道必须在 OnInit 方法中创建所有动态控件，以便在回发期间从这些控件中获取数据。但是，当触发下拉列表的 SelectedIndexChanged 事件时，将调用 OnInit 方法……然后调用 PageLoad……，最后调用 SelectedIndexChanged 事件的处理程序。 ViewState 直到调用 OnInit 和 PageLoad 方法后才恢复，因此无法知道用户在调用 OnInit 时在列表框中选择了什么......这正是我需要的时候创建动态控件。

那么...你如何解决这个问题？您是否只需使用 JavaScript 编写整个页面或大部分页面？

提前致谢。

【问题讨论】：

标签： asp.net dynamic drop-down-menu updatepanel placeholder

【解决方案1】：

您还可以使用 asp:hiddenfield 并将值设置为您在脑海中创建的 case var。然后在上面运行一个小的 jQuery 脚本来查看

$(document).on("change", "#ddlSelector", setControls);

然后只做一个函数，例如：

function setControls(event) { 
    event.preventDefault();
    var selector = hiddenfield.val();
}

那么任何要显示/隐藏的项目都可以通过获取标签来完成：

$("#elementName").css("display", "inline");

或显示，无隐藏。我在工作中使用了它，因为有时您需要在不触发回发的情况下进行更改，但在他们使用表单时仍会收集数据。

为了代码的强度和安全性，我通常避免使用 jQuery 处理许多事件，但使用 jQuery 有时可以更轻松地操作 DOM 元素。

【讨论】：

【解决方案2】：

对于此类要求，我倾向于使用老式方法。我会在更新面板中编写所有需要的控件，并将其 Visible 属性设置为 false。然后，在回发时读取下拉列表的状态并将适当的控件 Visible 属性设置为 true。这样就没有“动态”控件，并且由于 Visible 属性为 false 的控件不会被渲染，因此在用户看到它们之前不会下载它们。

【讨论】：

谢谢大卫。我以为我已经尝试过了，但它不起作用（我错了）。（对我来说）要记住的一件事是，如果您使用用户控件放入更新面板占位符并且该用户控件具有导致回发的控件，则该用户控件将被隐藏，因为父页面的下拉列表的不会调用事件处理程序，因为它不会导致回发。我通过让我的所有子用户控件公开一个公共事件来解决该问题，当它导致回发通知父页面“取消隐藏”适当的占位符时会触发该事件。