Esta sección presenta el diseño de cada página en la aplicación ASP.NET MVC y cómo configurar el estilo.
Para aprender ASP.NET MVC, crearemos una aplicación de Internet.
Parte 3: agregar estilo y una apariencia unificada (diseño).
El archivo _Layout.cshtml representa el diseño de cada página de la aplicación. Se encuentra en la carpeta Compartida en la carpeta Vistas.
Abra el archivo _Layout.cshtml y reemplace el contenido con:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>@ViewBag.Title </título> <enlace href="@Url.Content("~/Contenido/Site.css") " rel="hoja de estilo" tipo="texto/css" /> <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js") "></script> <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js") "></script> </head> <body> <ul id="menu"> <li>@Html.ActionLink("Inicio", "Índice", "Inicio") </li> <li>@Html.ActionLink("Películas", "Índice", "Películas") </li> <li>@Html.ActionLink("Acerca de", "Acerca de", "Inicio") </li> </ul> <sección id="principal"> @RenderBody() <p>Copyright W3CSchool 2012. Todos los derechos reservados.</p> </section> </body> </html>En el código anterior, el asistente HTML se utiliza para modificar la salida HTML:
@Url.Content(): aquí se insertará el contenido de la URL.
@Html.ActionLink(): aquí se insertará el enlace HTML.
Aprenderá más sobre los asistentes HTML en capítulos posteriores de este tutorial.
En el código anterior, el código marcado en rojo es C# que usa etiquetas Razor.
@ViewBag.Title: el título de la página se insertará aquí.
@RenderBody(): el contenido de la página se representará aquí.
Puede obtener información sobre el marcado de Razor para C# y VB (Visual Basic) en nuestros tutoriales de Razor.
La hoja de estilo de la aplicación es Site.css, ubicada en la carpeta Contenido.
Abra el archivo Site.css y reemplace el contenido con:
cuerpo { fuente: "Trebuchet MS", Verdana, sans-serif; color de fondo: #5c87b2; color: #696969; } h1 { borde inferior: 3px sólido #cc9900; } #main { relleno: 20px; color de fondo: #ffffff; radio de borde: 0 4px 4px 4px; } a { color: #034af3 } /* Estilos de menú --------------------------------- -*/ ul #menu { relleno: 0px; posición: relativo; margen: 0; } ul#menu li { display: inline; ul#menu li a { color de fondo: #e8eef4; decoración de texto: ninguna; altura de línea: 2,8 em; /*Propiedades CSS3*/ radio de borde: 4px 4px 0 0; } ul#menu li a:hover { color de fondo: #ffffff } /* Estilos de formularios - -----------------------*/ conjunto de campos { padding-left: 12px } etiqueta del conjunto de campos { display: block padding: 4px; ; } entrada[tipo="texto"], entrada[tipo="contraseña"] { ancho: 300px } entrada[tipo="enviar"] { relleno: 4px } /* Estilos de datos --------- ----------------------*/ table.data { color de fondo:#ffffff; borde:1px sólido #c3c3c3; colapso del borde:ancho:100; %; } tabla.datos th { color de fondo:#e8eef4; borde:1px sólido #c3c3c3; relleno:3px; } table.data td { borde:1px sólido #c3c3c3;El archivo _ViewStart en la carpeta Compartida (ubicada dentro de la carpeta Vistas) contiene el siguiente contenido:
@{Layout = "~/Views/Shared/_Layout.cshtml";}Este código se agrega automáticamente a todas las vistas que muestra la aplicación.
Si elimina este archivo, debe agregar esta línea de código a todas las vistas.
Aprenderá más sobre las vistas en capítulos posteriores de este tutorial.
La vista ViewStart generalmente existe directamente debajo de la vista Vistas. Por supuesto, también puede haber páginas de visualización ViewStart en otras carpetas (siempre que esta carpeta esté en la carpeta Vistas).