Interfaz de usuario y navegación

Artículo
07/13/2023

Descarga del proyecto de ejemplo (C#) Wingtip Toys o Descarga del libro electrónico (PDF)

En esta serie de tutoriales se enseñan los conceptos básicos de la compilación de una aplicación ASP.NET Web Forms mediante ASP.NET 4.5 y Microsoft Visual Studio Express 2013 para Web. Como acompañamiento a esta serie de tutoriales, hay disponible un proyecto con código fuente de C# de Visual Studio 2013.

En este tutorial, modificará la interfaz de usuario de la aplicación web predeterminada para admitir características de la aplicación de la tienda Wingtip Toys. Además, agregará navegación sencilla y enlazada a datos. Este tutorial se basa en el tutorial anterior "Creación de la capa de acceso a datos" y forma parte de la serie de tutoriales de Wingtip Toys.

Temas que se abordarán:

Cómo cambiar la interfaz de usuario para admitir características de la aplicación de la tienda Wingtip Toys.
Cómo configurar un elemento HTML5 para incluir la navegación de páginas.
Cómo crear un control impulsado por datos para navegar a datos específicos del producto.
Cómo mostrar datos de una base de datos creada mediante Entity Framework Code First.

ASP.NET Web Forms le permite crear contenido dinámico para la aplicación web. Cada página web de ASP.NET se crea de forma similar a una página web HTML estática (una página que no incluye el procesamiento basado en servidor), pero la página web de ASP.NET incluye elementos adicionales que ASP.NET reconoce y procesa para generar HTML cuando se ejecuta la página.

Con una página HTML estática (archivo .htm o .html), el servidor cumple una solicitud Web leyendo el archivo y enviándolo tal como está al explorador. Por el contrario, cuando alguien solicita una página web de ASP.NET (archivo .aspx), la página se ejecuta como un programa en el servidor web. Mientras se ejecuta la página, puede realizar cualquier tarea que requiera el sitio web, incluido el cálculo de valores, la lectura o escritura de información de la base de datos, o la llamada a otros programas. Como resultado, la página genera dinámicamente el marcado (como elementos en HTML) y envía este resultado dinámico al explorador.

Modificación de la interfaz de usuario

Continuará esta serie de tutoriales modificando la página Default.aspx. Modificará la interfaz de usuario que ya está establecida por la plantilla predeterminada que se usa para crear la aplicación. El tipo de modificaciones que hará son típicos al crear cualquier aplicación de Web Forms. Para ello, cambie el título, reemplace contenido y quite contenido predeterminado innecesario.

Abra o cambie a la página Default.aspx.
Si la página aparece en la vista Diseño, cambie a la vista Origen.
En la parte superior de la página de la directiva @Page, cambie el atributo Title a "Welcome" (Bienvenidos), como se muestra resaltado en amarillo a continuación.
```
<%@ Page Title="Welcome" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WingtipToys._Default" %>
```

Además, en la página Default.aspx, reemplace todo el contenido predeterminado incluido en la etiqueta <asp:Content> para que el marcado aparezca como se muestra a continuación.

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
        <h1><%: Title %>.</h1>
        <h2>Wingtip Toys can help you find the perfect gift.</h2>
        <p class="lead">We're all about transportation toys. You can order 
                any of our toys today. Each toy listing has detailed 
                information to help you choose the right toy.</p>
</asp:Content>

Guarde la página Default.aspx seleccionando Guardar Default.aspx en el menú Archivo.

La página Default.aspx resultante aparecerá de la siguiente manera:

<%@ Page Title="Welcome" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WingtipToys._Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
        <h1><%: Title %>.</h1>
        <h2>Wingtip Toys can help you find the perfect gift.</h2>
        <p class="lead">We're all about transportation toys. You can order 
                any of our toys today. Each toy listing has detailed 
                information to help you choose the right toy.</p>
</asp:Content>

En el ejemplo, ha establecido el atributo Title de la directiva @Page. Cuando el código HTML se muestra en un explorador, el código del servidor <%: Page.Title %> representa el contenido descrito en el atributo Title.

La página de ejemplo incluye los elementos básicos que constituyen una página web de ASP.NET. La página contiene texto estático como el que podría tener una página HTML, junto con elementos específicos de ASP.NET. El contenido incluido en la página Default.aspx se integrará con el contenido de la página maestra, que se explicará más adelante en este tutorial.

Directiva @Page

ASP.NET Web Forms normalmente contiene directivas que permiten especificar las propiedades de página y la información de configuración de la página. Las directivas se usan en ASP.NET como instrucciones para procesar la página, pero no se representan como parte del marcado que se envía al explorador.

La directiva más usada es la directiva @Page, que permite especificar muchas opciones de configuración para la página, entre las que se incluyen:

El lenguaje de programación del servidor para el código de la página, como C#.
Si la página es una página con código de servidor directamente en la página, que se denomina página de un solo archivo, o si es una página con código en un archivo de clase independiente, que se denomina página de código subyacente.
Si la página tiene una página maestra asociada y, por tanto, debe tratarse como una página de contenido.
Opciones de depuración y seguimiento.

Si no incluye una directiva @Page en la página o si la directiva no incluye una configuración específica, se heredará un valor del archivo de configuración Web.config o del archivo de configuración Machine.config. El archivo Machine.config proporciona opciones de configuración adicionales para todas las aplicaciones que se ejecutan en una máquina.

Nota:

Machine.config también proporciona detalles sobre todas las opciones de configuración posibles.

Controles de servidor web

En la mayoría de aplicaciones de ASP.NET Web Forms, agregará controles que permiten al usuario interactuar con la página, como botones, cuadros de texto, listas, etc. Estos controles de servidor web son similares a los botones HTML y los elementos de entrada. Sin embargo, se procesan en el servidor, lo que le permite usar código de servidor para establecer sus propiedades. Estos controles también generan eventos que puede controlar en el código del servidor.

Los controles de servidor usan una sintaxis especial que ASP.NET reconoce cuando se ejecuta la página. El nombre de etiqueta de los controles de servidor ASP.NET comienza con el prefijo asp:. Esto permite que ASP.NET reconozca y procese estos controles de servidor. El prefijo puede ser diferente si el control no forma parte de .NET Framework. Además del prefijo asp:, los controles de servidor ASP.NET también incluyen el atributo runat="server" y un ID que puede usar para hacer referencia al control en el código del servidor.

Cuando se ejecuta la página, ASP.NET identifica los controles de servidor y ejecuta el código asociado a esos controles. Muchos controles representan código HTML u otro marcado en la página cuando se muestra en un explorador.

Código de servidor

La mayoría de aplicaciones de ASP.NET Web Forms incluyen código que se ejecuta en el servidor cuando se procesa la página. Como se mencionó anteriormente, el código de servidor se puede usar para realizar una variedad de acciones, como agregar datos a un control ListView. ASP.NET admite muchos lenguajes para ejecutarse en el servidor, como C#, Visual Basic, J#, etc.

ASP.NET admite dos modelos para escribir código de servidor para una página web. En el modelo de archivo único, el código de la página se encuentra en un elemento de script donde la etiqueta de apertura incluye el atributo runat="server". Como alternativa, puede crear el código de la página en un archivo de clase independiente, lo que se conoce como modelo de código subyacente. En este caso, la página de ASP.NET Web Forms normalmente no contiene código de servidor. En su lugar, la directiva @Page incluye información que vincula la página .aspx con su archivo de código subyacente asociado.

El atributo CodeBehind incluido en la directiva @Page especifica el nombre del archivo de clase independiente y el atributo Inherits especifica el nombre de la clase dentro del archivo de código subyacente que corresponde a la página.

Actualización de la página maestra

En ASP.NET Web Forms, las páginas maestro permiten crear un diseño coherente de las páginas en la aplicación. Una sola página maestro define la apariencia y el comportamiento estándar que desea para todas las páginas (o un grupo de páginas) en su aplicación. A continuación, puede crear páginas de contenido individuales que contengan el contenido que quiere mostrar, como se explicó anteriormente. Cuando los usuarios solicitan las páginas de contenido, ASP.NET las combina con la página maestra para producir un resultado que combine el diseño de la página maestra con el contenido de la página de contenido.

El nuevo sitio necesita un solo logotipo que se mostrará en cada página. Para agregar este logotipo, puede modificar el código HTML en la página maestra.

En el Explorador de soluciones, busque y abra la página Site.Master .
Si la página está en la vista Diseño, cambie a la vista Origen.

Actualice la página maestra modificando o agregando el marcado resaltado en amarillo:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WingtipToys.SiteMaster" %>

<!DOCTYPE html>

<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%: Page.Title %> - Wingtip Toys</title>

    <asp:PlaceHolder runat="server">
        <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>
    <webopt:bundlereference runat="server" path="~/Content/css" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

</head>
<body>
    <form runat="server">
        <asp:ScriptManager runat="server">
            <Scripts>
                <%--To learn more about bundling scripts in ScriptManager see https://go.microsoft.com/fwlink/?LinkID=301884 --%>
                <%--Framework Scripts--%>
                <asp:ScriptReference Name="MsAjaxBundle" />
                <asp:ScriptReference Name="jquery" />
                <asp:ScriptReference Name="bootstrap" />
                <asp:ScriptReference Name="respond" />
                <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
                <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
                <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
                <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
                <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
                <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
                <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
                <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
                <asp:ScriptReference Name="WebFormsBundle" />
                <%--Site Scripts--%>
            </Scripts>
        </asp:ScriptManager>

        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" runat="server" href="~/">Wingtip Toys</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a runat="server" href="~/">Home</a></li>
                        <li><a runat="server" href="~/About">About</a></li>
                        <li><a runat="server" href="~/Contact">Contact</a></li>
                    </ul>
                    <asp:LoginView runat="server" ViewStateMode="Disabled">
                        <AnonymousTemplate>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a runat="server" href="~/Account/Register">Register</a></li>
                                <li><a runat="server" href="~/Account/Login">Log in</a></li>
                            </ul>
                        </AnonymousTemplate>
                        <LoggedInTemplate>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a runat="server" href="~/Account/Manage" title="Manage your account">Hello, <%: Context.User.Identity.GetUserName()  %> !</a></li>
                                <li>
                                    <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
                                </li>
                            </ul>
                        </LoggedInTemplate>
                    </asp:LoginView>
                </div>
            </div>
        </div>
        <div id="TitleContent" style="text-align: center">
            <a runat="server" href="~/">
                <asp:Image  ID="Image1" runat="server" ImageUrl="~/Images/logo.jpg" BorderStyle="None" />
            </a>  
            <br />  
        </div>
        <div class="container body-content">
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
            <hr />
            <footer>
                <p>&copy; <%: DateTime.Now.Year %> - Wingtip Toys</p>
            </footer>
        </div>
    </form>
</body>
</html>

Este código HTML mostrará la imagen denominada logo.jpg de la carpeta Images (Imágenes) de la aplicación web, que agregará más adelante. Cuando se muestre una página que usa la página maestra en un explorador, se mostrará el logotipo. Si un usuario hace clic en el logotipo, el usuario volverá a la página Default.aspx. La etiqueta delimitadora HTML <a> ajusta el control del servidor de imágenes y permite que la imagen se incluya como parte del vínculo. El atributo href de la etiqueta delimitadora HTML especifica la raíz "~/" del sitio web como la ubicación del vínculo. De forma predeterminada, la página Default.aspx se muestra cuando el usuario navega a la raíz del sitio web. El control del servidor de Imágenes<asp:Image> incluye propiedades adicionales, como BorderStyle, que se representan como HTML cuando se muestran en un explorador.

Páginas maestras

Una página maestra es un archivo ASP.NET con la extensión .master (por ejemplo, Site.Master) con un diseño predefinido que puede incluir texto estático, elementos HTML y controles de servidor. La página maestra se identifica mediante una directiva especial @Master que reemplaza la directiva @Page que se usa para páginas .aspx normales.

Además de la directiva @Master, la página maestra también contiene todos los elementos HTML de nivel superior de una página, como html, heady form. Por ejemplo, en la página maestra que agregó anteriormente, se usa el código HTML table para el diseño, el elemento img para el logotipo de la empresa y el texto estático y los controles de servidor para controlar la pertenencia común del sitio. Puede usar cualquier código HTML y cualquier elemento ASP.NET como parte de la página maestra.

Además del texto estático y los controles que aparecerán en todas las páginas, la página maestra también incluye uno o varios controles ContentPlaceHolder. Estos controles de marcador de posición definen regiones en las que aparecerá el contenido reemplazable. A su vez, el contenido reemplazable se define en páginas de contenido, como Default.aspx, mediante el control de servidor Content.

Adición de archivos de imagen

La imagen de logotipo a la que se hace referencia anteriormente, junto con todas las imágenes de producto, debe agregarse a la aplicación web para que se puedan ver cuando el proyecto se muestre en un explorador.

Descargar desde el sitio de ejemplos de MSDN:

Introducción a ASP.NET 4.5 Web Forms y Visual Studio 2013: Wingtip Toys (C#)

La descarga incluye recursos en la carpeta WingtipToys-Assets que se usan para crear la aplicación de ejemplo.

Si aún no lo ha hecho, descargue los archivos de ejemplo comprimidos mediante el vínculo anterior del sitio de ejemplos de MSDN.
Una vez descargado, abra el archivo .zip y copie el contenido en una carpeta local del equipo.
Busque y abra la carpeta WingtipToys-Assets.
Arrastre y suelte la carpeta Catalog de su carpeta local a la raíz del proyecto de aplicación web en el Explorador de soluciones de Visual Studio.
A continuación, cree una nueva carpeta denominada Images haciendo clic con el botón derecho en el proyecto WingtipToys en el Explorador de soluciones y seleccionando Agregar ->Nueva carpeta.
Copie el archivo logo.jpg de la carpeta WingtipToys-Assets en el Explorador de archivos a la carpeta Imágenes del proyecto de aplicación web en el Explorador de soluciones de Visual Studio.
Haga clic en la opción Mostrar todos los archivos en la parte superior del Explorador de soluciones para actualizar la lista de archivos si no ve los archivos nuevos.

El Explorador de soluciones ahora muestra los archivos de proyecto actualizados.

Adición de páginas

Antes de agregar navegación a la aplicación web, primero agregará dos páginas nuevas a las que navegará. Más adelante en esta serie de tutoriales, mostrará los productos y los detalles del producto en estas páginas nuevas.

En el Explorador de soluciones, haga clic con el botón derecho en WingtipToys, haga clic en Agregar y, después, en Nuevo elemento.
Se abrirá el cuadro de diálogo Agregar nuevo elemento.
Seleccione el grupo de plantillas Visual C# ->Web de la izquierda. A continuación, seleccione Formulario web con página maestra en la lista central y asígnele el nombre ProductList.aspx.
Seleccione Site.Master para adjuntar la página maestra a la página .aspx recién creada.
Agregue una página adicional denominada ProductDetails.aspx siguiendo estos mismos pasos.

Actualización de Bootstrap

Las plantillas de proyecto de Visual Studio 2013 usan Bootstrap, un marco de diseño y tematización creado por Twitter. Bootstrap usa CSS3 para proporcionar un diseño con capacidad de respuesta, lo que significa que los diseños pueden adaptarse dinámicamente a los diferentes tamaños de las ventanas de los exploradores. También puede usar las características de tematización de Bootstrap para efectuar fácilmente un cambio en el aspecto de la aplicación. De forma predeterminada, la plantilla ASP.NET Web Application de Visual Studio 2013 incluye Bootstrap como un paquete NuGet.

En este tutorial, cambiará la apariencia de la aplicación Wingtip Toys reemplazando los archivos CSS de Bootstrap.

En el Explorador de soluciones, abra la carpeta Content.
Haga clic con el botón derecho en el archivo bootstrap.css y cambie su nombre a bootstrap-original.css.
Cambie el nombre de bootstrap.min.css a bootstrap-original.min.css.
En el Explorador de soluciones, haga clic con el botón derecho en la carpeta Content y seleccione Abrir carpeta en el Explorador de archivos.
Se mostrará el Explorador de archivos. Guardará los archivos CSS de Bootstrap descargados en esta ubicación.
En el navegador, vaya a https://bootswatch.com/3/.
Desplácese por la ventana del explorador hasta que vea el tema Cerulean.
Descargue tanto el archivo bootstrap.css como el archivo bootstrap.min.css en la carpeta Contenido. Use la ruta de acceso a la carpeta de contenido que se muestra en la ventana Explorador de archivos que abrió anteriormente.
En Visual Studio, en la parte superior de Explorador de soluciones, seleccione la opción Mostrar todos los archivos para mostrar los nuevos archivos en la carpeta Content.

Verá los dos nuevos archivos CSS en la carpeta Content, pero observe que el icono situado junto a cada nombre de archivo está atenuado. Esto significa que el archivo aún no se ha agregado al proyecto.
Haga clic con el botón derecho en los archivos bootstrap.css y bootstrap.min.css y seleccione Incluir en proyecto.
Al ejecutar la aplicación Wingtip Toys más adelante en este tutorial, se mostrará la nueva interfaz de usuario.

Nota:

La plantilla ASP.NET Web Application usa el archivo Bundle.config en la raíz del proyecto para almacenar la ruta de acceso de los archivos CSS de Bootstrap.

La navegación predeterminada para cada página de la aplicación se puede modificar cambiando el elemento de lista de navegación desordenado que se encuentra en la página Site.Master.

En el Explorador de soluciones, abra la página Site.Master.

Agregue el vínculo de navegación adicional resaltado en amarillo a la lista desordenada que se muestra a continuación:

<ul class="nav navbar-nav">
    <li><a runat="server" href="~/">Home</a></li>
    <li><a runat="server" href="~/About">About</a></li>
    <li><a runat="server" href="~/Contact">Contact</a></li>
    <li><a runat="server" href="~/ProductList">Products</a></li>
</ul>

Como puede ver en el código HTML anterior, modificó cada elemento de línea <li> que contiene una etiqueta delimitadora <a> con un atributo de vínculo href. Cada href apunta a una página de la aplicación web. En el explorador, cuando un usuario hace clic en uno de estos vínculos (como Products), navegará a la página contenida en href (por ejemplo, ProductList.aspx). Ejecutará la aplicación al final de este tutorial.

Nota:

La virgulilla (~) se usa para especificar que la ruta de acceso href comienza en la raíz del proyecto.

A continuación, agregará un control para mostrar todas las categorías de la base de datos. Cada categoría actuará como un vínculo a la página ProductList.aspx. Cuando un usuario hace clic en un vínculo de categoría en el explorador, navegará a la página de productos y verá solo los productos asociados a la categoría seleccionada.

Usará un control ListView para mostrar todas las categorías contenidas en la base de datos. Para agregar un control ListView a la página maestra:

En la página Site.Master, agregue el siguiente elemento resaltado <div> después del elemento <div> que contiene el código id="TitleContent" que agregó anteriormente:

<div id="TitleContent" style="text-align: center">
            <a runat="server" href="~/">
                <asp:Image  ID="Image1" runat="server" ImageUrl="~/img/logo.jpg" BorderStyle="None" />
            </a>  
            <br />  
        </div>
        <div id="CategoryMenu" style="text-align: center">       
            <asp:ListView ID="categoryList"  
                ItemType="WingtipToys.Models.Category" 
                runat="server"
                SelectMethod="GetCategories" >
                <ItemTemplate>
                    <b style="font-size: large; font-style: normal">
                        <a href="/ProductList.aspx?id=<%#: Item.CategoryID %>">
                        <%#: Item.CategoryName %>
                        </a>
                    </b>
                </ItemTemplate>
                <ItemSeparatorTemplate>  |  </ItemSeparatorTemplate>
            </asp:ListView>
        </div>

Este código mostrará todas las categorías de la base de datos. El control ListView muestra cada nombre de categoría como texto de vínculo e incluye un vínculo a la página ProductList.aspx con un valor de cadena de consulta que contiene el ID de la categoría. Al establecer la propiedad ItemType en el control ListView, la expresión de enlace de datos Item está disponible en el nodo ItemTemplate y el control se vuelve fuertemente tipado. Puede seleccionar los detalles del objeto Item mediante IntelliSense, como especificando CategoryName. Este código se encuentra dentro del contenedor <%#: %> que marca una expresión de enlace de datos. Al agregar (:) al final del prefijo <%#, el resultado de la expresión de enlace de datos está codificado en HTML. Cuando el resultado está codificado en HTML, la aplicación está mejor protegida frente a ataques de inyección de scripts entre sitios (XSS) e inyección HTML.

Nota:

Sugerencia

Al agregar código escribiendo durante el desarrollo, puede estar seguro de que se encuentra un miembro válido de un objeto porque los controles de datos fuertemente tipados muestran los miembros disponibles basados en IntelliSense. IntelliSense ofrece opciones de código adecuadas para el contexto a medida que escribe código, como propiedades, métodos y objetos.

En el paso siguiente, implementará el método GetCategories para recuperar datos.

Vinculación del control de datos a la base de datos

Para poder mostrar datos en el control de datos, debe vincular el control de datos a la base de datos. Para realizar el vínculo, puede modificar el código subyacente del archivo Site.Master.cs.

En el Explorador de soluciones, haga clic con el botón derecho en la página Site.Master y, después, haga clic en Ver código. El archivo Site.Master.cs se abre en el editor.

Cerca del principio del archivo Site.Master.cs, agregue dos espacios de nombres adicionales para que todos los espacios de nombres incluidos aparezcan de la siguiente manera:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Linq;
using WingtipToys.Models;

Agregue el método resaltado GetCategories después del controlador de eventos Page_Load de la siguiente manera:

protected void Page_Load(object sender, EventArgs e)
{

}

public IQueryable<Category> GetCategories()
{
  var _db = new WingtipToys.Models.ProductContext();
  IQueryable<Category> query = _db.Categories;
  return query;
}

El código anterior se ejecuta cuando se carga cualquier página que use la página maestra en el explorador. El control ListView (denominado "categoryList") que agregó anteriormente en este tutorial usa el enlace de modelos para seleccionar datos. En el marcado del control ListView, establezca la propiedad del control SelectMethod en el método GetCategories, que se ha mostrado anteriormente. El control ListView llama al método GetCategories en el momento adecuado del ciclo de vida de la página y enlaza los datos devueltos automáticamente. Obtendrá más información sobre el enlace de datos en el siguiente tutorial.

Ejecución de la aplicación y creación de la base de datos

Anteriormente en esta serie de tutoriales creó una clase de inicializador (denominada "ProductDatabaseInitializer") y especificó esta clase en el archivo global.asax.cs. Entity Framework generará la base de datos cuando la aplicación se ejecute por primera vez porque el método Application_Start contenido en el archivo global.asax.cs llamará a la clase initializer. La clase initializer usará las clases de modelo (Category y Product) que agregó anteriormente en esta serie de tutoriales para crear la base de datos.

En el Explorador de soluciones, haga clic con el botón derecho en la página Default.aspx y seleccione Establecer como página de inicio.
En Visual Studio, presione F5.
Se tardará un poco en configurar todo durante esta primera ejecución.

Al ejecutar la aplicación, la aplicación se compilará y la base de datos denominada wingtiptoys.mdf se creará en la carpeta App_Data. En el explorador, verá un menú de navegación de categorías. Este menú se generó recuperando las categorías de la base de datos. En el siguiente tutorial, implementará la navegación.
Cierre el explorador para detener la aplicación en ejecución.

Revisión de la base de datos

Abra el archivo Web.config y examine la sección Cadena de conexión. Puede ver que el valor AttachDbFilename de la cadena de conexión apunta a DataDirectory para el proyecto de aplicación web. El valor |DataDirectory| es un valor reservado que representa la carpeta App_Data del proyecto. Esta carpeta es donde se encuentra la base de datos que se creó a partir de las clases de entidad.

<connectionStrings>
    <add name="DefaultConnection" 
         connectionString="Data Source=(LocalDb)\MSSQLLocalDB;Initial Catalog=aspnet-WingtipToys-20120302100502;Integrated Security=True"
         providerName="System.Data.SqlClient" />
    <add name="WingtipToys" 
         connectionString="Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\wingtiptoys.mdf;Integrated Security=True"
         providerName="System.Data.SqlClient " />
  </connectionStrings>

Nota:

Si la carpeta App_Data no está visible o si la carpeta está vacía, seleccione el icono Actualizar y, a continuación, el icono Mostrar todos los archivos en la parte superior de la ventana Explorador de soluciones. Es posible que sea necesario expandir el ancho de las ventanas del Explorador de soluciones para mostrar todos los iconos disponibles.

Ahora puede inspeccionar los datos incluidos en el archivo de base de datos de wingtiptoys.mdf mediante la ventana Explorador de servidores.

Expanda la carpeta App_Data. Si la carpeta App_Data no está visible, consulte la nota anterior.
Si el archivo de base de datos de wingtiptoys.mdf no está visible, seleccione el icono Actualizar y, a continuación, el icono Mostrar todos los archivos en la parte superior de la ventana Explorador de soluciones.
Haga clic con el botón derecho en el archivo de base de datos wingtiptoys.mdf y seleccione Abrir.
Se abrirá el Explorador de servidores.
Expanda la carpeta Tablas .
Haga clic con el botón derecho en la tabla Products y seleccione Mostrar datos de tabla.
Se mostrará la tabla Products.
Esta vista le permite ver y modificar los datos de la tabla Products manualmente.
Cierre la ventana de la tabla Products.
En el Explorador de servidores, haga clic con el botón derecho en la tabla Products y seleccione Abrir definición de tabla.
Se muestra el diseño de datos de la tabla Products.
En la pestaña T-SQL verá la instrucción DDL de SQL que se usó para crear la tabla. También puede usar la interfaz de usuario en la pestaña Diseño para modificar el esquema.
En el Explorador de servidores, haga clic con el botón derecho en la base de datos WingtipToys y seleccione Cerrar conexión.
Al desasociar la base de datos de Visual Studio, el esquema de la base de datos podrá modificarse más adelante en esta serie de tutoriales.
Vuelva a Explorador de soluciones seleccionando la pestaña Explorador de soluciones en la parte inferior de la ventana Explorador de servidores.

Resumen

En este tutorial de la serie ha agregado algunas interfaces de usuario básicas, gráficos, páginas y navegación. Además, ejecutó la aplicación web, que creó la base de datos a partir de las clases de datos que agregó en el tutorial anterior. También ha visto el contenido de la tabla Products de la base de datos visualizando directamente la base de datos. En el siguiente tutorial, mostrará los elementos de datos y los detalles de la base de datos.

Recursos adicionales

Introducción a la programación en ASP.NET Web Pages
Información general de controles de servidor web de ASP.NET
Tutorial de CSS

Anterior Siguiente

Compartir a través de

Interfaz de usuario y navegación

Temas que se abordarán:

Modificación de la interfaz de usuario

Directiva @Page

Controles de servidor web

Código de servidor

Actualización de la página maestra

Páginas maestras

Adición de archivos de imagen

Descargar desde el sitio de ejemplos de MSDN:

Adición de páginas

Actualización de Bootstrap

Modificación de la navegación predeterminada

Adición de un control de datos para mostrar datos de navegación

Vinculación del control de datos a la base de datos

Ejecución de la aplicación y creación de la base de datos

Revisión de la base de datos

Resumen

Recursos adicionales

Comentarios

Recursos adicionales