Практика по ресурсу metanit.
Content – > Site.css
Изменим содержание на следующее
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
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; } |
Также изменим файл Layout следующим образом
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>@ViewBag.Title</title> <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> // << added css </head> <body> <nav> <ul class="menu"> <li>@Html.ActionLink("Главная", "Index", "Home")</li> </ul> </nav> @RenderBody() </body> </html> |
По сути это шаблон. Есть секция head, body, идет заполнение этого шаблона, и основной контент рисуется в @RenderBody методе, как я понимаю.
И добавим ссылку на этот Layout во всех представлениях, в которых это нужно
1 2 3 |
@{ Layout = "~/Views/Shared/_Layout.cshtml"; } |
Например, в Index
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
@{ Layout = "~/Views/Shared/_Layout.cshtml"; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Авто магазин</title> </head> <body> <div> <h3>Распродажа автомобилей</h3> <table> <tr> <td><p>Название</p></td> <td><p>Марка</p></td> <td><p>Цена</p></td> <td></td> </tr> @foreach (var b in ViewBag.Cars) { <tr> <td><p>@b.Name</p></td> <td><p>@b.Brand</p></td> <td><p>@b.Price</p></td> <td><p><a href="/Home/Buy/@b.Id">Купить</a></p></td> <td><p><a href="/Home/Remove/@b.Id">Удалить</a></p></td> </tr> } </table> </div> </body> </html> |
В результате у нас появился пункт меню Главная