El mejor tutorial de ASP.NET MVC y diseño de página en 2024. En este tutorial podrás aprender
Añadir el diseño,HTML ayudante,sintaxis de afeitar,Adición de Estilo,archivo _ViewStart,
ASP.NET MVC y diseño de página
Con el fin de aprender ASP.NET MVC, vamos a construir una aplicación de Internet.
Parte 3: Adición de estilos y apariencia uniforme (diseño).
Añadir el diseño
File _Layout.cshtml representa el diseño de la aplicación de cada página. Se encuentra en las carpetas compartidas de la carpeta Vistas.
Abra el archivo _Layout.cshtml, para reemplazar el contenido de:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>
@ViewBag.Title </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("Home", "Index", "Home") </li>
<li>
@Html.ActionLink("Movies",
"Index", "Movies") </li>
<li>
@Html.ActionLink("About", "About",
"Home") </li>
</ul>
<section id="main">
@RenderBody()
<p>Copyright W3CSchool 2012. All Rights Reserved.</p>
</section>
</body>
</html>
HTML ayudante
En el código anterior, Ayuda HTML se utiliza para modificar la salida HTML:
@ Url.Content () - se insertará aquí contenidos URL.
@ Html.ActionLink () - se insertará aquí enlace HTML.
En un capítulo posterior de este tutorial, aprenderá más sobre el conocimiento asistente de HTML.
sintaxis de afeitar
En el código anterior, el código está marcado en rojo utilizando marcadores Razor C #.
@ ViewBag.Title - se insertará aquí Título de página.
@RenderBody () - Contenido de la página se presenta aquí.
Puede en nuestro tutorial de la maquinilla de afeitar aprender acerca de la maquinilla de afeitar C # y VB (Visual Basic) de la etiqueta.
Adición de Estilo
hoja de estilos aplicación es Site.css, que se encuentra en la carpeta de contenido.
Abra el archivo Site.css, para reemplazar el contenido de:
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;
}
/* Menu Styles
------------------------------*/
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;
/*CSS3
properties*/
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover
{
background-color: #ffffff;
}
/* Forms Styles
------------------------------*/
fieldset
{
padding-left: 12px;
}
fieldset label
{
display: block;
padding: 4px;
}
input[type="text"], input[type="password"]
{
width: 300px;
}
input[type="submit"]
{
padding: 4px;
}
/* Data Styles
------------------------------*/
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;
}
archivo _ViewStart
carpeta compartida (que se encuentra en la carpeta Vistas) en el archivo _ViewStart contiene lo siguiente:
@{Layout = "~/Views/Shared/_Layout.cshtml";}
Este código se añade automáticamente a todas las vistas mostradas por la aplicación.
Si se elimina este archivo, debe agregar esta línea de código a todos los puntos de vista.
En capítulos posteriores de este tutorial, aprenderá más sobre la vista.