Стилизация приложения

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core

Последнее обновление: 31.10.2015

Теперь в нашем приложении не хватает одной детали - стилизации. Сделаем какую-нибудь простенькую стилизацию. Для этого нам надо определить файл стилей для нашего приложения. Все файлы стилей принято хранить в папке Content, поэтому вначале добавим в проект папку Content. Для этого нажмем на название проекта правой кнопкой мыши и в появившемся меню выберем Add (Добавить)->New Folder (Новая папка).

Теперь в новую папку добавим файл стилей. Назовем его Site.css. Для этого нажмем правой кнопкой мыши на папку Content и в появившемся меню выберем Add (Добавить)->New Item (Новый элемент). Затем в списке шаблонов найдем шаблон Style Sheet и дадим новому файлу имя Site.css.

Теперь добавим в файл Site.css следующее содержание:

body {
    font-size: 13px;
    font-family: Verdana, Arial, Helvetica, Sans-Serif;
    background-color: #f7f7fa;
    padding-left:40px;
}
  
nav{
    display: block;
}
  
.menu {
    padding-left:10px;
}
.menu ul {
    list-style:none;
}
.menu li {
    display:inline;
}
.menu a:hover {
    color:red;
}
table {
   vertical-align:middle;
   text-align:left; 
 }
.header {
    font-weight:bold;
}
 td {
    padding-right:10px;
 }
input {
    width: 150px;
}

Класс .menu в данном случае будет служить в качестве класса для навигационного меню на сайте.

Теперь мы можем использовать стили. Поскольку наши представления по сути обычные веб-страницы, мы можем как и на любой странице html добавить в секции head ссылки на файл стилей:

<head>
    <meta name="viewport" content="width=device-width" />
    <link  type="text/css" rel="stylesheet" href="../../Content/Site.css" />
</head>

Если в приложении одно представление, или если разные представления используют разные стили и другие ресурсы, то такой подход оправдан. Однако в нашем случае у нас есть два представления, у которых должно быть одно меню и которые должны быть одинаково стилизованы. В этом случае очень удобно использовать мастер-страницы. Мастер-страница задает некий единый шаблон для других использующих его представлений.

Итак, создадим мастер-страницу. По сути это простое представление. Вначале добавим в папку Views проекта новую папку Shared. После этого в папку Shared добавим новое представление. Назовем его _Layout.cshtml:

Добавим в файл _Layout.cshtml следующий текст:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
</head>
 
<body>
    <nav>
        <ul class="menu">
            <li>@Html.ActionLink("Главная", "Index", "Home")</li>
        </ul>
    </nav>
    @RenderBody()
</body>
</html>

Здесь мы использовали другой способ подключения стилей - мы использовали метод Url.Content, в который передали путь к файлу. Оба способа - и этот, и использованный ранее равноправны.

Затем мы создали меню сайта с помощью методов Html.ActionLink, который генерирует элемент-ссылку и принимает название ссылки, метод контроллера и имя контроллера. В конце идет метод RenderBody(), при вызове ресурса в эту часть мастер-страницы и будут подставляться содержимое остальных представлений.

Теперь адаптируем представления к использованию их мастер-страницей. Изменим представление Index.cshtml следующим образом:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
    <div>
        <h3>Распродажа книг</h3>
        <table>
            <tr class="header"><td><p>Название книги</p></td>
                <td><p>Автор</p></td>
                <td><p>Цена</p></td><td></td>
            </tr>
            @foreach (var b in ViewBag.Books)
            {
            <tr>
                <td><p>@b.Name</p></td>
                <td><p>@b.Author</p></td>
                <td><p>@b.Price</p></td>
                <td><p><a href="/Home/Buy/@b.Id">Купить</a></p></td>
            </tr>
            }
        </table>
    </div>

Также изменим представление Buy.cshtml:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 
    <div>
        <h3>Форма оформления покупки</h3>
        <form method="post" action="">
            <input type="hidden" value="@ViewBag.BookId" name="BookId" />
            <table>
                <tr><td><p>Введите свое имя </p></td>
                    <td><input type="text" name="Person" /> </td></tr>
                <tr><td><p>Введите адрес :</p></td><td>
                   <input type="text" name="Address" /> </td></tr>
                <tr><td><input type="submit" value="Отправить" /> </td>
				<td></td></tr>
            </table>
        </form>
    </div>

Сущность изменений состоит в том, что в секции Layout = "~/Views/Shared/_Layout.cshtml"; мы указываем путь к мастер-странице. После этого нам не нужны секции head и body. Запустив приложение, мы увидим, что теперь к нашему сайту применена стилизация:

Стилизация в ASP NET MVC 4

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850