HTML Select 控件的服务器事件

Question

如何为 HTML Select 控件添加服务器事件？

HTML 代码是这样的：

<div class="ui-widget">
    <select id="Select1" runat="server">
        <option>Select one...</option>
        <option>ActionScript</option>
        <option>AppleScript</option>
        <option>Asp</option>
        <option>BASIC</option>
    </select>
</div>

C#代码是这样的：

public void Select1_SomethingChange(object sender, EventArgs e)
{
    //random code
}

现在我知道它不起作用，HTML 的第二行需要某种属性。我已经尝试了唯一能找到的 2 个，即下面这两个

<select id="Select1" runat="server" onServerChanged="Select1_SomethingChange">
<select id="Select1" runat="server" onSelectedIndexChanged="Select1_SomethingChange">    

问题是第一个选项事件永远不会触发，而第二个选项不存在。请在这里帮助我，欢迎任何帮助。

Answer 1

2013 年的答案相当保守。 select 元素具有 OnChange 事件，请参阅：this MS doc

代码隐藏中的事件处理程序仅在发布事件之后调用。对于 Asp 控件，您添加 AutoPostBack 属性，否则您只需调用 __doPostBack() javascript 方法。

完整示例：

<select id="select_clients" runat="server" 
   OnServerChange="SelectClients_Change" onchange="__doPostBack()">
</select>

代码隐藏：

using System.Web.UI.HtmlControls;//HtmlSelect

protected void SelectClients_Change(object sender, EventArgs e)
{
    HtmlSelect HS = sender as HtmlSelect;
    ListItem SelectedItem = HS.Items[HS.SelectedIndex];
}

注意：我在 Page_Load 中动态添加的选项是：

select_clients.Items.Add(new ListItem("...name...", "...value...")

为什么使用原始 html 元素和 __doPostBack 调用而不是更高级别的 Asp.Net 控件？好吧，有时这很方便，例如结合 Bootstrap 框架。

Answer 2

当您将runat="server" 添加到其他正常的HTML 元素时，它会在服务器端代码中变成HtmlControl。其中doesn't expose a lot of events。为了获得更丰富的服务器端事件，您需要使用 ASP.NET 控件。在这种情况下，这将是 DropDownList，has the events you're looking for。

类似这样的：

<div class="ui-widget">
    <asp:DropDownList id="Select1" OnSelectedIndexChanged="Select1_SomethingChange" runat="server">
        <asp:ListItem Selected="True" Value="White"> White </asp:ListItem>
        <asp:ListItem Value="Select one...">Select one...</asp:ListItem>
        <asp:ListItem Value="ActionScript">ActionScript</asp:ListItem>
        <asp:ListItem Value="AppleScript">AppleScript</asp:ListItem>
        <asp:ListItem Value="Asp">Asp</asp:ListItem>
        <asp:ListItem Value="BASIC">BASIC</asp:ListItem>
    </asp:DropDownList>
</div>