Compartir a través de


Sintaxis declarativa del control de servidor HtmlSelect

[Esta documentación se proporciona solo para fines preliminares y está sujeta a cambios en versiones posteriores. Se incluye temas en blanco como marcadores].

Crea un control de servidor que se asigna al elemento HTML <select> y permite crear un control de lista.

<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>

Comentarios

Utilice el control HtmlSelect para programar con el elemento HTML <select>. De forma predeterminada, este control representa un cuadro de lista desplegable. No obstante, si se permiten varias selecciones (especificando el atributo Multiple) o se especifica un valor para la propiedad Size que sea mayor que 1, el control se muestra como un cuadro de lista.

También se puede enlazar el control con un origen de datos. Establezca el valor de la propiedad DataSource para especificar el origen de datos que se va a enlazar al control. Una vez enlazado el origen de datos al control, se puede especificar el campo que se va a enlazar a las propiedades Value y Text estableciendo el valor de las propiedades DataValueFieldy DataTextField, respectivamente.

Ejemplo

En el siguiente ejemplo se utilizan las entradas de un control HtmlSelect para establecer el color de fondo de un control span. También se muestra cómo utilizar la propiedad Items para agregar nuevos elementos de opción a la lista seleccionada. Esta propiedad es del tipo ListItemCollection y, por consiguiente, puede obtener acceso al método Add de esa clase. En el código de ejemplo, se realiza esto en el controlador de eventos 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>

En el siguiente ejemplo se muestra cómo enlazar un control HtmlSelect a una lista ArrayList declarada en el evento Page_Load. Hay también un evento SubmitBtn_Click que muestra el valor enlazado a datos seleccionado cuando el usuario hace clic en un control HtmlInputButton de la página que se representa.

La propiedad Id del control seleccionado es StateSelect y la propiedad DataSource del control se establece en los valores que ArrayList crea cuando se carga la página. A continuación, el método DataBind del control enlaza los valores de ArrayList al control.

<%@ 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>

Vea también

Referencia

HtmlSelect

Sintaxis declarativa del control de servidor HtmlForm

System.Web.UI.HtmlControls

Otros recursos

Controles de servidor HTML