DesarrollandoApiclaciones Web

Introducción◦ Programación para la World Wide Web

◦ Creación de aplicaciones ASP.NET

◦ Controles de servidor Web y formularios web

◦ Uso de bases de datos en ASP.NET

Programando para la Web

HyperText Markup LanguageHTML significa HyperText Markup Language◦ Describe la apariencia de las páginas web◦ Un lenguaje de formato normalizado◦ No es un lenguaje de programación◦ Instrucciones de formato aparecen como comandos denominados

etiquetas incrustadas en el texto de la página web◦ Texto tras el tag (<b>) se muestra en negrita hasta un extremo de la

etiqueta negrita (</ b>)

Editores de diseño Web crean HTML para usted

<b>This text is bold.</b>This text is normal.

ASP.NETLas siglas ASP originalmente representaban Active Server Pages◦ ASP.NET, es una plataforma de programación Web del lado del servidor

◦ Proporciona herramientas de desarrollo y controles visuales para aplicaciones basadas en navegadores web

◦ Contiene formularios Web y controles, HTML y la lógica del programa en código compilado de VB

◦ Transferencias de conocimiento VB directamente a ASP.NET

Código de VB se ejecuta en el servidor, no en el cliente

◦ Se ejecuta código que crea una página HTML

◦ Navegador web cliente recibe el HTML

Los clientes Web y servidores WebEl modelo cliente-servidor◦ Un servidor es un equipo que produce datos

◦ Un cliente es un equipo que utiliza los datos

Las aplicaciones Web utilizan el modelo cliente-servidor◦ Navegadores Web se ejecutan en los clientes y los datos de solicitud de servidores web

◦ Sitios web se hospedan en servidores web que producen los datos conforme a lo solicitado por los navegadores web

Uniform Resource Locator (URL)Un URL (Uniform Resource Locator) hace referencia a una página web en particular

Por ejemplo:http://pearsonhighered.com

◦ Empieza con el protocolo◦ http://

◦ Entonces el nombre del dominio◦ pearsonhighered.com

◦ Puede terminar con una ruta de carpeta específica y / o nombre de archivo

El URL se utiliza como una dirección que identifica de forma única la página web para ser recuperada

Mostrando una página Web¿Qué sucede cuando una página Web se muestra mediante un navegador Web?

Un equipo debe estar ejecutando un servidor Web, que espera a las solicitudes de conexión del navegador, esto ocurre en dos pasos:

1. Browser se conecta al servidor solicitando una URL

2. Servidor traduce URL en un archivo físico situado dentro del sistema de archivos del servidor y envía el archivo solicitado, llamando una página Web, de vuelta al navegador

◦ Servidor rompe la conexión después de enviar la página Web

◦ Web Browser interpreta HTML y hace una página Web

◦ Devolución de datos se produce si el cliente solicita la página Web de nuevo◦ Al hacer clic en un control de botón o pulsando la tecla Enter

Formularios webPáginas web ASP.NET se llaman formularios Web

Un formulario web

◦ Utiliza una extensión de nombre de archivo de .aspx

◦ Contiene texto, etiquetas HTML y controles HTML

◦ También contiene los controles de servidor Web, tales como cuadros de texto, cuadros de lista y botones◦ También conocido como controles de servidor ASP.NET

◦ Similar a controles de Windows Forms

La lógica de programa para un formulario Web◦ Se almacena en un código subyacente relacionado al archivo con extensión aspx.vb

Una hoja de estilo en cascada (CSS)personaliza la apariencia de un formulario Web

Servidores WebLas aplicaciones web deben ejecutarse mediante un servidor Web◦ Tres opciones están disponibles:

1. El servidor de desarrollo ASP.NET◦ Instalado automáticamente con Visual Studio

2. Internet Information Services (ISS)◦ Una opción con ciertas versiones de Microsoft Windows◦ Requiere configuración de seguridad de cuidado

3. Un servidor Web remoto◦ Normalmente disponible a través de un proveedor de servicios de Internet (ISP) o

un servidor Web corporativa◦ Siempre tiene que tener una cuenta con un nombre de usuario y contraseña

Diseñador HTML y Soporte del navegador WebUn diseñador HTML es una herramienta de Visual Studio que simplifica el diseño de páginas web y formularios Web◦ Genera código fuente HTML y controles Web ASP.NET

◦ Ofrece los siguientes puntos de vista de una página Web:◦ A la vista Diseño similar al editor de formularios de Visual Studio

◦ A la vista Código fuente para la edición directa del código fuente HTML

