从下拉列表中选择值时显示不同的页面或 UI？答案

【问题标题】：Show different pages or UI when a value is selected from dropdown?从下拉列表中选择值时显示不同的页面或 UI？
【发布时间】：2014-09-15 11:47:56
【问题描述】：

我必须在我的下拉列表中设置值。

<asp:DropDownList ID="DropDownList2" runat="server">
    <asp:ListItem>Select</asp:ListItem>
    <asp:ListItem>Individual Form</asp:ListItem>
    <asp:ListItem>Entity Form</asp:ListItem>
</asp:DropDownList>

个人表单和实体表单是两个具有文本框和下拉列表的网络表单。当页面首次启动或调试时，我希望显示此下拉列表，并且当用户选择个人或实体时，文本框和 Web 表单的内容应在下方加载。这怎么可能？

【问题讨论】：

标签： c# javascript php asp.net

【解决方案1】：

您可以使用 DropDownList 的OnSelectedIndexChanged 事件。

<asp:DropDownList ID="DropDownList2" runat="server" Autopostback=true OnSelectedIndexChanged="DropDownList2_IndexChanged">
    <asp:ListItem Value="0">Select</asp:ListItem>
    <asp:ListItem Value="1">Individual Form</asp:ListItem>
    <asp:ListItem Value="2">Entity Form</asp:ListItem>
</asp:DropDownList>

并为您的 UI 使用两个不同的面板。

<asp:Panel runat="server" ID="Panel1">
 ... Your content here
</asp:Panel>
<asp:Panel runat="server" ID="Panel2">
 ... Your other content here
</asp:Panel>

Now in code behind write OnSelectedIndexChanged event

protected void DropDownList2_IndexChanged(object sender,EventArgs e)
{
  //Now check value of dropdown list and show or hide panel according to it.
  if(DropDownList2.SelectedValue=="1")
  {
    Panel1.Visible=true;
    Panel2.Visible=false;
  }
  else if(DropDownList2.SelectedValue=="2")
  {
    Panel1.Visible=false;
    Panel2.Visible=true;
  }
}

【讨论】：

【解决方案2】：

将内容置于 ASP:Panel 中，并将 Visible 设置为 false。然后将下拉菜单设置为 Autopostback=true 并订阅选中的列表项更改事件，

在该事件中，将面板设置为 visible = true。

如果您需要 ajax 支持，请将所有内容放在 ASP:UpdatePanel 中。

或者，您可以使用 Javascript 并将 IPostBackEventHandler 接口添加到您的控件/页面并使用 __DoPostBack(ctrlId, 'somekey') 来导致回发，然后在 IPostBackEventHandler 上的 PostBack 事件中将面板设置为 Visible = true。

您也可以使用 css 隐藏它并使用 javascripot 将其打开，但这将是肤浅的，用户可以使用网络工具自行打开它，例如破解它。

【讨论】：

谢谢你，你有任何我可以看到的工作示例或任何其他在线示例（如果可用）？