Controles de Servidor en ASP.NET

Introducción a los Controles de Servidor

Tomando como ejemplo un control de texto:

<asp:TextBox ID="CampoTexto" runat="server"></asp:TextBox>

El código del control posee las siguientes características:

Todos los nombres de control llevan el prefijo asp:
El atributo ID se utiliza para identificar de forma única un control en la página
El atributo runat obligatorio indica que el control reside en el servidor.

Práctica: Utilizando Controles de Servidor

Cree un nuevo formulario web denominado DemoControles.aspx
Dentro del div del formulario, agregue controles TextBox, Button y Label, configurando sus atributos. El código final será: ```

3. Agregue código para el control Button ```
    Protected Sub BotonEnviar_Click(sender As Object, e As EventArgs) Handles BotonEnviar.Click
        Etiqueta1.Text = String.Format("Tu nombre es {0}", TuNombre.Text)
    End Sub

Guarde todos los cambios y abra la página en el navegador.
Examine el código fuente de la página.
Regrese a la página, ingrese su nombre, haga clic en enviar y examine nuevamente el código fuente.

Funcionaimento

Los controles de servidor ASP.NET existen en las páginas aspx del servidor, donde son procesados por el runtime de ASP.NET.
Cada control de servidor tiene una representación HTML correspondiente. En este ejemplo, el control Label corresponde al elemento span, el control de texto a <input type="text">, y el botón se muestra finalmente como <input type="submit">.
Al hacer clic en el botón, el control genera un postback, enviando la información de los controles de la página al servidor. Luego, el servidor vuelve a cargar la página y ejecuta el controlador de eventos de clic del botón.

Análisis Detallado de los Controles de Servidor ASP.NET

Definiendo Controles en la Página

Existen múltiples métodos para agregar controles a una página:

Arrastrar controles a la vista de diseño
Ajustar la posición del marcado en la vista de origen
Escribir directamente el marcado en la vista de origen
Utilizar el panel de propiedades para modificar las propiedades del control

Propiedades Comunes de Todos los Controles

Categoría	Nombre	Descripción
Varios	id	Identifica de forma única el control en la página
-	runat	Siempre "server"
Diseño	height
	width
Comportamiento	enabled
	visible
	tooltip	Define una inofrmación sobre herramientas
	clientidmode
Accesibilidad	accesskey	Define una tecla de acceso rápido
	tabindex	Define el orden de tabulación
Apariencia	backcolor
	forecolor
	bordercolor
	borderstyle
	borderwidth
	cssclass	Corresponde al atributo class de HTML

Tipos de Controles

Controles Estándar

Controles Simples

Incluyen textbox, button, label, hyperlink, radiobutton, checkbox

Controles de Lista

Incluyen listbox, dropdownlist, checkboxlist, radiobuttonlist, bulletedlist

Práctica: Utilizando Controles de Lista

Cree un formulario web denominado ControlesLista.aspx
Agregue a la página un DropDownList, un CheckBoxList, un botón y un control label. Agregue espacio adecuado antes del label. ```

3. Agregue un evento de clic para el botón. ```
    Protected Sub Boton1_Click(sender As Object, e As EventArgs) Handles Boton1.Click
        Etiqueta1.Text = "En la DDL seleccionaste " & ListaDesplegable1.SelectedValue & "<br />"
        For Each elemento As ListItem In ListaCasilla1.Items
            If elemento.Selected Then
                Etiqueta1.Text &= "En la CBL seleccionaste " & elemento.Value & "<br />"
            End If
        Next
    End Sub

Guarde todos los cambios en la página y solicítela en el navegador.

Funcionamiento

El elemento <asp:ListItem> tiene un atributo Value. Si se omite, el Value equivale al valor de texto HTML del elemento.

Controles Contenedor

Como Panel, PlaceHolder, MultiView, Wizard

El control Panel se representa como el marcado <div> y permite un fácil acceso a todos los controles contanidos y otros elementos.

Práctica: Utilizando el Control Panel

Cree un nuevo formulario web denominado Contenedores.aspx.
En el div del formulario, agregue un checkbox y un control panel. El código final será: ```

3. Agregue un controlador de eventos para el evento checkedchanged del checkbox. ```
    Protected Sub Casilla1_CheckedChanged(sender As Object, e As EventArgs) Handles Casilla1.CheckedChanged
        Panel1.Visible = Casilla1.Checked
    End Sub

Guarde los cambios y visualícelos en el navegador. Examine el archivo HTML de la página; por el id='Panel1' puede ver que el panel se muestra como un div.

Funcionamiento

La propiedad Visible del control Panel en False significa que el control no es visible en el servidor.

Práctica: Creando Formularios Sencillos con el Asistente

