PRACTICA DE LABORATORIO ASP.NET #1 I. Introduccin a ASP.NET. Objetivos: Crear sitios WEB vacos en Visual WEB Developer 2010 Express.

Identificar el entorno de la aplicacin. Crear script bsicos con controles WEB Introduccin: Esta gua pretende que el aprendiz inicie el uso de la herramienta Visual WEB Developer CREACIN DE SITIOS WEB Busque en su computador la herramienta Visual WEB Developer, al presionar click aparecer la siguiente pantalla.

Inmediatamente aparecer la ventana de dilogo para que podamos elegir o configurar la versin del Framework que ser compatible con nuestra aplicacin, la ubicacin dentro del disco donde se almacenar, el lenguaje de programacin a utilizar, etc. En este caso hemos elegido C#. Seleccionaremos la opcin Sitio web vaco de ASP.NET, usamos esta opcin para que nos proporcione un entorno limpio para poder crear los script de la manera que tengamos pensado, en la parte de abajo podemos personalizar el nombre de nuestro sitio. Le colocamos el nombre Miprimerawebapp

Hacemos click en Ok para crear el nuevo documento en ASP.NET.

Inmediatamente nos aparece la siguiente ventana donde podemos observar a mano derecha el explorador de soluciones y el Men de propiedades, y a mano izquierda el Cuadro de herramientas

Despus de que su sitio web ha sido creado, el siguiente paso es empezar a aadir pginas al sitio. Una pgina ASP.NET tambin se conoce como un formulario web y puede estar compuesta de un nico archivo o un par de archivos. Una pgina ASPX siempre tiene dos componentes separados: diseo y cdigo. El diseo se expresa mediante el uso de HTML y el cdigo est escrito en ASP.NET, por lo general con Visual Basic. NET o C #. ASP.NET permite almacenar tanto el diseo y el cdigo en un solo archivo, o almacenarlos en archivos separados (una tcnica conocida como Code-Behind). Se recomienda usar mtodo Code-Behind, porque es ms fcil de organizar y ms ampliamente aceptado en la comunidad de desarrollo. Anatoma de una pgina ASPX Una pgina en ASP.NET contiene informacin de diseo de interfaz de usuario, el cdigo que se ejecuta en el servidor y directivas tanto para conectar el diseo con el cdigo y que le digan a ASP.NET, cmo la pgina debe ser procesada. Una pgina ASP.NET estndar tiene una extensin .aspx

Una Pgina ASPX tpica, incluye tres secciones: las directivas de pgina, cdigo, y diseo de pgina. Estas secciones se definen como sigue: Directivas de pgina: Esta seccin se usa para configurar el entorno y especifica cmo la pgina debe ser procesada. Aqu es donde usted puede indicar un archivo de cdigo asociado, un lenguaje de desarrollo, operacin, y ms. Una directiva de pgina se asemeja a la siguiente: <% @ Page " Language = " C #" AutoEventWireup = "true" CodeFile = " Default.aspx.cs " Inherits = " _Default "%> Cdigo: Esta seccin contiene cdigo para controlar los eventos que se ejecutan en el servidor basado en el modelo de procesamiento de pginas ASP.NET. En las pginas de un solo archivo, el cdigo se almacena dentro de uno o ms bloques <script runat="server"> < / script > bloques. Si utiliza el mtodo de Code-Behind, el cdigo es almacenado en un archivo separado, cuando utlizamos el lenguaje C#, el archivo de cdigo se guarda con la extensin .cs Diseo de pgina El diseo de la pgina se escribe mediante el uso de HTML que incluye el cuerpo HTML y el estilo. El cuerpo HTML puede contener etiquetas HTML, controles Visual Studio, controles de usuario, cdigo y texto simple.

Agregar paginas ASPX a un proyecto. En el explorador de soluciones hacemos click derecho sobre el nombre del proyecto o aplicacin Luego seleccionamos la opcin Agregar->Nuevo elemento

Nos aparece la siguiente ventana

All seleccionamos la opcin Web Forms, le cambiamos el nombre de WebForm1.aspx a default.aspx, y hacemos click en agregar. Nos aparece la siguiente ventana

Ahora vamos a explicar a detalle cada una de las lneas de cdigo que se generan por defecto al crear una pgina aspx En la primera lnea encontramos la etiqueta <@Page>, esta define atributos especficos de la pgina

Los atributos de una etiqueta <@ Page> incluyen: Language El atributo Language define el lenguaje en el que est escrito el script de la pgina Web. Algunos de los valores de este atributo son: vb, c# y JScript. AutoEventWireup Este atributo es de tipo boolean, y por defecto est establecido a true, y sirve para establecer si los eventos para las pginas ASP.NET se conectan automticamente a las funciones de control de eventos.

Codebehind El atributo de pgina Codebehind identifica la pgina que tiene la lgica que soporta el Web Form. Cuando Visual Studio .NET crea un formulario Web Form, como WebForm1.aspx, tambin crea una pgina de cdigo subyacente, WebForm1.aspx.vb o WebForm1.aspx.cs. Inherits Este atributo permite a la pgina .aspx heredar clases y objetos de la pgina de cdigo subyacente. En la segunda lnea encontramos la etiqueta DOCTYPE, esta etiqueta sirve para establecer el tipo de DTD que vamos a utilizar.