◦ A la vista dividida que muestra dos vistas en paneles separados

Hay muchas versiones de navegadores Web diferentes en uso◦ ASP.NET detecta y genera versión HTML específica

◦ Siempre deben probar aplicaciones Web en otros navegadores

◦ Chrome, Safari y Firefox son buenas opciones

Tipos de ControlsGrupo descripción

Standard Controles que se utilizan comúnmente en los formularios Web

Data Los controles para la conexión y la visualización de datos

Validation Los controles para validar la entrada del usuario

Navigation Los controles avanzados para la navegación entre páginas Web

Login Controles relacionados con la autenticación de usuarios y contraseñas

WebParts Controles de modificar el contenido, la apariencia y el comportamiento de las páginas Web

AJAX Extensions Los controles que proporcionan experiencias de interfaz ricos

Reporting Contiene Microsoft Report Viewer para la visualización de informes basados en Web

HTML Controles HTML estándar que no generan eventos de usuario

Creación de aplicaciones ASP.NET

Cuadro de diálogo en Sitio Web AbiertoSeleccione Sitio Web Abierto en el menú Archivo cuando se quiere abrir una aplicación web existente

Tipos de Web SitesUn Sitio Web File System es el más adecuado para una red◦ Utiliza servidor de desarrollo ASP.NET

◦ Se suministra con Visual Studio

◦ Fácil de usar, no abierto a ataques de seguridad

ISS local para un servidor Web local◦ Usos de Internet Information Server o IIS

◦ Nivel profesional, extensas funciones de seguridad

◦ Amplia configuración, debe tener derechos de administrador

Sitio FTP se encuentra en un equipo diferente◦ Significa Protocolo de Transferencia de Archivos

◦ Por lo general, en la Internet

◦ Proporciona una forma de copiar archivos de una máquina a otra

Sitio remoto si sitio existente en el servidor remoto◦ ¿Necesitas ID de usuario y contraseña para cargar una aplicación

Creando una aplicación WebHaga clic en Nuevo sitio Web en el menú Archivo

◦ Aparecerá el cuadro de diálogo en el nuevo sitio Web

Creando una aplicación WebEl cuadro de diálogo enumera los posibles plantillas de sitios web

◦ Seleccione el sitio web vacío en la lista de ASP.NET

◦ Elija una carpeta para el proyecto

◦ Si es sistema de archivos, puede optar por utilizar cualquier carpeta de la computadora o red local

◦ Si es HTTP, la aplicación se encuentra en un sitio Web creado por IIS

◦ Si FTP, debe utilizar el sitio Web en el equipo remoto

Cuando se crea, un sitio Web vacío sólo contiene un archivo denominado Web.config

Apertura de aplicaciones Web existentePara abrir una aplicación web existente

◦ Seleccione proyecto desde la ventana de Proyectos Recientes

Si el proyecto no aparece en Proyectos Recientes haga clic

◦ Sitio web ... link en Proyectos recientes: Open

◦ O haga clic en Sitio Web Abrir en el menú Archivo

Cualquiera de las dos opciones anteriores muestran un cuadro de diálogo presione Abrir Web Site

◦ Navegue a la carpeta que contiene el sitio Web

◦ Haga clic en Abrir

El funcionamiento de un proyecto de aplicación WebSe puede cambiar el navegador por defecto para su proyecto

◦ Haga clic en el nombre del proyecto en el Explorador de soluciones

◦ Seleccione Examinar ... Con el menú contextual

Para ejecutar la aplicación Web

◦ Haga clic en Ejecutar sin depurar en el menú DEBUG

Formularios Web permiten a las constantes llamadas de texto estático

◦ No hay control de etiqueta requerida como una forma de Windows

El funcionamiento de un proyecto de aplicación WebDebe configurar un proyecto con la capacidad de depuración

◦ Un cuadro de mensaje aparece cuando primero se ejecuta un proyecto en modo de depuración

◦ Al hacer clic en Aceptar la opción de archivo Web.config permite la depuración que se añade

Controles de un Web Server

Controles de un Web ServerASP.NET es dinámico e interactivoTrabaja como HTML pero mucho más flexible◦ Clase basada en propiedades, métodos, eventos

◦ Al igual que en los controles de formularios de Windows, por lo que es fácil para los programadores de VB aprender

Controles Web utilizados con frecuencia:

Button ImageButton LinkButton

Label RadioButton RadioButtonList*

TextBox CheckBoxList* ListBox

CheckBox Image Calendar

DropDownList