Cree un formulario web denominado Asistente.aspx.
En el div del formulario, agregue un control Wizard. ``` <asp:Wizard ID="Asistente1" runat="server" ActiveStepIndex="0" Width="500px"> <WizardSteps> <asp:WizardStep runat="server" Title="Sobre Ti"> <asp:Label ID="Etiqueta1" runat="server" Text="Escribe tu nombre"></asp:Label> <asp:TextBox ID="TuNombre" runat="server"></asp:TextBox> </asp:WizardStep> <asp:WizardStep runat="server" Title="Idioma Favorito" StepType="Finish"> <asp:DropDownList ID="IdiomaFavorito" runat="server"> asp:ListItemC#</asp:ListItem> asp:ListItemVisual Basic</asp:ListItem> asp:ListItemCSS</asp:ListItem> </asp:DropDownList> </asp:WizardStep> <asp:WizardStep runat="server" Title="Listo" StepType="Complete"> <asp:Label ID="Resultado" runat="server" Text="Etiqueta"></asp:Label> </asp:WizardStep> </WizardSteps> </asp:Wizard>

3. Agregue una función de control de eventos para el evento finishButtonClick del control asistente. ```
    Protected Sub Asistente1_FinishButtonClick(sender As Object, e As WizardNavigationEventArgs) Handles Asistente1.FinishButtonClick
        Resultado.Text = "Tu nombre es " & TuNombre.Text
        Resultado.Text &= "<br />Tu idioma favorito es " & IdiomaFavorito.SelectedValue
    End Sub

Guarde los cambios y visualícelos en el navegador.

Funcionamiento

El control Wizard puede presentar las entradas del usuario en secciones lógicas independientes en páginas de asistente separadas. Luego, el control Wizard manejará todos los problemas de navegación creando automáticamente los botones Next, Previous y Finish. Aquí es necesario configurar:

La propiedad StepType de asp:WizardStep, donde el penúltimo paso debe ser Finish y el último Complete. Los demás pueden ser Auto.
Establecer ActiveStepIndex del asp:Wizard en 0 para asegurar que el asistente comience en la primera página.
Cuando el usuario hace clic en el botón finish del último paso del asistente, se activa el evento FinishButtonClick del control Wizard.

Otros Controles Estándar

Controles HTML

Controles de Datos

Controles de Validación

Controles de Navegación

Controles de Inicio de Sesión

Extensiones Ajax

WebParts

Datos Dinámicos

Motor de Estado de ASP.NET

Definición del Motor de Estado y su Importancia

El protocolo HTTP es stateless (sin estado), el servidor web no rastrea las solicitudes emitidas desde un navegador específico, y el servidor web no recuerda las páginas solicitadas previamente.

Funcionamiento del Motor de Estado

El motor de estado puede almacenar el estado de muchos controles.

Práctica: Analizando el Motor de Estado de ASP.NET

(omisión)

Funcionamiento

El propósito del elemento form: se utiliza para encapsular controles de formulario cuyos valores se enviarán juntos de vuelta al servidor.

Existen dos métodos de envío de formularios:

Post: todos los datos del formulario se agregan al cuerpo de la solicitud y luego se envían al servidor.
Get: todos los datos se adjuntan a la dirección real de la solicitud.

Por defecto, el formulario utiliza el método Post para enviar datos al servidor, y cada formulario web tiene un solo elemento form.

Por defecto, el formulario web se envía a sí mismo, es decir, el atributo action del elemento form de State.aspx apunta a State.aspx.

El campo oculto __VIEWSTATE es utilizado por el servidor para realizar un seguimiento del estado actual de los controles del formulario.

Cuando el runtime de ASP.NET carga una página ASP.NET, rellena este campo oculto con la información relevante de la página.

No todos los controles dependen del view state

Muchos controles mantienen su propio estado, incluyendo TextBox, checkbox, radiobutton, dropdownlist

Nota sobre view state y rendimiento

Por razones de rendimiento, puede desactivar la función view state cuando no sea necesaria:

A nivel de sitio web En web.config, establezca el atributo enableViewState de <pages> dentro de <system.web> en false ``` <pages controlRenderingCompatibilityVersion="4.5" enableViewState="true"/>
</system.web>

- **A nivel de página** En la parte superior de cada página puede encontrar la directiva de página, donde puede establecer EnableViewState en false ```
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Estado.aspx.vb" Inherits="Estado" EnableViewState="True" %>

A nivel de control Cada control permite establecer individualmente EnableViewState en false

Para algunos controles como los controlados por datos, se puede considerar establecer enableViewState en false.

Etiquetas: ASP.NET controles-servidor desarrollo-web VB.NET postback

Publicado el 6-7 00:03

Friki Work

Controles de Servidor en ASP.NET

Introducción a los Controles de Servidor

Práctica: Utilizando Controles de Servidor

Análisis Detallado de los Controles de Servidor ASP.NET

Definiendo Controles en la Página

Propiedades Comunes de Todos los Controles

Tipos de Controles

Controles Estándar

Controles Simples

Controles de Lista

Controles Contenedor

Controles HTML

Controles de Datos

Controles de Validación

Controles de Navegación

Controles de Inicio de Sesión

Extensiones Ajax

WebParts

Datos Dinámicos

Motor de Estado de ASP.NET

Definición del Motor de Estado y su Importancia

Funcionamiento del Motor de Estado

No todos los controles dependen del view state

Nota sobre view state y rendimiento

Etiquetas populares