Un DTD o Document Type Definition ("Definicin del Tipo de Documento") es un documento que recoge el conjunto de normas y restricciones que deben cumplir los documentos de un determinado tipo. El estndar XHTML define el DTD que deben seguir las pginas y documentos XHTML. En este documento se definen las etiquetas que se pueden utilizar, los atributos de cada etiqueta y el tipo de valores que puede tener cada atributo. En la tercera lnea encontramos la conocida etiqueta html, pero con un atributo llamado xmlns, este atributo nos permite establecer el namespace a utilizar. Un namespace en un documento XML permite diferenciar las etiquetas y atributos que pertenecen a cada lenguaje. Los namespaces se indican mediante una URL. El namespace que utilizan http://www.w3.org/1999/xhtml todas las pginas XHTML es

El cdigo que sigue, es ya conocido por usted, pues son etiquetas que vieron en el tutorial de html bsico, con la diferencia que dentro de estas etiquetas se est incluyendo un atributo runat=server Este atributo indica a ASP.NET que los elementos deben ser procesados del lado del servidor.

En el cdigo las nicas dos estiquetas con as que usted an no est familiarizado son con las etiquetas form y div. La etiqueta form es la que se utiliza en HTML para crear un formulario, en este caso ASP.NET la incluye automticamente en el cdigo al momento de crear el formulario web. Toda pgina aspx debe tener solamente una etiqueta form. La etiqueta div sirve para agrupar elementos. Todos los elementos que estn agrupados en ella tendrn las mismas caractersticas. Esto nos permite realizar cambios de estilo o de otra ndole una sola vez, y que afecten a todo el conjunto. CONTROLES ESTNDAR FORMULARIOS WEB El diseo de una aplicacin web es similar al diseo de una aplicacin de escritorio. La diferencia est en lo que ocurre tras bambalinas, pues en vez de agregar cdigo para los controles y las propiedades asociadas a ellos, lo que se hace es agregar una etiqueta HTML a la pgina aspx. COMO INSERTAR CONTROLES EN UN FORMULARIO WEB Para insertar controles en un formulario web basta con irnos a la pestaa diseo del recuadro central y desde el cuadro de herramientas arrastramos el control que queramos. Los controles que tiene ASP.NET para disear una aplicacin web son muy similares a los de una aplicacin de escritorio.

LABEL TEXTBOX BUTTON

Controles estandar Se utiliza para colocar texto en el formulario El control Button presenta un botn de comando estndar. Mediante los controles Button de las pginas web ASP.NET, los usuarios pueden indicar que han rellenado el formulario o que desean ejecutar un comando concreto. El control Calendar muestra un calendario en el que los usuarios pueden desplazarse a cualquier da de cualquier ao. Cuando se ejecuta la pgina ASP.NET, el control Calendar se representa como una tabla HTML Este control es similar al control Button, ya que el LinkButton es un rea en donde los usuarios pueden hacer click, esto significa que se puede escribir cdigo para realizar cualquier accin en respuesta al click sobre el LinkButton El control Image permite mostrar imgenes en pginas web ASP.NET Un control ImageButton permite presentar una imagen en forma de control interactivo. El control ImageMap ASP.NET le permite crear una imagen con reas individuales en las que los usuarios pueden hacer clic, denominadas zonas activas. Cada una de estas zonas activas puede ser un hipervnculo independiente o un evento de devolucin de datos. El control HyperLink crea vnculos en una pgina web que permiten a los usuarios moverse por las pginas de una aplicacin. Este control simplemente desempea tareas de desplazamiento. El control de servidor web DropDownList permite a los usuarios seleccionar un elemento de una lista predefinida. Se diferencia del control de servidor web ListBox en que la lista de elementos permanece oculta hasta que los usuarios hacen clic en el botn desplegable. El control DropDownList tambin se diferencia del control ListBox en que no admite el modo de seleccin mltiple. El control ListBox permite a los usuarios

CALENDAR

LINKBUTTON

IMAGE IMAGEBUTTON IMAGEMAP

HYPERLINK

DROPDOWNLIST

LISTBOX

seleccionar uno o varios elementos de una lista predefinida. Se diferencia de un control DropDownList en que puede mostrar varios elementos a la vez y, de manera opcional, permite al usuario seleccionar varios elementos. CHECKBOX Este control permite seleccionar una o varias opciones dentro de un grupo de opciones CHECKBOXLIST Este control muestra una lista de controles CheckBox. Cada uno de los elementos dentro de un control CheckBoxList est representado por un elemento ListItem RADIOBUTTON Este control permite seleccionar una y solo una opcin dentro de un grupo de opciones RADIOBUTTONLIST Este control muestra una lista de controles RadioButton. Cada uno de los elementos dentro de un control RadioButton est representado por un elemento ListItem

CREANDO NUESTRA PRIMERA APLICACIN ASP.NET Vamos hacer una aplicacin que permita calcular el rea de un triangulo La interfaz grfica debe quedar como muestra la siguiente figura.

Para ello vamos a hacer lo siguiente: 1. En modo diseo arrastramos un Control Panel hasta el formulario, luego en la propiedad Borderstyle seleccionamos el valor solid 2. Luego arrastramos 3 controles Label vaya a la propiedad Text de cada uno delos controles para que muestre el texto que se ve en la figura

3. 3 controles TextBox, ahora vaya a la propiedad Enabled del TextBox que est al frente de Area de triangulo es y establzcala como False 4. Arrastre un Control Button y en su propiedad Text escriba Calcular 5. Ahora vaya a la pestaa cdigo del recuadro central y observe que ocurri. NOTE QUE POR CADA CONTROL QUE USTED ARRASTRO AL FORMULARIO SE CREO UNA ETIQUETA HTML EN EL CODIGO DE LA PAGINA ASPX 6. Ahora vaya nuevamente a la pestaa diseo y de doble click sobre el botn. 7. Inmediatamente le aparece otra ventana, es la ventana de cdigo la del Code-Behind: default.aspx.cs all escriba lo siguiente

8.