HtmlSelect 伺服器控制項宣告式語法

發行項
08/12/2011

建立伺服器端控制項，其對應到 <select> HTML 項目，並且允許您建立清單控制項。

<select
    DataSourceID="string"
    DataTextField="string"
    EnableViewState="False|True"
    Id="string"
    Visible="False|True"
    OnDataBinding="OnDataBinding event handler"
    OnDisposed="OnDisposed event handler"
    OnInit="OnInit event handler"
    OnLoad="OnLoad event handler"
    OnPreRender="OnPreRender event handler"
    OnServerChange="OnServerChange event handler"
    OnUnload="OnUnload event handler"
    runat="server"
    > 
 
   <option>value1</option> 
   <option>value2</option> 
 
</select>

備註

使用 HtmlSelect 控制項，對 HTML <select> 項目進行設計程式。依預設值，這個控制項會呈現為下拉式清單方塊。不過，如果您允許多個選擇 (藉由指定 Multiple 屬性) 或為 Size 屬性指定的值大於 1，則控制項就會顯示為清單方塊。

您也可以繫結控制項到資料來源中。設定 DataSource 屬性來指定資料來源，以繫結到控制項。一旦資料來源繫結至控制項，您就可以分別設定 DataValueField 和 DataTextField 屬性，藉此指定要將哪個欄位繫結至 Value 和 Text 屬性。

範例

下列範例使用 HtmlSelect 控制項中的項目來設定 span 控制項的背景色彩。它也會顯示如何使用 Items 屬性，將新選項項目加入選擇清單中。這個屬性屬於 ListItemCollection 型別，因此可以存取該類別的 Add 方法。範例程式碼會在 AddToList_Click 事件處理常式中進行這項操作。

<%@ Page Language="VB" AutoEventWireup="True" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>
<title>HtmlSelect Control</title>

   <script runat="server">
      Sub Apply_Click(Source As Object, e As EventArgs)
         Span1.Style("background-color") = ColorSelect.Value
      End Sub

      Sub AddToList_Click(Source As Object, e As EventArgs)
         ColorSelect.Items.Add(Text1.Value)
      End Sub
   </script>

</head>
<body>

   <h3>HtmlSelect Sample</h3>

   <form id="Form1" runat="server">
      Select a color:<br />
      <select id="ColorSelect" runat="server">
         <option>SkyBlue</option>
         <option>LightGreen</option>
         <option>Gainsboro</option>
         <option>LemonChiffon</option>
      </select>

      <input id="Button1" type="button" runat="server" 
             value="Apply" onserverclick="Apply_Click" />
      <p />
      Don't see your color in the list above?  You can add it here:<br />
      <input type="text" id="Text1" runat="server" />
      <input id="Button2" type="button" runat="server" 
             value="Add to List" onserverclick="AddToList_Click" />
      <p />
      <span id="Span1" runat="server">
         Click the button to apply a background color to this span.
      </span>
   </form>
</body>
</html>

<%@ Page Language="C#" AutoEventWireup="True" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>
<title>HtmlSelect Control</title>

   <script runat="server">
      void Apply_Click(object Source, EventArgs e) 
      {
         Span1.Style["background-color"] = ColorSelect.Value;
      }

      void AddToList_Click(object Source, EventArgs e) 
      {
         ColorSelect.Items.Add(Text1.Value);
      }
   </script>

</head>
<body>

   <h3>HtmlSelect Sample</h3>

   <form id="Form1" runat="server">
      Select a color:<br />
      <select id="ColorSelect" runat="server">
         <option>SkyBlue</option>
         <option>LightGreen</option>
         <option>Gainsboro</option>
         <option>LemonChiffon</option>
      </select>
      <input id="Button1" type="button" runat="server" 
             value="Apply" onserverclick="Apply_Click" />
      <p />
      Don't see your color in the list above?  You can add it here:<br />
      <input type="text" id="Text1" runat="server" />
      <input id="Button2" type="button" runat="server" 
             value="Add to List" onserverclick="AddToList_Click" />
      <p />
      <span id="Span1" runat="server">
         Click the button to apply a background color to this span.
      </span>
   </form>
</body>
</html>

下列範例將顯示如何將 HtmlSelect 控制項繫結至在 Page_Load 事件中宣告的 ArrayList。當使用者在呈現的網頁上按一下 HtmlInputButton 控制項時，也會有 SubmitBtn_Click 事件顯示選取的資料繫結值。

選取控制項的 Id 屬性是 StateSelect，而控制項的 DataSource 屬性會設定為網頁載入時 ArrayList 所建立的值。然後，在 ArrayList 中選擇控制項的 DataBind 方法會將該值繫結到控制項本身。

<%@ Page Language="VB" AutoEventWireup="True" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>
<title>HtmlSelect Control</title>

   <script runat="server">
      Sub Page_Load(Sender As Object, e As EventArgs)
         If Not IsPostBack Then
            Dim values As New ArrayList()
            values.Add("IN")
            values.Add("KS")
            values.Add("MD")
            values.Add("MI")
            values.Add("OR")
            values.Add("TN")
            StateSelect.DataSource = values
            StateSelect.DataBind()
         End If
      End Sub

      Sub SubmitBtn_Click(sender As Object, e As EventArgs)
         Span1.InnerHtml = "You chose: " & StateSelect.Value
      End Sub
   </script>

</head>
<body>

   <h3>Data Binding to an HtmlSelect Control</h3>

   <form id="Form1" runat="server">
      Select a state:<br />
      <select id="StateSelect" runat="server" />
      <input id="Submit1" type="submit" value="Display Selected State"
             onserverclick="SubmitBtn_Click" runat="server" />
      <p />
      <span id="Span1" runat="server" />
   </form>
</body>
</html>

<%@ Page Language="C#" AutoEventWireup="True" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>
<title>HtmlSelect Control</title>

   <script runat="server">
      void Page_Load(Object Sender, EventArgs e) 
      {
         if (!IsPostBack) 
         {
            ArrayList values = new ArrayList();
            values.Add ("IN");
            values.Add ("KS");
            values.Add ("MD");
            values.Add ("MI");
            values.Add ("OR");
            values.Add ("TN");
            StateSelect.DataSource = values;
            StateSelect.DataBind();
         }
      }   

       void SubmitBtn_Click(Object sender, EventArgs e) 
      {
         Span1.InnerHtml = "You chose: " + StateSelect.Value;
      }
   </script>

</head>
<body>

   <h3>Data Binding to an HtmlSelect Control</h3>

   <form id="Form1" runat="server">
      Select a state:<br />
      <select id="StateSelect" runat="server" />
      <input id="Submit1" type="submit" value="Display Selected State"
             onserverclick="SubmitBtn_Click" runat="server" />
      <p />
      <span id="Span1" runat="server" />
   </form>
</body>
</html>

請參閱

參考

HtmlSelect

HtmlForm 伺服器控制項宣告式語法

System.Web.UI.HtmlControls

其他資源

HTML 伺服器控制項

共用方式為

HtmlSelect 伺服器控制項宣告式語法

備註

範例

請參閱

參考

其他資源

其他資源