Tour Guiado ASPNET Usando WebMatrix
Content
Tour Guiado ASP.NET Web Matrix
http://web.archive.org/web/20041213025203/http://www.microsoft.co m/argentina/msdn/capacitacion/tour/introduccion/intro.asp
Primeros Pasos
Introducción
Bienvenido al Tour Guiado ASP.NET Web Matrix El Tour Guiado ASP.NET Web Matrix es un tutorial diseñado para familiarizar rápidamente al desarrollador con la sintaxis, la arquitectura, y el poder del entorno de desarrollo de ASP.NET Web. Éste está planteado paso a paso e incluye comentarios de soporte para facilitar el seguimiento y comprensión de mismo. Así también provee diferentes ejemplos, los que están diseñados para ser cortos y fáciles de entender, ilustrando las características de Web Matrix. A su disposición, también se encuentra un foro de discusión de ASP.NET Web Matrix (localizado en www.asp.net) para esclarecer las dudas que se tengan respecto a este.
¿Qué nivel de experiencia se requiere en el Tour Guiado? Usted debe tener conocimiento sobre la terminología HTML y desarrollo Web en general. Si bien no necesita experiencia previa en ASP.NET, debería estar familiarizado con los conceptos referedidos a las páginas Web interactivas, incluyendo formularios, XML, y acceso a datos.
Principales Herramientas de ASP.NET Web Matrix
La siguiente pantalla muestra a ASP.NET Web Matrix en ejecución y resalta mediante un círculo rojo las distribuciones de las herramientas más importantes con la cuales usted debe familiarizarse.
1
ID Nombre Menu Bar
Descripción
El Menu Bar (Barra de Menú) de ASP.NET Web Matrix, es el área señalada en la parte superior de la ventana principal de ASP.NET Web Matrix directamente a continuación de la barra de título. El Menu Bar incluye un conjunto de títulos de menú, los cuales proveen acceso a opciones compuestas por una colección de ítems u opciones. Los menúes muestran una lista de comandos disponibles para el usuario. Estos son distintos tipos de menúes, incluyendo desplegables, de atajo, y en cascada. Cuando usted apunta al título del menú y hace click con el botón primario del mouse, el mismo es resaltado y la lista de opciones asociada aparece. Cuando mueve el puntero sobre el ítem del menú, el menú sigue el movimiento del puntero, resaltando cada ítem que es pasado por el puntero del mouse. Para seleccionar el comando asociado con el ítem, apunte el ítem y haga click con el botón del mouse. La lista de opciones se cerrará. Usted también accede a la lista de opciones presionando la tecla ALT (o F10) que activa el Menu Bar. Cuando presiona una tecla alfanumérica, mientras mantiene presionada la tecla ALT, o después que la tecla ALT es soltada, el ASP.NET Web Matrix muestra la lista de opciones que corresponde con la tecla de acceso alfanumérica presionada. Note que la correspondencia no es sensible a mayúsculas o minúsculas.
Standard Toolbar
El Standard Toolbar (barra de herramientas estándar) de ASP.NET Web Matrix es el área que se encuentra en la parte superior de la ventana principal, directamente a continuación del Menu Bar.
2
Un toolbar es un panel que contiene un conjunto de controls (controles), diseñado para proveer acceso rápido y directo a específicos comandos u opciones. Usted puede acceder a los controls incluidos en el toolbar usando mouse o teclas de acceso.
Toolbox
El Toolbox (caja de herramientas) es el área mostrada en la parte izquierda de la ventana principal de ASP.NET Web Matrix, directamente a continuación de la ventana Document (Documento). Los ítems disponibles del Toolbox cambian dependiendo de la página de diseños que se esté usando. Un toolbox es un panel que contiene un conjunto de controls y herramientas que usted usa mientras diseña su aplicación Web. Cada conjunto de controls y herramientas es funcionalmente organizada en solapas separadas dentro del Toolbox. Usted puede seleccionar y arrastrar ítems, texto, y controles del Toolbox en formularios, páginas, y diseñadores, y arrastrar ítems de ese origen, al Toolbox para ser usado después. Por ejemplo, usted puede arrastrar un control Button de la solapa HTML a una página Web, o seleccionar y arrastrar fragmentos de código de la ventana Document y almacenarlo en la solapa My Snippets.
Document Window
El Document Window (Ventana Documento) de ASP.NET Web Matrix es el área que se encuentra en el medio de la ventana principal, entre el Toolbox y el Workspace, y el Properties Windows. El Document Window se crea en forma dinámica cuando usted abre o crea un archivo. La lista de los documentos abiertos aparece en el menú Windows, con la última ventana, listada primero. El Document Window tiene una interfaz de solapa, que le proporciona un punto de simple acceso para cuatro vistas diferentes de archivo: Design, HTML, Code y All (fusión de las solapas HTML y Code). Estas vistas (solapas) están en el Document Windows y cambian dependiendo de que la página de diseño se esté usando.
Workspace Window
El Workspace Window (Espacio de Trabajo) de ASP.NET Web Matrix es el área resaltada en la parte superior derecha de la ventana principal, directamente a continuación del Properties Window. El Workspace Window provee una organización de vistas a los archivos del sistema y a los archivos abiertos, asi como también un acceso listo a MSDE y al almacén de datos SQL. El Workspace Window sirve para navegar y abrir archivos ASP.NET Web Matrix. También se puede utilizar para conectarse con MSDE y SQL Server, manipular datos, y mantener tablas y procedimientos almacenados.
Properties Window
El Properties Window (Ventana de Propiedades) de ASP.NET Web Matrix es el área que se indica en la parte inferior derecha de la ventana principal , directamente a continuación del Workspace Window. Las propiedades definen el estado, comportamiento y apariencia de la Página ASP.NET, de documentos o controles. La mayoría de los controles gráficos contienen propiedades que pueden ser cambiadas para definir su apariencia
3
visual. Controles, documentos, y páginas ASP.NET pueden exponer también, propiedades que especifican cómo van a interactuar con el usuario y la información que necesitan para operar en tiempo de ejecución. El Properties Window muestra diferentes tipos de campos de edición, dependiendo de la necesidad particular de la propiedad. Estos campos de edición incluyen cajas de edición, listas desplegables, y links a cuadros de diálogo de edición personalizados. Las propiedades mostradas grisadas son solo de lectura.
Con el Properties Window se pueden ver y cambiar las propiedades en tiempo
de diseño y tambien los eventos de los objetos seleccionados que están localizados en editores y diseñadores. También es útil para ver y buscar los Assemblies .NET o acceder a la Comunidad online para buscar ayuda.
Crear una nueva página ASP.NET
En esta serie de pasos usted va a crear una nueva página ASP.NET, y para ello debe seguir los siguientes pasos: a. Abra Microsoft ASP.NET Web Matrix, y verá aparecer el cuadro de dialogo New File. b. Seleccione (General) del panel Templates. c. Seleccione la plantilla ASP.NET Page. d. Teclee la ruta de archivo (path) en el cuadro Location. e. Teclee myFirstPage.aspx en el cuadro Filename. f. Seleccione Visual Basic en el cuadro desplegable Language. g. Haga click en OK.
h. El archivo myFirstPage.aspx se abrirá en la vista Design y estará listo para editar.
4
Construir una página "hello world" ASP.NET
Con los pasos que se detallan a continuación, usted podrá crear una página simple "hello world" ASP.NET. Para ello tendrá que añadir a la página ASP.NET que creó en la sección anterior, tres controles server básicos y luego tendrá que agregar una línea de código para poder acceder a ellos y modificarlos en el servidor. a. De la solapa Web Controls en el Toolbox (sobre la mano izquierda de la herramienta), arrastre un control Label, un control TextBox y un control Button sobre la página ASP.NET. Entre las colocaciones de cada control, presione la tecla Enter.
5
b. Seleccione la solapa HTML, ubicada debajo del Document Window, para ver el HTML que ASP.NET Web Matrix generó, como resultado de las tres operaciones anteriores. Usted puede modificar el contenido de la página html, usando la solapa de diseño gráfico (similar como lo hizo en el paso anterior) o directamente editando el contenido con la solapa HTML o la solapa All.
<html> <head> </head> <body> <form runat="server"> <p> <asp:Label id="Label1" runat="server">Label </asp:Label> </p> <p> <asp:TextBox id="TextBox1" runat="server"> </asp:TextBox> </p> <p> <asp:Button id="Button1" onclick="Button1_Click" runat="server" Text="Button"> </asp:Button> </p> </form>
6
</body> </html>
c. Seleccione la solapa Design y haga doble click en el control Button. ASP.NET Web Matrix automáticamente generará un método que manipula el evento ASP.NET del lado del servidor (llamado "Button1_Click"), para el evento click del control Button. Así mismo abre la página en vista Code. d. Añada el código que se muestra a continuación en rojo, al método Button1_Click para actualizar la propiedad Text del control Label.Esto permite que se despliegue un mensaje de bienvenida personalizado, usando el valor introducido en el TextBox:
Sub Button1_Click(sender As Object, e As EventArgs) Label1.Text = "Hello " & TextBox1.Text & " welcome to the ASP.NET Web Matrix Project!" End Sub
e. Opcionalmente, seleccione la solapa All para ver todo el contenido de la página ASP.NET. Esto incluye ambas secciones de la página, html y código, y proporciona una vista conveniente que permite ver el código/contenido entero de la página:
<%@ Page Language="VB" %> <script runat="server"> Sub Button1_Click(sender As Object, e As EventArgs) Label1.Text = "Hello, " & TextBox1.Text & "! Welcome to the ASP.NET Web Matrix Project" End Sub </script> <html> <body> <form runat="server"> <p> <asp:Label id="Label1" runat="server">Label
7
</asp:Label> </p> <p> <asp:TextBox id="TextBox1" runat="server"> </asp:TextBox> </p> <p> <asp:Button id="Button1" onclick="Button1_Click" runat="server" Text="Button"> </asp:Button> </p> </form> </body> </html>
Ya termino de construir una página simple "hello world" ASP.NET. En la siguiente sección encontrará una serie de pasos para ejecutar la página en un web server.
Ejecutar páginas con el Web Server incorporado
ASP.NET Web Matrix soporta múltiples opciones de Web Server deployment para alojar y probar una aplicación ASP.NET; incluyendo elASP.NET Web Matrix Web Server, Microsoft Internet Information Server (IIS), y proveedores remotos de ISP Hosting. Con las siguientes instrucciones, usted grabará y ejecutará la página ASP.NET que desarrolló en la sección anterior, usando el incorporado ASP.NET Web Matrix Web Server. Este simple servidor web se instala automáticamente con ASP.NET Web Matrix y no requiere ningún otro servidor web instalado en su máquina (ideal para escenarios de desarrollo rápido). Para ejecutar su página, usando el ASP.NET Web Matrix Web Server, siga los pasos a continuación: a. Grabe la página ASP.NET. Hay dos formas de grabar un archivo en el entorno de desarrollo de ASP.NET Web Matrix: 1. Seleccionando Save del menú File.
8
2. Haciendo click en el botón Save File sobre el Standard toolbar.
b. Ejecute la página ASP.NET. Hay tres formas de ejecutar una página en el entorno de desarrollo de ASP.NET Web Matrix: 1. Seleccionando Start en el menú View.
2. Haciendo click en el botón Start sobre el Standard toolbar.
3. Presionando la tecla F5. Este atajo ocasiona que la página se ejecute.
9
c. Seleccionando cualquiera de las formas anteriormente citadas se abrirá el cuadro de diálogo Start Web Application:
Hay dos opciones en el cuadro de diálogo Start Web Application: Use ASP.NET Web Matrix Server: Esta opción sirve para alojar la aplicación web usando el servidor web ya incorporado, que viene con ASP.NET Web Matrix. Note que el ASP.NET Web Matrix Server soporta solo peticiones browser locales, por razones de seguridad. De esta manera, usted no podrá navegar ninguna página remotamente. Use a new IIS Virtual Root: Esta opción permite alojar la aplicación web usando el servidor web Microsoft IIS. Note que esta opción es discutida más adelante en el Tour Guiado. d. Haga click en la opción Use ASP.NET Web Matrix Server y teclee 8080 en el cuadro Application Port. e. Haga click en el botón Start.
10
f. El ASP.NET Web Matrix Server se va iniciar y aparecerá, un ícono en el system tray (bandeja de sistema).
Nota: El cuadro de diálogo Start Web Application y el ícono system tray ASP.NET Web Matrix Server de notificación, aparecen la primera vez que usted ejecuta la página. En las subsecuentes ejecuciones de página, ASP.NET Web Matrix va usar el Web Server que ha sido especificado la primera vez que se ejecutó la página. ASP.NET Web Matrix no va preguntar por el Web Server nuevamente, hasta que cierre y reabra el entorno de desarrollo de ASP.NET Web Matrix y ejecute la página otra vez, o pare manualmente y arranque el ASP.NET Web Matrix Server. g. Dado que la página ASP.NET que desarrolló en la sección anterior no aparecerá automáticamente en una nueva instancia de su Web browser, teclee un nombre en el TextBox y haga click en el Button. El nombre aparecerá en el Label con el mensaje de bienvenida.
11
h. Cierre la instancia del Web browser. Añadir un Enriquecido Web Controls Calendar A continuación, usted añadirá un control server ASP.NET más avanzado (el control Calendar) para la página que desarrolló en la sección anterior. Para hacer esto, por favor siga los pasos a continuación: a. Abra el archivo myFirstPage.aspx. b. Seleccione la solapa Design para ver la vista en modo diseño. c. De la solapa Web Controls en el Toolbox, arrastre el control Calendar a la página ASP.NET, entre el control TextBox y el controlButton. Nota: El control Calendar muestra un solo mes del calendario, permitiendo al usuario seleccionar fechas y moverse al siguiente o anterior mes. Este control es más avanzado porque usted puede personalizar la apariencia del control Calendar, configurando las propiedades que controlan el estilo de las diferentes partes del control, incluyendo el contenido y el formato. En tiempo de ejecución, esto emite
12
salidas html estándar, asegurando cualquier cliente browser (IE, Netscape, Opera, etc).
d. Seleccione el control Calendar con su mouse. e. Haga click en el link Auto Format en la parte inferior de la ventana Properties (abajo, a mano izquierda de la herramienta).
13
f. El cuadro de diálogo Calendar Auto Format aparecerá. Este cuadro de diálogo permite que seleccione, de un conjunto predefinido de colores, estilos de borde y otras configuraciones (referido como scheme (esquéma)) y aplicar éstos al control Calendar.
g. Seleccione la opción Simple en el scheme ListBox. Cuando se selecciona un esquema, las configuraciones del mismo son aplicadas a las propiedades del control. Note que la vista previa del Calendar mostrará el esquema aplicado.
14
h. Haga click en OK para seleccionar el esquema "Simple". i. Seleccione la solapa HTML para mostrar la página en vista HTML. Nota: El diseño de esquema del control Calendar es persistente, así como el conjunto de propiedades HTML configuradas. Estas propiedades se pueden actualizar manualmente en futuras personalizaciones de estilo de los controles. También se pueden intercambiar la solapa diseño, y usar la grilla para modificar individualmente esas propiedades. <asp:Calendar id="Calendar1" runat="server" BackColor="White" Width="200px" DayNameFormat="FirstLetter" ForeColor="Black" Height="180px" FontSize="8pt" Font-Names="Verdana" BorderColor="#999999" CellPadding="4"> <TodayDayStyle forecolor="Black" backcolor="#CCCCCC"> </TodayDayStyle> <SelectorStyle backcolor="#CCCCCC"> </SelectorStyle>
15
<NextPrevStyle verticalalign="Bottom"> </NextPrevStyle> <DayHeaderStyle font-size="7pt" font-bold="True" backcolor="#CCCCCC"> </DayHeaderStyle> <SelectedDayStyle font-bold="True" forecolor="White" backcolor="#666666"> </SelectedDayStyle> <TitleStyle font-bold="True" bordercolor="Black" backcolor="#999999"></TitleStyle> <WeekendDayStyle backcolor="#FFFFCC"> </WeekendDayStyle> <OtherMonthDayStyle forecolor="Gray"> </OtherMonthDayStyle> </asp:Calendar> j. Seleccione la solapa Design y haga doble click en el control Button. ASP.NET Web Matrix abrirá la vista Code con el método Button1_Click. k. Actualice el código del método Button1_Click para que el control Label incluya la fecha seleccionada en el control Calendar: l. Sub Button1_Click(sender As Object, e As EventArgs) m. Label1.Text = "Hello " & TextBox1.Text & " you selected: " &
16
Calendar1.SelectedDate End Sub n. Guarde y ejecute la página, usando el botón start o presionando F5. o. Su página ASP.NET aparecerá automáticamente en una nueva instancia de su Web browser. Note que, el Calendar ahora implementará la opción de formato esquema Simple. Haga click en una fecha sobre el Calendar, teclee un nombre en el TextBox y haga click en el Button. El nombre y la fecha aparecerán en el mensaje de bienvenida en el Label.
Nota: El ASP.NET Web Matrix Web Server ya se está ejecutando. Por lo tanto, el cuadro de diálogo Start Web Application no aparecerá ejecutándose. ASP.NET Web Matrix usará el Web Server que fue especificado la primera vez que se ejecutó la página. ASP.NET Web Matrix no preguntará por un específico Web Server hasta que usted cierre y reabra el entorno de desarrollo ASP.NET Web Matrix, y ejecute la página nuevamente o cierre manualmente y reinicie el Web Server.
17
p. Cierre la instancia del Web browser. Ejecutar páginas con IIS web server En esta fase, usted grabará y ejecutará la página ASP.NET que desarrolló en las secciones anteriores, usando un servidor web IIS. Note que debería tener instalado IIS en su máquina para realizar esta serie de pasos. a. Primero cierre el ASP.NET Web Matrix Web Server. Apretando el botón derecho sobre el ícono system tray ASP.NET Web Matrix Web Server (abajo, a mano derecha de su ventana de escritorio) y seleccionando Stop.
b. Re-ejecute la página ASP.NET, presionando el botón start o presionando F5 y aparecerá el cuadro de diálogo Start Web Application
c. Haga click en la opción Use a new IIS Vitual Root. d. Teclee MatrixTour en la caja Application Name. e. No seleccione el check box Enable Directory Browsing (por defecto).
18
f. Haga click en Start. g. ASP.NET Web Matrix creará un Nuevo IIS Virtual Directory llamado MatrixTour y su página ASP.NET aparecerá automáticamente en una nueva instancia de su Web browser. Note que al igual que la opción de Web deployment de ASP.NET Web Matrix, no se muestra el icono system tray o notificación de mensaje, cuando una página es instalada (deployed) vía la opción IIS Web Server. Para modificar la configuración del web server, use la herramienta IIS Administration o quite el directorio virtual que ha creado. Importante: ASP.NET Web Matrix no preguntará para especificar un Web Server nuevamente hasta que usted cierre y reabra el entorno de desarrollo de ASP.NET Web Matrix, volviendo a ejecutar la página. h. Cierre la instancia del Web browser. Usar el Online Control Gallery ASP.NET Web Matrix incluye un puente al ASP.NET Online Server Control Gallery. El control gallery es un directorio de server controls ASP.NET que usted puede usar en sus aplicaciones. Esta galería es frecuentemente actualizada por tanto, es aconsejable revisarla regularmente para encontrar nuevos controles descargados, que puede usar en sus aplicaciones. Siguiendo esta serie de pasos, usted añadirá un Custom control desde el Online Component Gallery para una nueva página ASP.NET. 1. 2. 3. 4. 5. 6. 7. Abra ASP.NET Web Matrix y verá el cuadro de diálogo New File. Seleccione (General) del panel Templates. Seleccione la plantilla ASP.NET Page. Teclee la ruta del archivo en el cuadro Location. Teclee myFirstCustomPage.aspx en el cuadro Filename. Seleccione Visual Basic en la lista desplegable Language. Haga click en OK y el archivo myFirstCustomPage.aspx se abrirá en vista Design.
19
8. Haga click en la solapa Custom Controls del Toolbox, ubicado sobre a la izquierda de la herramienta. 9. Haga click-derecho sobre el Toolbox para añadir un control personalizado. Puede agregar controles personalizados, buscando en la estación de trabajo local o en el Online Component Gallery.
10. Seleccione la opción Add Online Toolbox Components y aparecerá el cuadro de diálogo Component Gallery. El contenido de este cuadro de diálogo es llenado por un XML Web Service que se ejecuta en el website www.asp.net.
20
11. Usted puede buscar componentes en el Online Component Gallery por Category (por defecto) o por Keyword (palabra clave). 12. Seleccione el ítem Data & XML Controls en la lista Categories y se presentará el Data & XML Controls como resultado en la grilla. 13. Seleccione el control XMLEditGrid en la grilla resultado y verá aparecer una descripción. El control XMLEditGrid liga un XML File con un DataGrid.
21
14.
Haga click en Install.
15. ASP.NET Web Matrix le hará una pregunta en la caja de diálogo. Haga click en Yes para instalar en línea el componte en el Global Assembly Cache (GAC).
16. Luego aparecerá el XMLEditGrid en la caja de herramientas Custom Controls. Este server control fue cargado e instalado en su máquina, para permitir su uso en cualquier página ASP.NET.
22
17. Arrastre el control XMLEditGrid en la página ASP.NET, desde la solapa de Custom Controls en el Toolbox,
18. 1. 2. 3. 4. 5.
Cree un Nuevo XML File para ligarlo con el XMLEditGrid: Seleccione New del menú File. Seleccione (General) del panel Templates. Seleccione la plantilla XML File. Teclee la ruta de acceso de archivo en el cuadro Location. Teclee myFirstXMLFile.xml en el cuadro Filename.
Nota: La extensión del archivo de la página ASP.NET es aspx. La extensión del archivo para un XML es xml.
23
6. Haga click en OK y el archivo myFirstXMLFile.xml se abrirá.
7. Agregue un elemento XML y atributos XML para myFirstXMLFile.xml: 8. <?xml version="1.0" encoding="utf-8" ?> 9. <Orders> 10. <Order> 11. <ID>1</ID> 12. <OrderDate>4/23/2002</OrderDate> 13. <CustomerName>Bob Smith</CustomerName> 14. </Order> 15. <Order> 16. <ID>2</ID> 17. <OrderDate>5/12/2002</OrderDate> 18. <CustomerName>Sally Jones</CustomerName> 19. </Order> 20. </Orders> 21. Grabe y cierre el archivo. 19. Seleccione la solapa Design de la página ASP.NET y seleccione el control XMLEditGrid. 20. 21. Seleccione la propiedad XMLFile en la ventana Properties. Coloque la
24
propiedad XMLFile del XMLEditGrid a myFirstXMLFile.xml. Esta propiedad liga el XML File con el XMLEditGrid.
22.
Seleccione el control XMLEditGrid.
23. Haga click en el link Auto Format, en la parte inferior de la ventana Properties.
24. El cuadro de diálogo XMLEditGrid Auto Format aparecerá. Éste permite seleccionar un conjunto predefinido de colores, estilos de borde y otras configuraciones referidas a un esquema y aplicar éstos al control XMLEditGrid. 25. Seleccione la opción Simple 1 en la lista de esquemas y la
25
configuración de éstos se aplicara aplicada a las propiedades del control. Note que la vista previa muestra como se verá el XMLEditGrid con el esquema aplicado. 26. Haga click en OK.
27.
Grabe y ejecute la página ASP.NET.
28. Su página ASP.NET aparecerá automáticamente en una nueva instancia de su Web browser. El XMLEditGrid muestra cada uno de los nodos Order en el archivo myFirstXMLFile.xml.
26
29. 30.
Haga click en el link Add new item. Aparecerá un nuevo registro al final del XMLEditGrid.
31. Teclee 3 en la columna ID, 6/1/2002 en la columna OrderDate , y John Doe en la columna CustomerName. 32. Haga click en el botón Save New Item. Esta operación grabará el contenido de la edición en el archivo XML sobre su web server. Note que esta operación requiere permisos en el web server para escribir un archivo (si no los tiene, ocurrirá una excepción cuando presione el botón grabar). Por defecto las aplicaciones ASP.NET se ejecutan bajo IIS y no tienen permisos para escribir archivos (en este caso se necesita conceder explícitamente a la cuenta "ASPNET", acceso de escritura a archivos).
27
33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50.
Abra el myFirstXMLFile.xml. Verá un Nuevo registro con OrderID de 3 en el XML File: <?xml version="1.0" encoding="utf-8" ?> <Orders> <Order> <ID>1</ID> <OrderDate>4/23/2002</OrderDate> <CustomerName>Bob Smith</CustomerName> </Order> <Order> <ID>2</ID> <OrderDate>5/12/2002</OrderDate> <CustomerName>Sally Jones</CustomerName> </Order> <Order> <ID>3</ID> <OrderDate>6/1/2002</OrderDate> <CustomerName>John Doe</CustomerName>
28
51. </Order> 52. </Orders> 53. Cierre la instancia del Web Browser. Creando una Base de Datos Conectarse a un Servidor de Base de Datos ASP.NET Web Matrix simplifica el desarrollo de aplicaciones de base de datos ASP.NET, incluyendo soporte a Microsoft SQL Server yMSDE (un producto libre y compatible con la base de datos SQL Server) para la administración de la misma dentro del entorno de desarrollo ASP.NET Web Matrix. MSDE está disponible para la instalación libre en http://asp.net/download.aspx o en cualquiera de los siguientes productos:
.NET Framework SDK Office XP Professional Visio 2000
Diseñado para ejecutarse en Segundo plano, MSDE no tiene su propia interfaz de usuario (UI) o herramientas. La interacción con MSDE es a través del entorno de desarrollo de ASP.NET Web Matrix. En esta serie de pasos, usted se conectará a una instalación local del MSDE. Para ello: a. Haga click en la solapa Data de la ventana Workspace. Nota: Si usted tiene componentes SQL instalados localmente, ASP.NET Web Matrix mostrará un data workspace vacío.
29
Nota: Si usted no tiene componentes SQL instalados localmente, ASP.NET Web Matrix mostrará mensajes de información y links en los que usted puede hacer click para descargar e instalar una copia libre de MSDE. Descargue e instale MSDE, si es necesario.
b. Haga click en el botón New Connection sobre el toolbar de la ventana Data.
30
c. El cuadro de diálogo Connect to Database aparecerá. d. Teclee localhost en el cuadro Server (por defecto). e. Haga click en el botón de elección Windows authentication. Nota: Solo si su configuración de SQL Server requiere autentificación, haga click en el botón de elección SQL Server authentication y teclee una credencial SQL Server, válida en los cuadros User name y Password.
31
http://web.archive.org/web/20041213025203/http://www.microsoft.co m/argentina/msdn/capacitacion/tour/introduccion/intro.asp
Primeros Pasos
Introducción
Bienvenido al Tour Guiado ASP.NET Web Matrix El Tour Guiado ASP.NET Web Matrix es un tutorial diseñado para familiarizar rápidamente al desarrollador con la sintaxis, la arquitectura, y el poder del entorno de desarrollo de ASP.NET Web. Éste está planteado paso a paso e incluye comentarios de soporte para facilitar el seguimiento y comprensión de mismo. Así también provee diferentes ejemplos, los que están diseñados para ser cortos y fáciles de entender, ilustrando las características de Web Matrix. A su disposición, también se encuentra un foro de discusión de ASP.NET Web Matrix (localizado en www.asp.net) para esclarecer las dudas que se tengan respecto a este.
¿Qué nivel de experiencia se requiere en el Tour Guiado? Usted debe tener conocimiento sobre la terminología HTML y desarrollo Web en general. Si bien no necesita experiencia previa en ASP.NET, debería estar familiarizado con los conceptos referedidos a las páginas Web interactivas, incluyendo formularios, XML, y acceso a datos.
Principales Herramientas de ASP.NET Web Matrix
La siguiente pantalla muestra a ASP.NET Web Matrix en ejecución y resalta mediante un círculo rojo las distribuciones de las herramientas más importantes con la cuales usted debe familiarizarse.
1
ID Nombre Menu Bar
Descripción
El Menu Bar (Barra de Menú) de ASP.NET Web Matrix, es el área señalada en la parte superior de la ventana principal de ASP.NET Web Matrix directamente a continuación de la barra de título. El Menu Bar incluye un conjunto de títulos de menú, los cuales proveen acceso a opciones compuestas por una colección de ítems u opciones. Los menúes muestran una lista de comandos disponibles para el usuario. Estos son distintos tipos de menúes, incluyendo desplegables, de atajo, y en cascada. Cuando usted apunta al título del menú y hace click con el botón primario del mouse, el mismo es resaltado y la lista de opciones asociada aparece. Cuando mueve el puntero sobre el ítem del menú, el menú sigue el movimiento del puntero, resaltando cada ítem que es pasado por el puntero del mouse. Para seleccionar el comando asociado con el ítem, apunte el ítem y haga click con el botón del mouse. La lista de opciones se cerrará. Usted también accede a la lista de opciones presionando la tecla ALT (o F10) que activa el Menu Bar. Cuando presiona una tecla alfanumérica, mientras mantiene presionada la tecla ALT, o después que la tecla ALT es soltada, el ASP.NET Web Matrix muestra la lista de opciones que corresponde con la tecla de acceso alfanumérica presionada. Note que la correspondencia no es sensible a mayúsculas o minúsculas.
Standard Toolbar
El Standard Toolbar (barra de herramientas estándar) de ASP.NET Web Matrix es el área que se encuentra en la parte superior de la ventana principal, directamente a continuación del Menu Bar.
2
Un toolbar es un panel que contiene un conjunto de controls (controles), diseñado para proveer acceso rápido y directo a específicos comandos u opciones. Usted puede acceder a los controls incluidos en el toolbar usando mouse o teclas de acceso.
Toolbox
El Toolbox (caja de herramientas) es el área mostrada en la parte izquierda de la ventana principal de ASP.NET Web Matrix, directamente a continuación de la ventana Document (Documento). Los ítems disponibles del Toolbox cambian dependiendo de la página de diseños que se esté usando. Un toolbox es un panel que contiene un conjunto de controls y herramientas que usted usa mientras diseña su aplicación Web. Cada conjunto de controls y herramientas es funcionalmente organizada en solapas separadas dentro del Toolbox. Usted puede seleccionar y arrastrar ítems, texto, y controles del Toolbox en formularios, páginas, y diseñadores, y arrastrar ítems de ese origen, al Toolbox para ser usado después. Por ejemplo, usted puede arrastrar un control Button de la solapa HTML a una página Web, o seleccionar y arrastrar fragmentos de código de la ventana Document y almacenarlo en la solapa My Snippets.
Document Window
El Document Window (Ventana Documento) de ASP.NET Web Matrix es el área que se encuentra en el medio de la ventana principal, entre el Toolbox y el Workspace, y el Properties Windows. El Document Window se crea en forma dinámica cuando usted abre o crea un archivo. La lista de los documentos abiertos aparece en el menú Windows, con la última ventana, listada primero. El Document Window tiene una interfaz de solapa, que le proporciona un punto de simple acceso para cuatro vistas diferentes de archivo: Design, HTML, Code y All (fusión de las solapas HTML y Code). Estas vistas (solapas) están en el Document Windows y cambian dependiendo de que la página de diseño se esté usando.
Workspace Window
El Workspace Window (Espacio de Trabajo) de ASP.NET Web Matrix es el área resaltada en la parte superior derecha de la ventana principal, directamente a continuación del Properties Window. El Workspace Window provee una organización de vistas a los archivos del sistema y a los archivos abiertos, asi como también un acceso listo a MSDE y al almacén de datos SQL. El Workspace Window sirve para navegar y abrir archivos ASP.NET Web Matrix. También se puede utilizar para conectarse con MSDE y SQL Server, manipular datos, y mantener tablas y procedimientos almacenados.
Properties Window
El Properties Window (Ventana de Propiedades) de ASP.NET Web Matrix es el área que se indica en la parte inferior derecha de la ventana principal , directamente a continuación del Workspace Window. Las propiedades definen el estado, comportamiento y apariencia de la Página ASP.NET, de documentos o controles. La mayoría de los controles gráficos contienen propiedades que pueden ser cambiadas para definir su apariencia
3
visual. Controles, documentos, y páginas ASP.NET pueden exponer también, propiedades que especifican cómo van a interactuar con el usuario y la información que necesitan para operar en tiempo de ejecución. El Properties Window muestra diferentes tipos de campos de edición, dependiendo de la necesidad particular de la propiedad. Estos campos de edición incluyen cajas de edición, listas desplegables, y links a cuadros de diálogo de edición personalizados. Las propiedades mostradas grisadas son solo de lectura.
Con el Properties Window se pueden ver y cambiar las propiedades en tiempo
de diseño y tambien los eventos de los objetos seleccionados que están localizados en editores y diseñadores. También es útil para ver y buscar los Assemblies .NET o acceder a la Comunidad online para buscar ayuda.
Crear una nueva página ASP.NET
En esta serie de pasos usted va a crear una nueva página ASP.NET, y para ello debe seguir los siguientes pasos: a. Abra Microsoft ASP.NET Web Matrix, y verá aparecer el cuadro de dialogo New File. b. Seleccione (General) del panel Templates. c. Seleccione la plantilla ASP.NET Page. d. Teclee la ruta de archivo (path) en el cuadro Location. e. Teclee myFirstPage.aspx en el cuadro Filename. f. Seleccione Visual Basic en el cuadro desplegable Language. g. Haga click en OK.
h. El archivo myFirstPage.aspx se abrirá en la vista Design y estará listo para editar.
4
Construir una página "hello world" ASP.NET
Con los pasos que se detallan a continuación, usted podrá crear una página simple "hello world" ASP.NET. Para ello tendrá que añadir a la página ASP.NET que creó en la sección anterior, tres controles server básicos y luego tendrá que agregar una línea de código para poder acceder a ellos y modificarlos en el servidor. a. De la solapa Web Controls en el Toolbox (sobre la mano izquierda de la herramienta), arrastre un control Label, un control TextBox y un control Button sobre la página ASP.NET. Entre las colocaciones de cada control, presione la tecla Enter.
5
b. Seleccione la solapa HTML, ubicada debajo del Document Window, para ver el HTML que ASP.NET Web Matrix generó, como resultado de las tres operaciones anteriores. Usted puede modificar el contenido de la página html, usando la solapa de diseño gráfico (similar como lo hizo en el paso anterior) o directamente editando el contenido con la solapa HTML o la solapa All.
<html> <head> </head> <body> <form runat="server"> <p> <asp:Label id="Label1" runat="server">Label </asp:Label> </p> <p> <asp:TextBox id="TextBox1" runat="server"> </asp:TextBox> </p> <p> <asp:Button id="Button1" onclick="Button1_Click" runat="server" Text="Button"> </asp:Button> </p> </form>
6
</body> </html>
c. Seleccione la solapa Design y haga doble click en el control Button. ASP.NET Web Matrix automáticamente generará un método que manipula el evento ASP.NET del lado del servidor (llamado "Button1_Click"), para el evento click del control Button. Así mismo abre la página en vista Code. d. Añada el código que se muestra a continuación en rojo, al método Button1_Click para actualizar la propiedad Text del control Label.Esto permite que se despliegue un mensaje de bienvenida personalizado, usando el valor introducido en el TextBox:
Sub Button1_Click(sender As Object, e As EventArgs) Label1.Text = "Hello " & TextBox1.Text & " welcome to the ASP.NET Web Matrix Project!" End Sub
e. Opcionalmente, seleccione la solapa All para ver todo el contenido de la página ASP.NET. Esto incluye ambas secciones de la página, html y código, y proporciona una vista conveniente que permite ver el código/contenido entero de la página:
<%@ Page Language="VB" %> <script runat="server"> Sub Button1_Click(sender As Object, e As EventArgs) Label1.Text = "Hello, " & TextBox1.Text & "! Welcome to the ASP.NET Web Matrix Project" End Sub </script> <html> <body> <form runat="server"> <p> <asp:Label id="Label1" runat="server">Label
7
</asp:Label> </p> <p> <asp:TextBox id="TextBox1" runat="server"> </asp:TextBox> </p> <p> <asp:Button id="Button1" onclick="Button1_Click" runat="server" Text="Button"> </asp:Button> </p> </form> </body> </html>
Ya termino de construir una página simple "hello world" ASP.NET. En la siguiente sección encontrará una serie de pasos para ejecutar la página en un web server.
Ejecutar páginas con el Web Server incorporado
ASP.NET Web Matrix soporta múltiples opciones de Web Server deployment para alojar y probar una aplicación ASP.NET; incluyendo elASP.NET Web Matrix Web Server, Microsoft Internet Information Server (IIS), y proveedores remotos de ISP Hosting. Con las siguientes instrucciones, usted grabará y ejecutará la página ASP.NET que desarrolló en la sección anterior, usando el incorporado ASP.NET Web Matrix Web Server. Este simple servidor web se instala automáticamente con ASP.NET Web Matrix y no requiere ningún otro servidor web instalado en su máquina (ideal para escenarios de desarrollo rápido). Para ejecutar su página, usando el ASP.NET Web Matrix Web Server, siga los pasos a continuación: a. Grabe la página ASP.NET. Hay dos formas de grabar un archivo en el entorno de desarrollo de ASP.NET Web Matrix: 1. Seleccionando Save del menú File.
8
2. Haciendo click en el botón Save File sobre el Standard toolbar.
b. Ejecute la página ASP.NET. Hay tres formas de ejecutar una página en el entorno de desarrollo de ASP.NET Web Matrix: 1. Seleccionando Start en el menú View.
2. Haciendo click en el botón Start sobre el Standard toolbar.
3. Presionando la tecla F5. Este atajo ocasiona que la página se ejecute.
9
c. Seleccionando cualquiera de las formas anteriormente citadas se abrirá el cuadro de diálogo Start Web Application:
Hay dos opciones en el cuadro de diálogo Start Web Application: Use ASP.NET Web Matrix Server: Esta opción sirve para alojar la aplicación web usando el servidor web ya incorporado, que viene con ASP.NET Web Matrix. Note que el ASP.NET Web Matrix Server soporta solo peticiones browser locales, por razones de seguridad. De esta manera, usted no podrá navegar ninguna página remotamente. Use a new IIS Virtual Root: Esta opción permite alojar la aplicación web usando el servidor web Microsoft IIS. Note que esta opción es discutida más adelante en el Tour Guiado. d. Haga click en la opción Use ASP.NET Web Matrix Server y teclee 8080 en el cuadro Application Port. e. Haga click en el botón Start.
10
f. El ASP.NET Web Matrix Server se va iniciar y aparecerá, un ícono en el system tray (bandeja de sistema).
Nota: El cuadro de diálogo Start Web Application y el ícono system tray ASP.NET Web Matrix Server de notificación, aparecen la primera vez que usted ejecuta la página. En las subsecuentes ejecuciones de página, ASP.NET Web Matrix va usar el Web Server que ha sido especificado la primera vez que se ejecutó la página. ASP.NET Web Matrix no va preguntar por el Web Server nuevamente, hasta que cierre y reabra el entorno de desarrollo de ASP.NET Web Matrix y ejecute la página otra vez, o pare manualmente y arranque el ASP.NET Web Matrix Server. g. Dado que la página ASP.NET que desarrolló en la sección anterior no aparecerá automáticamente en una nueva instancia de su Web browser, teclee un nombre en el TextBox y haga click en el Button. El nombre aparecerá en el Label con el mensaje de bienvenida.
11
h. Cierre la instancia del Web browser. Añadir un Enriquecido Web Controls Calendar A continuación, usted añadirá un control server ASP.NET más avanzado (el control Calendar) para la página que desarrolló en la sección anterior. Para hacer esto, por favor siga los pasos a continuación: a. Abra el archivo myFirstPage.aspx. b. Seleccione la solapa Design para ver la vista en modo diseño. c. De la solapa Web Controls en el Toolbox, arrastre el control Calendar a la página ASP.NET, entre el control TextBox y el controlButton. Nota: El control Calendar muestra un solo mes del calendario, permitiendo al usuario seleccionar fechas y moverse al siguiente o anterior mes. Este control es más avanzado porque usted puede personalizar la apariencia del control Calendar, configurando las propiedades que controlan el estilo de las diferentes partes del control, incluyendo el contenido y el formato. En tiempo de ejecución, esto emite
12
salidas html estándar, asegurando cualquier cliente browser (IE, Netscape, Opera, etc).
d. Seleccione el control Calendar con su mouse. e. Haga click en el link Auto Format en la parte inferior de la ventana Properties (abajo, a mano izquierda de la herramienta).
13
f. El cuadro de diálogo Calendar Auto Format aparecerá. Este cuadro de diálogo permite que seleccione, de un conjunto predefinido de colores, estilos de borde y otras configuraciones (referido como scheme (esquéma)) y aplicar éstos al control Calendar.
g. Seleccione la opción Simple en el scheme ListBox. Cuando se selecciona un esquema, las configuraciones del mismo son aplicadas a las propiedades del control. Note que la vista previa del Calendar mostrará el esquema aplicado.
14
h. Haga click en OK para seleccionar el esquema "Simple". i. Seleccione la solapa HTML para mostrar la página en vista HTML. Nota: El diseño de esquema del control Calendar es persistente, así como el conjunto de propiedades HTML configuradas. Estas propiedades se pueden actualizar manualmente en futuras personalizaciones de estilo de los controles. También se pueden intercambiar la solapa diseño, y usar la grilla para modificar individualmente esas propiedades. <asp:Calendar id="Calendar1" runat="server" BackColor="White" Width="200px" DayNameFormat="FirstLetter" ForeColor="Black" Height="180px" FontSize="8pt" Font-Names="Verdana" BorderColor="#999999" CellPadding="4"> <TodayDayStyle forecolor="Black" backcolor="#CCCCCC"> </TodayDayStyle> <SelectorStyle backcolor="#CCCCCC"> </SelectorStyle>
15
<NextPrevStyle verticalalign="Bottom"> </NextPrevStyle> <DayHeaderStyle font-size="7pt" font-bold="True" backcolor="#CCCCCC"> </DayHeaderStyle> <SelectedDayStyle font-bold="True" forecolor="White" backcolor="#666666"> </SelectedDayStyle> <TitleStyle font-bold="True" bordercolor="Black" backcolor="#999999"></TitleStyle> <WeekendDayStyle backcolor="#FFFFCC"> </WeekendDayStyle> <OtherMonthDayStyle forecolor="Gray"> </OtherMonthDayStyle> </asp:Calendar> j. Seleccione la solapa Design y haga doble click en el control Button. ASP.NET Web Matrix abrirá la vista Code con el método Button1_Click. k. Actualice el código del método Button1_Click para que el control Label incluya la fecha seleccionada en el control Calendar: l. Sub Button1_Click(sender As Object, e As EventArgs) m. Label1.Text = "Hello " & TextBox1.Text & " you selected: " &
16
Calendar1.SelectedDate End Sub n. Guarde y ejecute la página, usando el botón start o presionando F5. o. Su página ASP.NET aparecerá automáticamente en una nueva instancia de su Web browser. Note que, el Calendar ahora implementará la opción de formato esquema Simple. Haga click en una fecha sobre el Calendar, teclee un nombre en el TextBox y haga click en el Button. El nombre y la fecha aparecerán en el mensaje de bienvenida en el Label.
Nota: El ASP.NET Web Matrix Web Server ya se está ejecutando. Por lo tanto, el cuadro de diálogo Start Web Application no aparecerá ejecutándose. ASP.NET Web Matrix usará el Web Server que fue especificado la primera vez que se ejecutó la página. ASP.NET Web Matrix no preguntará por un específico Web Server hasta que usted cierre y reabra el entorno de desarrollo ASP.NET Web Matrix, y ejecute la página nuevamente o cierre manualmente y reinicie el Web Server.
17
p. Cierre la instancia del Web browser. Ejecutar páginas con IIS web server En esta fase, usted grabará y ejecutará la página ASP.NET que desarrolló en las secciones anteriores, usando un servidor web IIS. Note que debería tener instalado IIS en su máquina para realizar esta serie de pasos. a. Primero cierre el ASP.NET Web Matrix Web Server. Apretando el botón derecho sobre el ícono system tray ASP.NET Web Matrix Web Server (abajo, a mano derecha de su ventana de escritorio) y seleccionando Stop.
b. Re-ejecute la página ASP.NET, presionando el botón start o presionando F5 y aparecerá el cuadro de diálogo Start Web Application
c. Haga click en la opción Use a new IIS Vitual Root. d. Teclee MatrixTour en la caja Application Name. e. No seleccione el check box Enable Directory Browsing (por defecto).
18
f. Haga click en Start. g. ASP.NET Web Matrix creará un Nuevo IIS Virtual Directory llamado MatrixTour y su página ASP.NET aparecerá automáticamente en una nueva instancia de su Web browser. Note que al igual que la opción de Web deployment de ASP.NET Web Matrix, no se muestra el icono system tray o notificación de mensaje, cuando una página es instalada (deployed) vía la opción IIS Web Server. Para modificar la configuración del web server, use la herramienta IIS Administration o quite el directorio virtual que ha creado. Importante: ASP.NET Web Matrix no preguntará para especificar un Web Server nuevamente hasta que usted cierre y reabra el entorno de desarrollo de ASP.NET Web Matrix, volviendo a ejecutar la página. h. Cierre la instancia del Web browser. Usar el Online Control Gallery ASP.NET Web Matrix incluye un puente al ASP.NET Online Server Control Gallery. El control gallery es un directorio de server controls ASP.NET que usted puede usar en sus aplicaciones. Esta galería es frecuentemente actualizada por tanto, es aconsejable revisarla regularmente para encontrar nuevos controles descargados, que puede usar en sus aplicaciones. Siguiendo esta serie de pasos, usted añadirá un Custom control desde el Online Component Gallery para una nueva página ASP.NET. 1. 2. 3. 4. 5. 6. 7. Abra ASP.NET Web Matrix y verá el cuadro de diálogo New File. Seleccione (General) del panel Templates. Seleccione la plantilla ASP.NET Page. Teclee la ruta del archivo en el cuadro Location. Teclee myFirstCustomPage.aspx en el cuadro Filename. Seleccione Visual Basic en la lista desplegable Language. Haga click en OK y el archivo myFirstCustomPage.aspx se abrirá en vista Design.
19
8. Haga click en la solapa Custom Controls del Toolbox, ubicado sobre a la izquierda de la herramienta. 9. Haga click-derecho sobre el Toolbox para añadir un control personalizado. Puede agregar controles personalizados, buscando en la estación de trabajo local o en el Online Component Gallery.
10. Seleccione la opción Add Online Toolbox Components y aparecerá el cuadro de diálogo Component Gallery. El contenido de este cuadro de diálogo es llenado por un XML Web Service que se ejecuta en el website www.asp.net.
20
11. Usted puede buscar componentes en el Online Component Gallery por Category (por defecto) o por Keyword (palabra clave). 12. Seleccione el ítem Data & XML Controls en la lista Categories y se presentará el Data & XML Controls como resultado en la grilla. 13. Seleccione el control XMLEditGrid en la grilla resultado y verá aparecer una descripción. El control XMLEditGrid liga un XML File con un DataGrid.
21
14.
Haga click en Install.
15. ASP.NET Web Matrix le hará una pregunta en la caja de diálogo. Haga click en Yes para instalar en línea el componte en el Global Assembly Cache (GAC).
16. Luego aparecerá el XMLEditGrid en la caja de herramientas Custom Controls. Este server control fue cargado e instalado en su máquina, para permitir su uso en cualquier página ASP.NET.
22
17. Arrastre el control XMLEditGrid en la página ASP.NET, desde la solapa de Custom Controls en el Toolbox,
18. 1. 2. 3. 4. 5.
Cree un Nuevo XML File para ligarlo con el XMLEditGrid: Seleccione New del menú File. Seleccione (General) del panel Templates. Seleccione la plantilla XML File. Teclee la ruta de acceso de archivo en el cuadro Location. Teclee myFirstXMLFile.xml en el cuadro Filename.
Nota: La extensión del archivo de la página ASP.NET es aspx. La extensión del archivo para un XML es xml.
23
6. Haga click en OK y el archivo myFirstXMLFile.xml se abrirá.
7. Agregue un elemento XML y atributos XML para myFirstXMLFile.xml: 8. <?xml version="1.0" encoding="utf-8" ?> 9. <Orders> 10. <Order> 11. <ID>1</ID> 12. <OrderDate>4/23/2002</OrderDate> 13. <CustomerName>Bob Smith</CustomerName> 14. </Order> 15. <Order> 16. <ID>2</ID> 17. <OrderDate>5/12/2002</OrderDate> 18. <CustomerName>Sally Jones</CustomerName> 19. </Order> 20. </Orders> 21. Grabe y cierre el archivo. 19. Seleccione la solapa Design de la página ASP.NET y seleccione el control XMLEditGrid. 20. 21. Seleccione la propiedad XMLFile en la ventana Properties. Coloque la
24
propiedad XMLFile del XMLEditGrid a myFirstXMLFile.xml. Esta propiedad liga el XML File con el XMLEditGrid.
22.
Seleccione el control XMLEditGrid.
23. Haga click en el link Auto Format, en la parte inferior de la ventana Properties.
24. El cuadro de diálogo XMLEditGrid Auto Format aparecerá. Éste permite seleccionar un conjunto predefinido de colores, estilos de borde y otras configuraciones referidas a un esquema y aplicar éstos al control XMLEditGrid. 25. Seleccione la opción Simple 1 en la lista de esquemas y la
25
configuración de éstos se aplicara aplicada a las propiedades del control. Note que la vista previa muestra como se verá el XMLEditGrid con el esquema aplicado. 26. Haga click en OK.
27.
Grabe y ejecute la página ASP.NET.
28. Su página ASP.NET aparecerá automáticamente en una nueva instancia de su Web browser. El XMLEditGrid muestra cada uno de los nodos Order en el archivo myFirstXMLFile.xml.
26
29. 30.
Haga click en el link Add new item. Aparecerá un nuevo registro al final del XMLEditGrid.
31. Teclee 3 en la columna ID, 6/1/2002 en la columna OrderDate , y John Doe en la columna CustomerName. 32. Haga click en el botón Save New Item. Esta operación grabará el contenido de la edición en el archivo XML sobre su web server. Note que esta operación requiere permisos en el web server para escribir un archivo (si no los tiene, ocurrirá una excepción cuando presione el botón grabar). Por defecto las aplicaciones ASP.NET se ejecutan bajo IIS y no tienen permisos para escribir archivos (en este caso se necesita conceder explícitamente a la cuenta "ASPNET", acceso de escritura a archivos).
27
33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50.
Abra el myFirstXMLFile.xml. Verá un Nuevo registro con OrderID de 3 en el XML File: <?xml version="1.0" encoding="utf-8" ?> <Orders> <Order> <ID>1</ID> <OrderDate>4/23/2002</OrderDate> <CustomerName>Bob Smith</CustomerName> </Order> <Order> <ID>2</ID> <OrderDate>5/12/2002</OrderDate> <CustomerName>Sally Jones</CustomerName> </Order> <Order> <ID>3</ID> <OrderDate>6/1/2002</OrderDate> <CustomerName>John Doe</CustomerName>
28
51. </Order> 52. </Orders> 53. Cierre la instancia del Web Browser. Creando una Base de Datos Conectarse a un Servidor de Base de Datos ASP.NET Web Matrix simplifica el desarrollo de aplicaciones de base de datos ASP.NET, incluyendo soporte a Microsoft SQL Server yMSDE (un producto libre y compatible con la base de datos SQL Server) para la administración de la misma dentro del entorno de desarrollo ASP.NET Web Matrix. MSDE está disponible para la instalación libre en http://asp.net/download.aspx o en cualquiera de los siguientes productos:
.NET Framework SDK Office XP Professional Visio 2000
Diseñado para ejecutarse en Segundo plano, MSDE no tiene su propia interfaz de usuario (UI) o herramientas. La interacción con MSDE es a través del entorno de desarrollo de ASP.NET Web Matrix. En esta serie de pasos, usted se conectará a una instalación local del MSDE. Para ello: a. Haga click en la solapa Data de la ventana Workspace. Nota: Si usted tiene componentes SQL instalados localmente, ASP.NET Web Matrix mostrará un data workspace vacío.
29
Nota: Si usted no tiene componentes SQL instalados localmente, ASP.NET Web Matrix mostrará mensajes de información y links en los que usted puede hacer click para descargar e instalar una copia libre de MSDE. Descargue e instale MSDE, si es necesario.
b. Haga click en el botón New Connection sobre el toolbar de la ventana Data.
30
c. El cuadro de diálogo Connect to Database aparecerá. d. Teclee localhost en el cuadro Server (por defecto). e. Haga click en el botón de elección Windows authentication. Nota: Solo si su configuración de SQL Server requiere autentificación, haga click en el botón de elección SQL Server authentication y teclee una credencial SQL Server, válida en los cuadros User name y Password.
31