* Los observados con asterisco no tienen forma de Windows equivalente

Controles de un Web ServerWeb controls-tienen propiedades similares a las de los controles de formulario de Windows incluyendo

◦ Texto, Habilitado, Visible, Font, ReadOnly, y así sucesivamente.

Hay algunas diferencias importantes

◦ Propiedad de control de Windows- tiene el mismo nombre que la propiedad ID de controles Web

◦ Controles Web tienen una propiedad AutoPostBack

◦ Controles Web pierden las propiedades de ejecución cuando el usuario se aleja de esa página

◦ Debe guardar el estado de conservar las propiedades de ejecución

¿Cómo los Web Controls se procesan?Funciones ASP.NET diferente de HTML

El servidor Web ejecuta el código VB encontrado detrás de la página Web ASP.NET

Cuando un navegador solicita una página Web .aspx

◦ Server lee / interpreta controles Web en la página

◦ Las declaraciones de VB en el archivo de código subyacente son ejecutados

◦ La página Web de etiquetas HTML estándar y los controles creados con .aspxcontroles Web y código VB

◦ La página Web HTML envia de vuelta al navegador

Los Label y Text ControlsEtiqueta de control muestra los datos del programa

◦ Utilice únicamente si el texto etiqueta cambiará en tiempo de ejecución

◦ Si el texto no cambia, es establecido como texto estático

Control TextBox tiene entrada de texto por el usuario

◦ Propiedad TextMode puede ser:◦ SingleLine: permite que una sola línea de entrada

◦ MultiLine: permite múltiples líneas de entrada

◦ Password: caracteres escritos aparecen como asteriscos

Hacer frente a los problemas de compatibilidad del navegador usando:

◦ Columnas de propiedad para controlar el ancho del TextBox

◦ Filas propiedad para especificar la entrada de varias líneas

Control CheckBoxFunciones de manera casi idéntica a CheckBox en formularios de Windows

◦ Propiedad Text establece texto visible para el usuario

◦ Evaluar propiedad Checked en tiempo de ejecución para determinar si el control es verificado por el usuario

◦ TextAlign permite texto de la posición

Gestión de eventos en Web FormsLos eventos disparan de manera diferente en los formularios Web

◦ Evento Page_Load se dispara cada vez que una página se muestra en lugar de sólo la primera vez

◦ Incendios Page_Load ante otros eventos como TextChanged

Pulse con el ratón en un control con la propiedad AutoPostBack establecido en true que envía el formulario de vuelta al servidor

◦ Útil si el servidor debe reaccionar a un clic del ratón, como seleccionar un elemento de un cuadro de lista

◦ Se produce de forma automática para Button, LinkButton y controles ImageButton

Control HyperLinkProporciona un enlace para ir a otra página◦ Propiedad Text especifica el texto mostrado para el enlace

◦ Propiedad NavigateURL sostiene URL de destino

◦ Propiedad Target determina si se abre una nueva ventana del navegador para mostrar la nueva página

◦ Igualarán a _blank para abrir una ventana independiente

ImageButton, LinkButton, y el RadioButtonListImageButton ofrece una imagen que se puede hacer clic◦ Genera un evento click

◦ Propiedad ImageURL especifica la ruta a la imagen

LinkButton comporta como un hipervínculo, pero genera un evento de clicRadioButtonList en un grupo de botones de radio◦ Funciones similares a un ListBox

◦ Tiene SelectedIndex y SelectedValue propiedades

El Control ListBoxMuy similar al control ListBox de Windows◦ Tiene una colección de artículos

◦ Tiene las propiedades ListBox SelectedIndex, selectedItem y SelectedValue

◦ Propiedad SelectionMode especifica si varios elementos de lista se pueden seleccionar

Manejo de eventos SelectedIndexChanged◦ Debe establecer AutoPostBack true si este evento debe disparar inmediatamente después de una

selección de usuario

◦ Si no es así, desencadena el evento sólo después de otros causas de control forman para ser publicado de nuevo al servidor

CheckBoxList y el DropDownListControl CheckBoxList parece grupo de casillas de verificación, pero funciona como un ListBox◦ Tiene una colección de artículos

◦ Tiene las propiedades ListBox SelectedIndex, selectedItem y SelectedValue

◦ Cada elemento tiene una propiedad seleccionada de Bool

DropDownList similar a ComboBox excepto:◦ Valor inicial de SelectedIndex siempre cero por lo que el primer elemento siempre se

muestra

◦ Debe seleccionar el elemento de la lista, no puede de entrada clave

