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

本文关键字：UI 显示 下拉列表 选择 | 更新日期: 2023-09-27 18:21:48

我必须在下拉列表中输入值。

<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表单。当页面第一次启动或调试时，我希望显示这个下拉列表，当用户选择个人或实体时，文本框和web表单的内容应该加载在下面。这怎么可能？

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

您可以使用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;
  }
}

将内容放在Visible设置为false的ASP:Panel中。然后将下拉菜单设置为自动回发=true，并订阅所选列表项更改事件

在这种情况下，将面板设置为visible=true。

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

或者，您可以使用Javascript，将IPostBackEventHandler接口添加到控件/页面，并使用__DoPostBack（ctrlId，'somekey'）来引起回发，然后在IPostBackEvent Handler上的postback事件中将面板设置为Visible=true。

你也可以用css隐藏它，用javascrippot打开它，但这是非常特殊的，用户可以使用网络工具自己打开它，例如破解它。

相关文章：