Последние учебники веб-разработки
×

ASP.NET Руководство

ASP.NET ГЛАВНАЯ ASP.NET вступление

WP Руководство

WebPages вступление WebPages бритва WebPages раскладка WebPages Папки WebPages Глобальный WebPages формы WebPages Объекты WebPages файлы WebPages Базы данных WebPages Помощники WebPages WebGrid WebPages Графики WebPages Эл. адрес WebPages PHP WebPages Публиковать WebPages Примеры

WP Рекомендации

WebPages Классы WebPages Безопасность WebPages База данных WebPages WebMail WebPages Помощники

ASP.NET Razor

Razor вступление Razor Синтаксис Razor C# переменные Razor C# Loops Razor C# логика Razor VB переменные Razor VB Loops Razor VB логика

ASP.NET MVC

MVC вступление MVC заявка MVC Папки MVC раскладка MVC Контроллеры MVC Просмотры MVC База данных MVC модель MVC Безопасность MVC HTML Помощники MVC Публиковать MVC Справка

WF Учебники

WebForms вступление WebForms страницы WebForms управления WebForms Мероприятия WebForms формы WebForms ViewState WebForms Текстовое окно WebForms кнопка WebForms Связывание данных WebForms ArrayList WebForms Хеш-таблица WebForms SortedList WebForms XML файлы WebForms повторитель WebForms DataList WebForms DbConnection WebForms Master страницы WebForms навигация WebForms Примеры


 

ASP.NET MVC - Стили и Layout


Чтобы узнать ASP.NET MVC, мы строим Интернет-приложения.

Часть III: Добавление стилей и единообразный вид (Layout) .


Добавление макета

Файл _Layout.cshtml представляет макет каждой страницы в приложении. Он находится в общей папке в папке Views.

Откройте файл и поменять местами содержимое с этим:

<!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 w3ii 2012. All Rights Reserved.</p>
</section>
</body>
</html>

HTML Помощники

В приведенном выше коде HTML хелперов используются для изменения вывода HTML:

@url. Content() - содержание URL будет вставлен здесь.

@Html. ActionLink() - HTML ссылка будет вставлена здесь.

Вы узнаете больше о HTML хелперов в следующей главе данного руководства.


Razor Синтаксис

В приведенном выше коде, код , выделенные красным C # с помощью Razor разметку.

@ ViewBag.Title - заголовок страницы будет вставлен здесь.

@ RenderBody() - Содержание страницы будет оказываться здесь.

Вы можете узнать о Razor разметке как C # и VB (Visual Basic) в нашем Razor учебнике .


Добавление стилей

Таблица стилей для применения называется site.css. Он находится в папке Content.

Откройте файл site.css и поменять местами содержимое с этим:

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;
}

_ViewStart файла

Файл _ViewStart в общей папке (inside the Views folder) содержит следующее содержание:

@{Layout = "~/Views/Shared/_Layout.cshtml";}

Этот код автоматически добавляется ко всем представлениям, отображаемых в приложении.

Если вы удалите этот файл, вы должны добавить эту строку для всех представлений.

Вы узнаете больше о представлениях в следующей главе данного руководства.