ASP.NET MVC - Estilos y disposición
- Página anterior Carpeta MVC
- Página siguiente Controlador MVC
Para aprender ASP.NET MVC, construiremos una aplicación de Internet.
Parte 3:Agregar estilos y un aspecto uniforme (disposición).
Agregar disposición
El archivo _Layout.cshtml representa la disposición de cada página de la aplicación. Se encuentra en la carpeta Shared dentro de la carpeta Views.
Abra este archivo y reemplace su contenido por:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Título</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/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", "Index", "Inicio")</li>
<li>@Html.ActionLink("Películas", "Index", "Películas")</li>
<li>@Html.ActionLink("Acerca de", "Acerca", "Inicio")</li>
</ul>
<section id="main">
@RenderBody()
<p>Copyright W3school 2012. Todos los Derechos Reservados.</p>
</section>
</body>
</html>
Ayudantes de HTML
En el código anterior, los ayudantes de HTML se utilizan para modificar la salida HTML:
@Url.Content() - Aquí se inserta el contenido de la URL.
@Html.ActionLink() - Aquí se inserta el enlace HTML.
Hablaremos de los ayudantes de HTML en los capítulos posteriores de este tutorial.
Sintaxis de Razor
En el código anterior, el código marcado en rojo es C# utilizando etiquetas Razor.
@ViewBag.Title - Aquí inserta el título de la página.
@RenderBody() - Aquí se presenta el contenido de la página.
Puedes aprender en nuestros Tutoriales RazorAprende C# y VB (Visual Basic) escribiendo etiquetas Razor.
Agregar estilo
La hoja de estilo de la aplicación es Site.css. Se encuentra en la carpeta Content.
Abre el archivo Site.css y reemplaza su contenido con:
body
{
font: "Trebuchet MS", Verdana, sans-serif;
background-color: #5c87b2;
color: #696969;
}
h1
{
border-bottom: 3px solid #cc9900;
font: Georgia, serif;
color: #996600;
}
#main
{
padding: 20px;
background-color: #ffffff;
border-radius: 0 4px 4px 4px;
}
a
{
color: #034af3;
}
/* Estilo del menú ------------------------------*/
ul#menu
{
padding: 0px;
position: relative;
margin: 0;
}
ul#menu li
{
display: inline;
}
ul#menu li a
{
background-color: #e8eef4;
padding: 10px 20px;
text-decoration: none;
line-height: 2.8em;
/* Propiedades de CSS3 */
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover
{
background-color: #ffffff;
}
/* Estilos de formulario ------------------------------*/
fieldset
{
padding-left: 12px;
}
label fieldset
{
display: block;
padding: 4px;
}
input[type="text"], input[type="password"]
{
width: 300px;
}
input[type="submit"]
{
padding: 4px;
}
/* Estilos de datos ------------------------------*/
table.data
{
background-color:#ffffff;
border:1px solid #c3c3c3;
border-collapse:collapse;
width:100%;
}
table.data th
{
background-color:#e8eef4;
border:1px solid #c3c3c3;
padding:3px;
}
table.data td
{
border:1px solid #c3c3c3;
padding:3px;
}
_ViewStart archivo
El archivo _ViewStart en la carpeta Shared (ubicada dentro de la carpeta Views) 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 eliminas este archivo, debes agregar este código a todas las vistas.
Aprenderás más sobre las vistas en capítulos posteriores de este tutorial.
- Página anterior Carpeta MVC
- Página siguiente Controlador MVC
