Agregar y programar controles
En esta parte del tutorial, se agrega a la página un control Button, otro TextBox y otro Label, y se escribe código para controlar el evento Click del control Button.
Ahora agregará controles de servidor a la página. Los controles de servidor, entre los que se incluyen botones, etiquetas, cuadros de texto y otros controles familiares, proporcionan las funciones típicas de procesamiento de formularios para las páginas Web ASP.NET. Sin embargo, puede programar los controles con código que se ejecuta en el servidor, no el cliente.
Ahora agregará controles de servidor a la página. Los controles de servidor, entre los que se incluyen botones, etiquetas, cuadros de texto y otros controles familiares, proporcionan las funciones típicas de procesamiento de formularios para las páginas Web ASP.NET. Sin embargo, puede programar los controles con código que se ejecuta en el servidor, no el cliente.
Para agregar controles a la página
1. Haga clic en la ficha Diseño para cambiar a la vista Diseño.
2. Presione MAYÚS+ENTRAR varias veces para dejar espacio.
3. En el Cuadro de herramientas, en el grupo Estándar, arrastre tres controles a la página: un control TextBox, otro Button y otro Label.
4. Coloque el punto de inserción sobre el control TextBox y, a continuación, escriba Escriba su Nombre:.
Este texto HTML estático es el título del control TextBox. Puede mezclar HTML estático y controles de servidor en la misma página. La captura de pantalla siguiente muestra cómo aparecen los tres controles en la vista Diseño.
Este texto HTML estático es el título del control TextBox. Puede mezclar HTML estático y controles de servidor en la misma página. La captura de pantalla siguiente muestra cómo aparecen los tres controles en la vista Diseño.
Controles en la vista Diseño
Establecer las propiedades de los controles
Visual Web Developer ofrece distintas maneras de establecer las propiedades de los controles de la página. En esta parte del tutorial, establecerá propiedades en las vistas Diseño y Código fuente.Para establecer las propiedades de los controles
1. Seleccione el control Button y, a continuación, en la ventana Propiedades, establezca Text en Mostrar Nombre, como se muestra en la captura de pantalla siguiente.
Texto del control Button cambiado
2. Cambie a la vista Código fuente.
2. Cambie a la vista Código fuente.
La vista Código fuente muestra el código HTML de la página, incluidos los elementos que Visual Web Developer ha creado para los controles de servidor. Los controles se declaran utilizando sintaxis de tipo HTML, con la excepción de que las etiquetas utilizan el prefijo asp: e incluyen el atributo runat="server".
Las propiedades del control se declaran como atributos. Por ejemplo, cuando estableció la propiedad Text del control Button en el paso 1, en realidad estableció el atributo Text del marcado del control.
Observe que todos los controles están dentro de un elemento <form>, que también tiene el atributo runat="server". El atributo runat="server" y el prefijo asp: de las etiquetas de los controles marcan los controles para que ASP.NET los procese en el servidor cuando se ejecuta la página. El código que se encuentra fuera de los elementos <form runat="server"> y <script runat="server"> se envía como marcado o código de cliente al explorador; este es el motivo por el que el código ASP.NET debe estar dentro de un elemento cuya etiqueta de apertura contiene el atributo runat="server".
Las propiedades del control se declaran como atributos. Por ejemplo, cuando estableció la propiedad Text del control Button en el paso 1, en realidad estableció el atributo Text del marcado del control.
Observe que todos los controles están dentro de un elemento <form>, que también tiene el atributo runat="server". El atributo runat="server" y el prefijo asp: de las etiquetas de los controles marcan los controles para que ASP.NET los procese en el servidor cuando se ejecuta la página. El código que se encuentra fuera de los elementos <form runat="server"> y <script runat="server"> se envía como marcado o código de cliente al explorador; este es el motivo por el que el código ASP.NET debe estar dentro de un elemento cuya etiqueta de apertura contiene el atributo runat="server".
3. Coloque el punto de inserción en un espacio dentro de la etiqueta <asp:label> y, a continuación, presione la BARRA ESPACIADORA.
Aparece una lista desplegable que muestra las propiedades que se pueden establecer para un control Label. Esta característica, denominada IntelliSense, ayuda en la vista Código fuente con la sintaxis de los controles de servidor, los elementos HTML y otros elementos de la página. La captura de pantalla siguiente muestra la lista desplegable de IntelliSense para el control Label.
Aparece una lista desplegable que muestra las propiedades que se pueden establecer para un control Label. Esta característica, denominada IntelliSense, ayuda en la vista Código fuente con la sintaxis de los controles de servidor, los elementos HTML y otros elementos de la página. La captura de pantalla siguiente muestra la lista desplegable de IntelliSense para el control Label.
IntelliSense para el control Label
4. Seleccione ForeColor y, a continuación, escriba un signo igual (=). IntelliSense muestra una lista de colores.
5. Seleccione un color para el texto del control Label.
El atributo ForeColor se completa con el color seleccionado.
El atributo ForeColor se completa con el color seleccionado.
Programar el control Button
En esta guía escribirá código que lee el nombre especificado por el usuario en el cuadro de texto y lo muestra en el control Label.
Para agregar un controlador de eventos de botón predeterminado
1. Cambie a la vista Diseño.
2. Haga doble clic en el control Button.
Visual Web Developer cambia a la vista Código fuente y crea un esquema del controlador de eventos para el evento predeterminado del control Button, el evento Click.
2. Haga doble clic en el control Button.
Visual Web Developer cambia a la vista Código fuente y crea un esquema del controlador de eventos para el evento predeterminado del control Button, el evento Click.
Dentro del controlador, escriba lo siguiente:
Label1.
Visual Web Developer muestra una lista de miembros disponibles para el control Label, como se muestra en la captura de pantalla siguiente.
Label1.
Visual Web Developer muestra una lista de miembros disponibles para el control Label, como se muestra en la captura de pantalla siguiente.
Miembros disponibles para el control Label
Complete el controlador de eventos Click para el botón de manera que tenga el aspecto mostrado en el ejemplo de código siguiente:
Desplácese hasta el elemento <asp:Button>. Observe que el elemento <asp:Button> tiene ahora el atributo OnClick="Button1_Click". Este atributo enlaza el evento Click del botón al método controlador que codificó en el paso 4.
Los métodos controladores de eventos pueden tener cualquier nombre; el nombre que se ve es el nombre predeterminado creado por Visual Web Developer. Lo importante es que el nombre utilizado para el atributo OnClick debe coincidir con el nombre de un método de la página.
Los métodos controladores de eventos pueden tener cualquier nombre; el nombre que se ve es el nombre predeterminado creado por Visual Web Developer. Lo importante es que el nombre utilizado para el atributo OnClick debe coincidir con el nombre de un método de la página.
Ejecutar la página
Ahora puede probar los controles de servidor en la página.
Para ejecutar la página
1. Presione CTRL+F5 para ejecutar la página en el explorador.
La página se ejecuta de nuevo utilizando el servidor de desarrollo de ASP.NET.
La página se ejecuta de nuevo utilizando el servidor de desarrollo de ASP.NET.
2. Escriba un nombre en el cuadro de texto y haga clic en el botón.
El nombre especificado se muestra en el control Label. Tenga en cuenta que cuando se hace clic en el botón, la página se publica en el servidor Web. ASP.NET vuelve a crear la página, ejecuta el código (en este caso, se ejecuta el controlador de eventos Click del control Button) y envía la nueva página al explorador. Si observa la barra de estado del explorador, puede ver que la página realiza un viaje de ida y vuelta al servidor Web cada vez que se hace clic en el botón.
El nombre especificado se muestra en el control Label. Tenga en cuenta que cuando se hace clic en el botón, la página se publica en el servidor Web. ASP.NET vuelve a crear la página, ejecuta el código (en este caso, se ejecuta el controlador de eventos Click del control Button) y envía la nueva página al explorador. Si observa la barra de estado del explorador, puede ver que la página realiza un viaje de ida y vuelta al servidor Web cada vez que se hace clic en el botón.
3. En el explorador, vea el código fuente de la página que está ejecutando.
En el código fuente de la página, sólo se ve HTML ordinario; no se ven los elementos <asp:> con los que ha trabajado en la vista Código fuente. Cuando la página se ejecuta, ASP.NET procesa los controles de servidor y representa en la página los elementos HTML que realizan las funciones que representan el control. Por ejemplo, el control <asp:Button> se representa como elemento HTML <input type="submit">.
En el código fuente de la página, sólo se ve HTML ordinario; no se ven los elementos <asp:> con los que ha trabajado en la vista Código fuente. Cuando la página se ejecuta, ASP.NET procesa los controles de servidor y representa en la página los elementos HTML que realizan las funciones que representan el control. Por ejemplo, el control <asp:Button> se representa como elemento HTML <input type="submit">.
4. Cierre el explorador.
Trabajar con controles adicionales
En esta parte del tutorial, trabajará con el control Calendar, que muestra las fechas mes por mes. El control Calendar es más complejo que los controles de botón, cuadro de texto y etiqueta con los que ha trabajado, e ilustra algunas funciones adicionales de los controles de servidor.
En esta sección, agregará un control Calendar a la página y le dará formato.
En esta sección, agregará un control Calendar a la página y le dará formato.
Para agregar un control Calendar
1. En Visual Web Developer, cambie a la vista Diseño.
2. Desde la sección Estándar del Cuadro de herramientas, arrastre un control Calendar hasta la página.
Aparece el panel de etiquetas inteligentes del calendario. El panel muestra comandos que ayudan a realizar las tareas más comunes del control seleccionado. La captura de pantalla siguiente muestra cómo se representa el control Calendar en la vista Diseño.
Aparece el panel de etiquetas inteligentes del calendario. El panel muestra comandos que ayudan a realizar las tareas más comunes del control seleccionado. La captura de pantalla siguiente muestra cómo se representa el control Calendar en la vista Diseño.
Control Calendar en la vista Diseño
3. En el panel de etiquetas inteligentes, elija Formato automático.Se muestra el cuadro de diálogo Formato automático, que permite seleccionar un esquema de formato para el calendario. La captura de pantalla siguiente muestra el cuadro de diálogo Formato automático para el control Calendar.
Cuadro de diálogo Formato automático para el control Calendar.
4. En la lista Seleccionar esquema, seleccione Simple y, a continuación, haga clic en Aceptar.
5. Cambie a la vista Código fuente.
Puede ver el elemento <asp:Calendar>. Este elemento es mucho más largo que los elementos de los controles sencillos creados anteriormente. También incluye subelementos, como <WeekEndDayStyle> , que representa las distintas configuraciones de formato. La captura de pantalla siguiente muestra el control Calendar en la vista Código fuente.
Puede ver el elemento <asp:Calendar>. Este elemento es mucho más largo que los elementos de los controles sencillos creados anteriormente. También incluye subelementos, como <WeekEndDayStyle> , que representa las distintas configuraciones de formato. La captura de pantalla siguiente muestra el control Calendar en la vista Código fuente.
Control Calendar en la vista Código fuente
Programar el control Calendar
En esta sección, programará el control Calendar para que muestre la fecha actualmente seleccionada.
Para programar el control Calendar
1. En vista Diseño, haga doble clic en el control Calendar.
Un nuevo controlador de eventos se crea en la vista Código fuente.
Un nuevo controlador de eventos se crea en la vista Código fuente.
2. Complete el controlador de eventos SelectionChanged con el código resaltado siguiente.
Ejecutar la página
Ya puede probar el calendario.
Para ejecutar la página
1. Presione CTRL+F5 para ejecutar la página en el explorador.
2. Haga clic en una fecha del calendario.
La fecha especificada se muestra en el control Label.
La fecha especificada se muestra en el control Label.
3. En el explorador, vea el código fuente de la página.
El control Calendar se ha representado en la página como una tabla, con cada día como un elemento <td> que contiene un elemento<a>.
El control Calendar se ha representado en la página como una tabla, con cada día como un elemento <td> que contiene un elemento<a>.
4. Cierre el explorador.
No hay comentarios.:
Publicar un comentario