Добавление представления

по Рик Андерсон (

Note

Обновленная версия этого учебника доступна здесь с помощью последней версии Visual Studio. В новом руководстве используется ASP.NET Core MVC, который предоставляет множество улучшений по сравнению с этим руководством.

В этом руководстве описывается модель MVC ASP.NET Core с контроллерами и представлениями. Razor Pages — это новая альтернатива в ASP.NET Core, модель программирования на основе страниц, которая упрощает создание пользовательского веб-интерфейса и повышает его производительность. Рекомендуется испытать Razor Pages руководстве до версии MVC. Руководство по Razor Pages:

  • проще для выполнения;
  • охватывает дополнительные возможности;
  • Является предпочтительным подходом для разработки новых приложений.

В этом разделе вы намерены изменить HelloWorldController класс, чтобы использовать представление файлов шаблонов для чистого инкапсуляции процесса создания HTML-ответов клиенту.

Вы создадите файл шаблона представления с помощью подсистемы представлений Razor. Шаблоны представлений на основе Razor имеют расширение . cshtml и предоставляют элегантный способ создания выходных данных HTML с помощью C#. Razor уменьшает количество символов и нажатий клавиш, необходимых при написании шаблона представления, и обеспечивает быстрый и жидкий рабочий процесс кодирования.

На данный момент метод Index возвращает строку с сообщением, которое жестко задано в классе контроллера. Измените Index метод, чтобы вызвать метод представления Controllers, как показано в следующем коде:

public ActionResult Index() 
{ 
    return View(); 
}

IndexПриведенный выше метод использует шаблон представления для создания HTML-ответа браузеру. Методы контроллера (также известные как методы действий), например Index приведенный выше метод, обычно возвращают ActionResult (или класс, производный от ActionResult), а не примитивные типы, такие как String.

Щелкните правой кнопкой мыши папку виевс\хелловорлд и выберите Добавить, а затем выберите страницу представления MVC 5 с макетом (Razor).

В диалоговом окне Указание имени для элемента введите indexи нажмите кнопку ОК.

В диалоговом окне Выбор страницы макета примите значение по умолчанию ** _ Layout. cshtml** и нажмите кнопку ОК.

В диалоговом окне выше в левой области выбирается папка Views\Shared . Если файл пользовательского макета был создан в другой папке, можно выбрать его. Далее в этом руководстве мы поговорим о файле макета.

Будет создан файл мвкмовие\виевс\хелловорлд\индекс.кштмл .

Добавьте следующую выделенную разметку.

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

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>Hello from our View Template!</p>

Щелкните правой кнопкой мыши файл index. cshtml и выберите Просмотреть в браузере.

PI

Можно также щелкнуть правой кнопкой мыши файл index. cshtml и выбрать пункт Просмотреть в инспектор страниц. Дополнительные сведения см. в руководстве по инспектор страниц .

Также можно запустить приложение и перейти к HelloWorld контроллеру ( http://localhost:xxxx/HelloWorld ). IndexМетод в вашем контроллере не требует много усилий. он просто выполнил инструкцию return View() , которая указывала, что метод должен использовать файл шаблона представления для отображения ответа в браузере. Так как вы не указали имя используемого файла шаблона представления, ASP.NET MVC по умолчанию использует файл представления index. cshtml в папке \виевс\хелловорлд . На рисунке ниже показана строка " Hello из нашего шаблона представления " . жестко запрограммирована в представлении.

Выглядит довольно хорошо. Однако обратите внимание, что в заголовке окна браузера отображается «Index-My ASP.NET приложение», а в верхней части страницы — «имя приложения». В зависимости от того, насколько мелким будет окно браузера, может потребоваться щелкнуть три полосы в правом верхнем углу, чтобы открыть ссылки Домашняя страница, сведения о контакте, Регистрация и Вход в систему .

Изменение представлений и страниц макета

Сначала нужно изменить " ссылку на имя приложения " в верхней части страницы. Этот текст является общим для каждой страницы. Фактически он реализуется только в одном месте проекта, хотя он отображается на каждой странице приложения. Перейдите в папку /виевс/Шаред в Обозреватель решений и откройте файл * _ Layout. cshtml* . Этот файл называется страницей макета и находится в общей папке, используемой всеми остальными страницами.

_LayoutCshtml

С помощью шаблонов макета можно в одном месте задать макет контейнера HTML для всего сайта и затем использовать его на разных страницах сайта. Найдите строку @RenderBody(). RenderBody — это заполнитель, в котором отображаются все создаваемые страницы для определенных представлений, "упакованные" на странице макета. Например, если выбрать ссылку About , представление виевс\хоме\абаут.кштмл будет отображено внутри RenderBody метода.

Измените содержимое элемента title. Измените значение ActionLink в шаблоне макета с " " имя приложения" " на " "ролик" в MVC " и контроллер с Home на Movies . Полный файл макета приведен ниже.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Movie App</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("MVC Movie", "Index", "Movies", null, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Запустите приложение и обратите внимание, что теперь он говорит о " ролике MVC " . Щелкните ссылку About (о программе ), и вы увидите, как на этой странице " также отображается ролик MVC " . Мы смогли внести изменения один раз в шаблон макета и все страницы сайта отражали новый заголовок.

Когда мы сначала создали файл виевс\хелловорлд\индекс.кштмл , он содержал следующий код:

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

Приведенный выше код Razor явно задает страницу макета. Изучите файл views \ _ViewStart. cshtml , он содержит точную разметку Razor. Файл views \ _ViewStart. cshtml определяет общий макет, который будет использоваться всеми представлениями, поэтому можно закомментировать или удалить этот код из файла виевс\хелловорлд\индекс.кштмл .

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

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>Hello from our View Template!</p>

Свойство Layout может задавать другое представление макета или иметь значение null, при котором макет не используется.

Теперь изменим заголовок представления индекса.

Откройте мвкмовие\виевс\хелловорлд\индекс.кштмл. Изменение состоит из двух мест: первый — текст, отображаемый в заголовке браузера, а затем во вторичном заголовке ( <h2> элемент). Сделайте их немного разными, чтобы видеть, какой именно фрагмент кода изменяет соответствующую часть приложения.

@{
    ViewBag.Title = "Movie List";
}

<h2>My Movie List</h2>

<p>Hello from our View Template!</p>

Чтобы указать отображаемый заголовок HTML, приведенный выше код задает Title свойство ViewBag объекта (которое находится в шаблоне представления index. cshtml ). Обратите внимание, что шаблон макета ( Views\Shared \ _layout. cshtml ) использует это значение в <title> ЭЛЕМЕНТЕ как часть <head> раздела HTML, который мы изменили ранее.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Movie App</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>

С помощью этого ViewBag подхода можно легко передавать другие параметры между шаблоном представления и файлом макета.

Запустите приложение. Обратите внимание, что основной и дополнительный заголовки браузера изменились. (Если изменения не отображаются, возможно, вы просматриваете кэшированное содержимое. Нажмите сочетание клавиш CTRL + F5 в браузере, чтобы принудительно загрузить ответ от сервера.) Заголовок браузера создается с ViewBag.Title заданными в шаблоне представления index. cshtml и дополнительным " приложением-фильмом, " добавленным в файл макета.

Также обратите внимание, что содержимое в шаблоне представления index. cshtml было объединено с шаблоном представления * _ Layout. cshtml* и в браузер был отправлен один ответ HTML. С помощью шаблонов макета можно легко вносить изменения, которые применяются ко всем страницам приложения.

Немало " данных " (в данном случае " Hello из нашего шаблона представления! " Message) жестко закодированы. Приложение MVC имеет " V " (представление), и у вас есть " C " (контроллер), но " еще нет M " (модель). Вскоре мы рассмотрим, как создать базу данных и извлечь из нее данные модели.

Передача данных из контроллера в представление

Тем не менее, прежде чем перейти к базе данных и поговорить о моделях, давайте сначала поговорим о передаче информации из контроллера в представление. Классы контроллеров вызываются в ответ на входящий запрос URL-адреса. Класс контроллера — это место написания кода, обрабатывающего входящие запросы браузера, получение данных из базы данных и, в конечном итоге, выбор типа ответа, отправляемого обратно в браузер. Шаблоны представлений можно использовать из контроллера для создания и форматирования HTML-ответа в браузере.

Контроллеры несут ответственность за предоставление любых данных или объектов, необходимых для отображения шаблона представления в ответ на браузер. Рекомендуется: шаблон представления никогда не должен выполнять бизнес-логику или напрямую взаимодействовать с базой данных. Вместо этого шаблон представления должен работать только с данными, предоставленными ему контроллером. Поддержание такого " разделения проблем " помогает обеспечить чистоту, тестирование и удобство сопровождения кода.

В настоящее время Welcome метод действия в HelloWorldController классе принимает name и numTimes параметр, а затем выводит значения непосредственно в браузер. Вместо того, чтобы передавать этот ответ контроллером в виде строки, давайте изменим контроллер на использование шаблона представления. Шаблон представления создаст динамический ответ, для получения которого необходимо передать соответствующие фрагменты данных из контроллера в представление. Для этого контроллер должен разместить динамические данные (параметры), необходимые шаблону представления, в ViewBag объекте, к которому может получить доступ шаблон представления.

Вернитесь в файл HelloWorldController.CS и измените метод, Welcome чтобы добавить в Message NumTimes объект значение и ViewBag . ViewBag — Это динамический объект, который означает, что вы можете поместить в него все необходимое. ViewBag объект не имеет определенных свойств, пока вы не помещаете в него что-либо. Система привязки модели MVC ASP.NET автоматически сопоставляет именованные параметры ( name и numTimes ) из строки запроса в адресной строке с параметрами в методе. Полный файл HelloWorldController.cs выглядит следующим образом:

using System.Web;
using System.Web.Mvc;

namespace MvcMovie.Controllers
{
    public class HelloWorldController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Welcome(string name, int numTimes = 1)
        {
            ViewBag.Message = "Hello " + name;
            ViewBag.NumTimes = numTimes;

            return View();
        }
    }
}

Теперь ViewBag объект содержит данные, которые будут автоматически передаваться в представление. Теперь вам нужен шаблон представления приветствия! В меню Сборка выберите собрать решение (или CTRL + SHIFT + B), чтобы убедиться, что проект скомпилирован. Щелкните правой кнопкой мыши папку виевс\хелловорлд и выберите Добавить, а затем выберите страницу представления MVC 5 с макетом (Razor).

В диалоговом окне Укажите имя для элемента введите Welcomeи нажмите кнопку ОК.

В диалоговом окне Выбор страницы макета примите значение по умолчанию ** _ Layout. cshtml** и нажмите кнопку ОК.

Будет создан файл мвкмовие\виевс\хелловорлд\велкоме.кштмл .

Замените разметку в файле Welcome. cshtml . Вы создадите цикл с текстом Hello столько " " раз, сколько говорит пользователь. Полный файл Welcome. cshtml приведен ниже.

@{
    ViewBag.Title = "Welcome";
}

<h2>Welcome</h2>

<ul>
    @for (int i = 0; i < ViewBag.NumTimes; i++)
    {
        <li>@ViewBag.Message</li>
    }
</ul>

Запустите приложение и перейдите по следующему URL-адресу:

http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4

Теперь данные берутся из URL-адреса и передаются контроллеру с помощью связывателя модели. Контроллер упаковывает данные в ViewBag объект и передает этот объект в представление. Представление затем отображает данные в виде HTML-кода для пользователя.

В приведенном выше примере мы использовали ViewBag объект для передачи данных из контроллера в представление. Далее в этом руководстве для передачи данных из контроллера в представление мы будем использовать модель представления. Подход модели представления для передачи данных, как правило, является более предпочтительным по сравнению с использованием контейнера представления. Дополнительные сведения см. в записи блога о строго типизированных представлениях Dynamic V .

Ну, это разновидность " M " для модели, но не тип базы данных. Итак, обобщим все полученные данные и попробуем создать базу данных фильмов.