Структура html-страницы.

Подключим стили и js файлы к основному layout файлу (/Areas/Default/Views/Shared/_Layout.cshtml):

<! DOCTYPE html>

< html>

< head>

< meta charset=" utf-8" />

< meta name=" viewport" content=" width=device-width" />

< title> @ViewBag.Title< /title>

@Styles.Render(" ~/Content/css")

@RenderSection(" styles", required: false)

@Scripts.Render(" ~/bundles/modernizr")

< /head>

< body>

< div class=" navbar navbar-fixed-top" >

< div class=" navbar-inner" >

< div class=" container" >

< ul class=" nav nav-pills pull-right" >

@Html.Action(" UserLogin", " Home")

< /ul>

< /div>

< /div>

< /div>

@RenderBody()

@Scripts.Render(" ~/bundles/jquery")

@Scripts.Render(" ~/bundles/bootstrap")

@RenderSection(" scripts", required: false)

< /body>

< /html>

Что здесь происходит:

1. Мы получаем request и по запросу мы определяем маршрут /Default/Home/Index.

2. У данного контроллера/метода есть стандартный View – /Home/Index.cshtml

В начале файла объявляется, что он будет включен в Layout:

@{

ViewBag.Title = " LessonProject";

Layout = " ~/Areas/Default/Views/Shared/_Layout.cshtml";

}

Указанный layout выведет данные с помощью @RenderBody(). Запускаем:

Видно, что body заехал под панель навигации. В нашем файле переопределяем body:

body

{

padding-top: 40px! important;

}

Гораздо лучше.

Так как мы использовали классы для формы bootstap ранее, то регистрация у нас выглядит теперь так:

Поправим выбор даты рождения, добавим классы в @Html.DropDownList() (/Areas/Default/Views/User/Register.cshtml):

…

< div class=" controls" >

@Html.DropDownList(" BirthdateDay", Model.BirthdateDaySelectList, new { @class = " select-day" })

@Html.DropDownList(" BirthdateMonth", Model.BirthdateMonthSelectList, new { @class = " select-month" })

@Html.DropDownList(" BirthdateYear", Model.BirthdateYearSelectList, new { @class = " select-year" })

< /div>

Так как вероятно, мы еще где-то будем использовать эту конструкцию по выбору даты (хотя не факт), то это более общее, чем частное (которое относится именно к регистрации):

.select-day

{

width: 50px;

}

.select-month

{

width: 90px;

}

.select-year

{

width: 70px;

}

Проверяем:

Уиии!