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

Rick Anderson

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

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

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

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

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

  • Кликните правой клавишей мышки по папке Views, а затем нажмите Add > New Folder и назовите папку HelloWorld.
  • Кликните правой клавишей мышки по папке Views/HelloWorld, а затем нажмите Add > New Item.
  • В диалоговом окне Add New Item - MvcMovie:
    • В поле поиска сверху справа введите view
    • Нажмите MVC View Page
    • В поле Name оставьте Index.cshtml
    • Нажмите Add
../../_images/add_view.png

Замените контекст Razor файла Views/HelloWorld/Index.cshtml следующим:

@{
    ViewData["Title"] = "Index";
}

<h2>Index</h2>

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

Перейдите по http://localhost:xxxx/HelloWorld. Метод Index в HelloWorldController просто запустил return View();, то есть, метод должен использовать шаблон представления, чтобы отобразить ответ в браузере. Поскольку вы не указали имя файла шаблона представления напрямую, MVC использует Index.cshtml из папки /Views/HelloWorld.

../../_images/hell_template.png

Если окно браузера маленькое (например, на мобильном устройстве), вам потребуется кнопка перехода Bootstrap, чтобы увидеть ссылки Home, About и Contact.

../../_images/1.png

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

Нажмите на ссылки меню (MvcMovie, Home, About). На каждой странице представлена та же самая верстка. Верстка реализуется в файле Views/Shared/_Layout.cshtml. Откройте этот файл.

Шаблоны Layout позволяют указать HTML верстку сайта в одном месте, а затем применять ее на разных страницах вашего сайта. Найдите строку @RenderBody(). RenderBody - это заменитель, где расположены созданные вами страницы представления, “обернутые” версткой. Например, если вы выбираете ссылку About, внутри метода RenderBody отображается представление Views/Home/About.cshtml.

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

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

Контроллеры отвечают за предоставление данных и объектов, которые нужны представлению для отображения ответа браузеру. Лучшая практика: Представление никогда не должно касаться бизнес логики или напрямую взаимодействовать с БД. Вместо этого представление должно работать только с теми данными, которые ему передает контроллер. Придерживаясь этого “принципа разделения ответственности”, вы создаете более чистый, лучше тестируемый и хорошо поддерживаемый код.

На данный момент метод Welcome класса HelloWorldController принимает параметры name и ID, а затем выдает значения напрямую браузеру. Давайте сделаем так, чтобы контроллер использовал шаблон представлений. Представление будет генерировать динамический ответ, а это обозначает, что контроллера должен будет передать соответствующие биты данных представлению, чтобы сгенерировать ответ. То есть, контроллер вставляет динамические данные (параметры) в словарь ViewData, и шаблон представления получает к ним доступ.

Вернитесь в файл HelloWorldController.cs и измените метод Welcome так, чтобы он добавлял значения Message и NumTimes в словарь ViewData. ViewData - это динамический объект, то есть, вы можете вставлять в него, что захотите; у объекта ViewData нет определенных свойств, пока вы что-нибудь туда не вставите. Система связывания моделей MVC автоматически связывает именованные параметры (name и numTimes) из строки запроса в адресной строке с параметрами метода. Файл HelloWorldController.cs выглядит вот так:

using Microsoft.AspNetCore.Mvc;
using System.Text.Encodings.Web;

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

        public IActionResult Welcome(string name, int numTimes = 1)
        {
            ViewData["Message"] = "Hello " + name;
            ViewData["NumTimes"] = numTimes;

            return View();
        }
    }
}

Словарь ViewData содержит данные, которые будут переданы представлению. Далее нам потребуется шаблон Welcome.

  • Кликните правой клавишей мышки по папке Views/HelloWorld, Add > New Item.
  • В диалоговом окне Add New Item - MvcMovie:
    • В поле поиска вверху справа введи view
    • Нажмите MVC View Page
    • В поле Name введите Welcome.cshtml
    • Нажмите Add

В шаблоне Welcome.cshtml отображается “Hello” NumTimes. Замените контекст Views/HelloWorld/Welcome.cshtml следующим:

@{
    ViewData["Title"] = "About";
}

<h2>Welcome</h2>

<ul>
    @for (int i = 0; i < (int)ViewData["NumTimes"]; i++)
    {
        <li>@ViewData["Message"]</li>
    }
</ul>

Сохраните изменения и перейдите по этому URL:

http://localhost:xxxx/HelloWorld/Welcome?name=Rick&numtimes=4

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

../../_images/rick1.png

В примере выше мы использовали словарь ViewData, чтобы передавать данные из контроллера представлению. Однако подход с использованием модели более предпочтителен, чем подход с использованием словаря ViewData.

Поделись хорошей новостью с друзьями!
Следи за новостями!