![]() Главная страница Случайная страница КАТЕГОРИИ: АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника |
Структура 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; }
Проверяем: Уиии!
|