Crear formularios Web Forms
1. ¿Qué es un formulario Web Form?
2. Crear un formulario Web Form con Visual Studio .NET
3. Demostración: convertir una página HTML en un formulario Web Form
· Extensión .aspx
· Atributos de página
· Directiva @ Page
o Atributos de cuerpo
o Atributos de formulario
Los formularios Web Forms están formados por una combinación de HTML, código y controles que se ejecutan en un servidor Web ejecutando Microsoft Internet Information Services (IIS). Los formularios Web Forms muestran una interfaz de usuario que genera HTML y que se envía al navegador, mientras que el código de soporte y los controles que la componen permanecen en el servidor Web. Esta división entre el interfaz en el cliente y el código en el servidor es una importante diferencia entre los formularios Web Forms y las páginas Web tradicionales. Mientras una página Web tradicional requiere que todo el código se envíe y se procese en el navegador, los formularios Web Forms únicamente necesitan enviar al navegador los controles de la interfaz, y el proceso de las páginas se mantiene en el servidor. Esta división entre IU y código aumenta el número de navegadores soportados e incrementa la seguridad y funcionalidad de la página Web.
Extensión .aspx
Los formularios Web Forms se denominan habitualmente páginas ASP.NET o páginas ASPX. Los formularios Web Forms tienen una extensión .aspx y funcionan como contenedores para el texto y los controles que deseamos mostrar en el navegador. Las páginas ASP.NET (.aspx) y Active Server Pages (ASP) (.asp) pueden coexistir en el mismo servidor. La extensión del archivo determina si la página la procesa ASP o ASP.NET.
Los formularios Web Forms están frecuentemente formados por dos archivos distintos: el archivo .aspx contiene la IU para el formulario Web Form, mientras que el archivo .aspx.vb o .aspx.cs, denominado página de código subyacente, contiene el código de soporte.
Atributos de la página
Las funciones de un formulario Web Form están definidas por tres niveles de atributos. Los atributos de página definen las funciones globales, los atributos de cuerpo definen cómo se mostrará una página y los atributos de formulario definen cómo se procesarán los grupos de controles.
La etiqueta <@Page> define atributos específicos de la página que utiliza el parseador de páginas ASP.NET y el compilador. Únicamente podemos incluir una etiqueta <@ Page> por archivo .aspx. Los siguientes ejemplos son etiquetas <@ Page> típicas para Microsoft Visual Basic® .NET y para Microsoft Visual C#™ .NET:
Visual Basic .NET
<%@ Page Language="vb" Codebehind="WebForm1.aspx.vb"
SmartNavigation="true" %>
C#
<%@ Page Language="c#" Codebehind="WebForm1.aspx.cs"
SmartNavigation="true" %>
Los atributos de una etiqueta <@ Page> incluyen:
A) Language
El atributo Language define el lenguaje en el que está escrito el script de la página Web. Algunos de los valores de este atributo son: vb, c# y JScript.
B) Página Codebehind
El atributo de página Codebehind identifica la página de código subyacente que tiene la lógica que soporta el formulario Web Form. Cuando Visual Studio .NET crea un formulario Web Form, como WebForm1.aspx, también crea una página de código subyacente, WebForm1.aspx.vb o WebForm1.aspx.cs.
C) SmartNavigation
El atributo SmartNavigation de ASP.NET permite al navegador actualizar únicamente las secciones del formulario que han cambiado. Las ventajas de SmartNavigation son que la pantalla no parpadea mientras se actualiza; en lugar de ello, se mantiene la posición de desplazamiento y se mantiene la "última página" en el historial. Smartnavigation únicamente está disponible para los usuarios con Microsoft Internet Explorer 5 o superior.
Atributos del cuerpo
Los atributos de la etiqueta <Body> definen el aspecto de los objetos que se muestran en el navegador del cliente. La siguiente es una etiqueta <Body> típica:
<body ms_positioning="GridLayout">
Los atributos de una etiqueta <Body> incluyen:
A) PageLayout
El atributo pageLayout (etiquetado como ms_positioning) determina cómo se posicionan los controles y el texto en la página. Existen dos opciones para pageLayout:
• FlowLayout
En FlowLayout, el texto, las imágenes y los controles fluyen por la pantalla, dependiendo del ancho de la ventana del navegador.
• GridLayout
En GridLayout, los campos de texto, las imágenes y los controles de una página están fijados por coordinadas absolutas. GridLayout es el valor de pageLayout predeterminado para Visual Studio .NET.
El siguiente código de ejemplo muestra cómo implementar GridLayout y situar un cuadro de texto:
<body ms_positioning="GridLayout">
<form id="Form1" method="post" runat="server">
<asp:textbox id="txtField1" style="Z-INDEX: 101;
LEFT: 65px; POSITION: absolute; TOP: 98px"
runat="server" Height="26px" Width="194px">
</asp:textbox>
</form>
</body>
Atributos del formulario
La etiqueta <Form> define cómo se procesarán los grupos de controles. La etiqueta <Form> es diferente del término Web Form utilizado para definir la página Web completa. Los atributos de la etiqueta <Form> definen cómo se procesarán los controles. Aunque podemos tener muchos formularios HTML en una página, únicamente podemos tener un formulario del lado del servidor en una página .aspx.
El siguiente ejemplo es de una etiqueta <Form> típica:
<form id="Form1" method="post" runat="server">
...
</form>
Los atributos de una etiqueta <Form> incluyen:
A) Method
El atributo Method identifica el método para enviar valores de control de retorno al servidor. Las opciones de este atributo son:
• Post
Los datos se pasan en pares nombre/valor dentro del cuerpo de la petición HTTP (Hypertext Transfer Protocol).
• Get
Los datos se pasan en una cadena de consulta.
B) Runat
Una de las principales características de un formulario Web Form es que los controles se ejecutan en el servidor. El atributo runat="server" hace que el formulario publique información de control de retorno a la página ASP.NET en el servidor donde se ejecuta el código de soporte. Si el atributo runat no está establecido en "server", el formulario funciona como un formulario
HTML normal.
Ejemplo con Visual Basic .NET
El siguiente código procede del formulario Web Form predeterminado de Visual Studio .NET al crear un nuevo proyecto de aplicación Web ASP.NET con Visual Basic .NET:
<%@Page Language="vb" AutoEventWireup="false"
Codebehind="WebForm1.aspx.vb"
Inherits="WebApplication1.WebForm1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>WebForm1</title>
<meta name="GENERATOR" content="Microsoft Visual
Studio.NET 7.1">
<meta name="CODE_LANGUAGE" content="Visual Basic 7.1">
<meta name="vs_defaultClientScript"
content="JavaScript">
<meta name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5">
</head>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
'HTML y controles aquí
</form>
</body>
</html>
Ejemplo de C#
El siguiente código procede del formulario Web Form predeterminado de Visual Studio .NET al crear un nuevo proyecto de aplicación Web ASP.NET con Visual C#:
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs"
AutoEventWireup="false" Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>WebForm1</title>
<meta name="GENERATOR" Content="Microsoft Visual
Studio 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript"
content="JavaScript">
<meta name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5">
</head>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
'HTML y controles aquí
</form>
</body>
</html>
No hay comentarios:
Publicar un comentario