Sintaxis declarativa del control de servidor HtmlSelect
Actualización: noviembre 2007
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
Sintaxis declarativa del control de servidor HtmlForm