Diseño de formularios Web

Uso de tablas para alinear el texto y ControlesHerramienta esencial en el diseño de formularios Web

Crea una cuadrícula de filas y columnas

Texto y controles colocados dentro de las células de la cuadrícula◦ Texto y controles permisos para estar alineados

◦ Alineado por la derecha o la izquierda justificación en cada columna

Columnas en blanco se pueden utilizar para el espaciamiento

Haga clic en Insertar tabla en el menú Tabla cuadro de diálogo e Insertar tabla para mostrar

Ejemplo de Insertar Tabla Cuadro de diálogo

Ajuste alto de fila y ancho de columna

Haga clic y arrastre para ajustar la altura de fila o el ancho de columna

Insertar filas o columnas con Insertar en el menú Tabla

Puede fijar la celula inmueble para centro, izquierda o derecha

Las células adyacentes se pueden combinar entre sí◦ Arrastra el cursor sobre las células que se fusionó◦ Seleccione Combinar celdas de menú en el diseño

Las aplicaciones con múltiples páginas web

Agregar nuevos formularios Web a un proyectoDos maneras de agregar un nuevo formulario Web para un proyecto◦ Seleccione Agregar nuevo elemento de menú Sitio Web

◦ Haga clic con el proyecto en el Explorador de soluciones y seleccione Agregar nuevo elemento

De sobre cualquier muestra la ventana Agregar nuevo elemento◦ Seleccione Web en el Icono Formulario

◦ Escriba el nombre de la página

◦ Asegúrese que el código este en archivo separado verificado

Adición de un formulario Web a un proyecto

Moviendoce entre páginasPara permitir al usuario moverse entre las páginas:◦ Especifique la URL de la página de destino en propiedad NavigateURL de un control

HyperLink

◦ Utilice el método Response.Redirect en evento click de un botón, ImageButton o LinkButton

◦ Utilice el botón de hipervínculo en la barra de herramientas de formato para convertir texto estático en un hipervínculo

Llamando al Response.RedirectPermite programador mostrar otra página Web utilizando el código en un controlador de eventos click

Trasladado a la página Web utilizando Page_two.aspx:

URL completa necesaria para mostrar una página en otro servidor :

Response.Redirect("Page_two.aspx")

Response.Redirect("http://microsoft.com")

Usando bases de datos

Formularios Web a base de datosLa Web constituye el acceso de base de datos que difiere de la utilizada para las formas de Windows

Conjunto de datos no se utiliza

Control de origen de datos utilizado en lugar

Bases de datos Access utilizan el control AccessDataSource

Bases de datos SQL Server utilizan el control SqlDataSource

DataSource controla la base de datos y la actualización directamente

Ningún método de actualización requerido como con un conjunto de datos

GridView- Configuración de la conexión de base de datosOpción de origen de datos en el menú Tareas de GridView permite la conexión de base de datos que desea configurar◦ Copie el archivo de base de datos a la carpeta App_Data

◦ Seleccione origen de datos, el uso de bases de datos

◦ Seleccione el archivo de base de datos de la carpeta App_Data

◦ Configure Select para la consulta SQL

◦ Si consulta requiere varias tablas, debe crear SQL personalizado utilizando QueryBuilder

◦ Coloca un control de origen de datos en el formulario Web

El uso de un control DetailView modificar filas de tablaSe encuentra en la sección de datos de la ventana de la caja de herramientas

GridView sólo muestra las tablas de bases de datos

DetailsView se puede utilizar para ver, editar, eliminar o añadir filas a una tabla de base de datos

Conecte a la fuente de datos al igual que con GridView

Le permite crear un programa de actualización eficaz sin necesidad de escribir código

SQL Queries Inside the SqlDataSourceControlPara ver cómo se representa un SqlDataSource en código HTML, haga clic en la ficha Origen de la página Default.aspx y buscar la sqlDataSourceControl◦ El código siguiente muestra el principio del código que define la MembersDataSource

◦ Una definición de la cadena de conexión:

◦ La propiedad DeleteCommand:

◦ La propiedad InsertCommand:

<asp:SqlDataSource ID="MembersDataSource" runat="server"

ConnectionString="<%$ ConnectionStrings:karateConnectionString %>"

DeleteCommand="DELETE FROM [Members] WHERE [ID] = @ID"

InsertCommand="INSERT INTO [Members] ([ID], [Last_Name],

[First_Name], [Phone], [Date_Joined]) VALUES (@ID, @Last_Name,

@First_Name, @Phone, @Date_Joined)"