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

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

Обновленная версия этого учебника доступна здесь с помощью последней версии Visual Studio.An updated version of this tutorial is available here using the latest version of Visual Studio. В новом руководстве используется ASP.NET Core MVC, который предоставляет множество улучшений по сравнению с этим руководством.The new tutorial uses ASP.NET Core MVC, which provides many improvements over this tutorial.

В этом руководстве описывается модель MVC ASP.NET Core с контроллерами и представлениями.This tutorial teaches ASP.NET Core MVC with controllers and views. Страницы Razor — это новая альтернатива в ASP.NET Core 2.0, представляющая собой основанную на страницах модель программирования, которая упрощает и повышает эффективность создания пользовательского веб-интерфейса.Razor Pages is a new alternative in ASP.NET Core 2.0, a page-based programming model that makes building web UI easier and more productive. Рекомендуем вам сначала попробовать изучить руководство по Razor Pages, прежде чем использовать версию для MVC.We recommend you try the Razor Pages tutorial before the MVC version. Руководство по Razor Pages:The Razor Pages tutorial:

  • проще для выполнения;Is easier to follow.
  • охватывает дополнительные возможности;Covers more features.
  • является предпочтительным подходом для разработки новых приложений.Is the preferred approach for new application development.

В этом разделе вы намерены изменить HelloWorldController класс, чтобы использовать представление файлов шаблонов для чистого инкапсуляции процесса создания HTML-ответов клиенту.In this section you're going to modify the HelloWorldController class to use view template files to cleanly encapsulate the process of generating HTML responses to a client.

Вы создадите файл шаблона представления с помощью подсистемы представлений Razor.You'll create a view template file using the Razor view engine. Шаблоны представлений на основе Razor имеют расширение . cshtml и предоставляют элегантный способ создания выходных данных HTML с помощью C#.Razor-based view templates have a .cshtml file extension, and provide an elegant way to create HTML output using C#. Razor уменьшает количество символов и нажатий клавиш, необходимых при написании шаблона представления, и обеспечивает быстрый и жидкий рабочий процесс кодирования.Razor minimizes the number of characters and keystrokes required when writing a view template, and enables a fast, fluid coding workflow.

На данный момент метод Index возвращает строку с сообщением, которое жестко задано в классе контроллера.Currently the Index method returns a string with a message that is hard-coded in the controller class. Измените Index метод, чтобы вызвать метод представления Controllers, как показано в следующем коде:Change the Index method to call the controllers View method, as shown in the following code:

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

IndexПриведенный выше метод использует шаблон представления для создания HTML-ответа браузеру.The Index method above uses a view template to generate an HTML response to the browser. Методы контроллера (также известные как методы действий), например Index приведенный выше метод, обычно возвращают ActionResult (или класс, производный от ActionResult), а не примитивные типы, такие как String.Controller methods (also known as action methods), such as the Index method above, generally return an ActionResult (or a class derived from ActionResult), not primitive types like string.

Щелкните правой кнопкой мыши папку виевс\хелловорлд и выберите Добавить, а затем выберите страницу представления MVC 5 с макетом (Razor).Right click the Views\HelloWorld folder and click Add, then click MVC 5 View Page with Layout (Razor).

В диалоговом окне Указание имени для элемента введите indexи нажмите кнопку ОК.In the Specify Name for Item dialog box, enter Index, and then click OK.

В диалоговом окне Выбор страницы макета примите значение по умолчанию ** _ Layout. cshtml** и нажмите кнопку ОК.In the Select a Layout Page dialog, accept the default _Layout.cshtml and click OK.

В диалоговом окне выше в левой области выбирается папка Views\Shared .In the dialog above, the Views\Shared folder is selected in the left pane. Если файл пользовательского макета был создан в другой папке, можно выбрать его.If you had a custom layout file in another folder, you could select it. Далее в этом руководстве мы поговорим о файле макета.We'll talk about the layout file later in the tutorial

Будет создан файл мвкмовие\виевс\хелловорлд\индекс.кштмл .The MvcMovie\Views\HelloWorld\Index.cshtml file is created.

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

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

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

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

Щелкните правой кнопкой мыши файл index. cshtml и выберите Просмотреть в браузере.Right click the Index.cshtml file and select View in Browser.

PI

Можно также щелкнуть правой кнопкой мыши файл index. cshtml и выбрать пункт Просмотреть в инспектор страниц.You can also right click the Index.cshtml file and select View in Page Inspector. Дополнительные сведения см. в руководстве по инспектор страниц .See the Page Inspector tutorial for more information.

Также можно запустить приложение и перейти к HelloWorld контроллеру ( http://localhost:xxxx/HelloWorld ).Alternatively, run the application and browse to the HelloWorld controller (http://localhost:xxxx/HelloWorld). IndexМетод в вашем контроллере не требует много усилий. он просто выполнил инструкцию return View() , которая указывала, что метод должен использовать файл шаблона представления для отображения ответа в браузере.The Index method in your controller didn't do much work; it simply ran the statement return View(), which specified that the method should use a view template file to render a response to the browser. Так как вы не указали имя используемого файла шаблона представления, ASP.NET MVC по умолчанию использует файл представления index. cshtml в папке \виевс\хелловорлд .Because you didn't explicitly specify the name of the view template file to use, ASP.NET MVC defaulted to using the Index.cshtml view file in the \Views\HelloWorld folder. На рисунке ниже показана строка " Hello из нашего шаблона представления " . жестко запрограммирована в представлении.The image below shows the string "Hello from our View Template!" hard-coded in the view.

Выглядит довольно хорошо.Looks pretty good. Однако обратите внимание, что в заголовке окна браузера отображается «Index-My ASP.NET приложение», а в верхней части страницы — «имя приложения».However, notice that the browser's title bar shows "Index - My ASP.NET Application," and the big link at the top of the page says "Application name." В зависимости от того, насколько мелким будет окно браузера, может потребоваться щелкнуть три полосы в правом верхнем углу, чтобы открыть ссылки Домашняя страница, сведения о контакте, Регистрация и Вход в систему .Depending on how small you make your browser window, you might need to click the three bars in the upper right to see the to the Home, About, Contact, Register and Log in links.

Изменение представлений и страниц макетаChanging Views and Layout Pages

Сначала нужно изменить " ссылку на имя приложения " в верхней части страницы.First, you want to change the "Application name" link at the top of the page. Этот текст является общим для каждой страницы.That text is common to every page. Фактически он реализуется только в одном месте проекта, хотя он отображается на каждой странице приложения.It's actually implemented in only one place in the project, even though it appears on every page in the application. Перейдите в папку /виевс/Шаред в Обозреватель решений и откройте файл * _ Layout. cshtml* .Go to the /Views/Shared folder in Solution Explorer and open the _Layout.cshtml file. Этот файл называется страницей макета и находится в общей папке, используемой всеми остальными страницами.This file is called a layout page and it's in the shared folder that all other pages use.

_LayoutCshtml

С помощью шаблонов макета можно в одном месте задать макет контейнера HTML для всего сайта и затем использовать его на разных страницах сайта.Layout templates allow you to specify the HTML container layout of your site in one place and then apply it across multiple pages in your site. Найдите строку @RenderBody().Find the @RenderBody() line. RenderBody — это заполнитель, в котором отображаются все создаваемые страницы для определенных представлений, "упакованные" на странице макета.RenderBody is a placeholder where all the view-specific pages you create show up, "wrapped" in the layout page. Например, если выбрать ссылку About , представление виевс\хоме\абаут.кштмл будет отображено внутри RenderBody метода.For example, if you select the About link, the Views\Home\About.cshtml view is rendered inside the RenderBody method.

Измените содержимое элемента title.Change the contents of the title element. Измените значение ActionLink в шаблоне макета с " " имя приложения" " на " "ролик" в MVC " и контроллер с Home на Movies .Change the ActionLink in the layout template from "Application name" to "MVC Movie" and the controller from Home to Movies. Полный файл макета приведен ниже.The complete layout file is shown below:

<!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 " .Run the application and notice that it now says "MVC Movie ". Щелкните ссылку About (о программе ), и вы увидите, как на этой странице " также отображается ролик MVC " .Click the About link, and you see how that page shows "MVC Movie", too. Мы смогли внести изменения один раз в шаблон макета и все страницы сайта отражали новый заголовок.We were able to make the change once in the layout template and have all pages on the site reflect the new title.

Когда мы сначала создали файл виевс\хелловорлд\индекс.кштмл , он содержал следующий код:When we first created the Views\HelloWorld\Index.cshtml file, it contained the following code:

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

Приведенный выше код Razor явно задает страницу макета.The Razor code above is explicitly setting the layout page. Изучите файл views \ _ViewStart. cshtml , он содержит точную разметку Razor.Examine the Views\_ViewStart.cshtml file, it contains the exact same Razor markup. Файл views \ _ViewStart. cshtml определяет общий макет, который будет использоваться всеми представлениями, поэтому можно закомментировать или удалить этот код из файла виевс\хелловорлд\индекс.кштмл .The Views\_ViewStart.cshtml file defines the common layout that all views will use, therefore you can comment out or remove that code from the Views\HelloWorld\Index.cshtml file.

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

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

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

Свойство Layout может задавать другое представление макета или иметь значение null, при котором макет не используется.You can use the Layout property to set a different layout view, or set it to null so no layout file will be used.

Теперь изменим заголовок представления индекса.Now, let's change the title of the Index view.

Откройте мвкмовие\виевс\хелловорлд\индекс.кштмл.Open MvcMovie\Views\HelloWorld\Index.cshtml. Изменение состоит из двух мест: первый — текст, отображаемый в заголовке браузера, а затем во вторичном заголовке ( <h2> элемент).There are two places to make a change: first, the text that appears in the title of the browser, and then in the secondary header (the <h2> element). Сделайте их немного разными, чтобы видеть, какой именно фрагмент кода изменяет соответствующую часть приложения.You'll make them slightly different so you can see which bit of code changes which part of the app.

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

<h2>My Movie List</h2>

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

Чтобы указать отображаемый заголовок HTML, приведенный выше код задает Title свойство ViewBag объекта (которое находится в шаблоне представления index. cshtml ).To indicate the HTML title to display, the code above sets a Title property of the ViewBag object (which is in the Index.cshtml view template). Обратите внимание, что шаблон макета ( Views\Shared \ _layout. cshtml ) использует это значение в <title> ЭЛЕМЕНТЕ как часть <head> раздела HTML, который мы изменили ранее.Notice that the layout template ( Views\Shared\_Layout.cshtml ) uses this value in the <title> element as part of the <head> section of the HTML that we modified previously.

<!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 подхода можно легко передавать другие параметры между шаблоном представления и файлом макета.Using this ViewBag approach, you can easily pass other parameters between your view template and your layout file.

Запустите приложение.Run the application. Обратите внимание, что основной и дополнительный заголовки браузера изменились.Notice that the browser title, the primary heading, and the secondary headings have changed. (Если изменения не отображаются, возможно, вы просматриваете кэшированное содержимое.(If you don't see changes in the browser, you might be viewing cached content. Нажмите сочетание клавиш CTRL + F5 в браузере, чтобы принудительно загрузить ответ от сервера.) Заголовок браузера создается с ViewBag.Title заданными в шаблоне представления index. cshtml и дополнительным " приложением-фильмом, " добавленным в файл макета.Press Ctrl+F5 in your browser to force the response from the server to be loaded.) The browser title is created with the ViewBag.Title we set in the Index.cshtml view template and the additional "- Movie App" added in the layout file.

Также обратите внимание, что содержимое в шаблоне представления index. cshtml было объединено с шаблоном представления * _ Layout. cshtml* и в браузер был отправлен один ответ HTML.Also notice how the content in the Index.cshtml view template was merged with the _Layout.cshtml view template and a single HTML response was sent to the browser. С помощью шаблонов макета можно легко вносить изменения, которые применяются ко всем страницам приложения.Layout templates make it really easy to make changes that apply across all of the pages in your application.

Немало " данных " (в данном случае " Hello из нашего шаблона представления! " Message) жестко закодированы.Our little bit of "data" (in this case the "Hello from our View Template!" message) is hard-coded, though. Приложение MVC имеет " V " (представление), и у вас есть " C " (контроллер), но " еще нет M " (модель).The MVC application has a "V" (view) and you've got a "C" (controller), but no "M" (model) yet. Вскоре мы рассмотрим, как создать базу данных и извлечь из нее данные модели.Shortly, we'll walk through how to create a database and retrieve model data from it.

Передача данных из контроллера в представлениеPassing Data from the Controller to the View

Тем не менее, прежде чем перейти к базе данных и поговорить о моделях, давайте сначала поговорим о передаче информации из контроллера в представление.Before we go to a database and talk about models, though, let's first talk about passing information from the controller to a view. Классы контроллеров вызываются в ответ на входящий запрос URL-адреса.Controller classes are invoked in response to an incoming URL request. Класс контроллера — это место написания кода, обрабатывающего входящие запросы браузера, получение данных из базы данных и, в конечном итоге, выбор типа ответа, отправляемого обратно в браузер.A controller class is where you write the code that handles the incoming browser requests, retrieves data from a database, and ultimately decides what type of response to send back to the browser. Шаблоны представлений можно использовать из контроллера для создания и форматирования HTML-ответа в браузере.View templates can then be used from a controller to generate and format an HTML response to the browser.

Контроллеры несут ответственность за предоставление любых данных или объектов, необходимых для отображения шаблона представления в ответ на браузер.Controllers are responsible for providing whatever data or objects are required in order for a view template to render a response to the browser. Рекомендуется: шаблон представления никогда не должен выполнять бизнес-логику или напрямую взаимодействовать с базой данных.A best practice: A view template should never perform business logic or interact with a database directly. Вместо этого шаблон представления должен работать только с данными, предоставленными ему контроллером.Instead, a view template should work only with the data that's provided to it by the controller. Поддержание такого " разделения проблем " помогает обеспечить чистоту, тестирование и удобство сопровождения кода.Maintaining this "separation of concerns" helps keep your code clean, testable and more maintainable.

В настоящее время Welcome метод действия в HelloWorldController классе принимает name и numTimes параметр, а затем выводит значения непосредственно в браузер.Currently, the Welcome action method in the HelloWorldController class takes a name and a numTimes parameter and then outputs the values directly to the browser. Вместо того, чтобы передавать этот ответ контроллером в виде строки, давайте изменим контроллер на использование шаблона представления.Rather than have the controller render this response as a string, let's change the controller to use a view template instead. Шаблон представления создаст динамический ответ, для получения которого необходимо передать соответствующие фрагменты данных из контроллера в представление.The view template will generate a dynamic response, which means that you need to pass appropriate bits of data from the controller to the view in order to generate the response. Для этого контроллер должен разместить динамические данные (параметры), необходимые шаблону представления, в ViewBag объекте, к которому может получить доступ шаблон представления.You can do this by having the controller put the dynamic data (parameters) that the view template needs in a ViewBag object that the view template can then access.

Вернитесь в файл HelloWorldController.CS и измените метод, Welcome чтобы добавить в Message NumTimes объект значение и ViewBag .Return to the HelloWorldController.cs file and change the Welcome method to add a Message and NumTimes value to the ViewBag object. ViewBag — Это динамический объект, который означает, что вы можете поместить в него все необходимое. ViewBag объект не имеет определенных свойств, пока вы не помещаете в него что-либо.ViewBag is a dynamic object, which means you can put whatever you want in to it; the ViewBag object has no defined properties until you put something inside it. Система привязки модели MVC ASP.NET автоматически сопоставляет именованные параметры ( name и numTimes ) из строки запроса в адресной строке с параметрами в методе.The ASP.NET MVC model binding system automatically maps the named parameters (name and numTimes) from the query string in the address bar to parameters in your method. Полный файл HelloWorldController.cs выглядит следующим образом:The complete HelloWorldController.cs file looks like this:

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 объект содержит данные, которые будут автоматически передаваться в представление.Now the ViewBag object contains data that will be passed to the view automatically. Теперь вам нужен шаблон представления приветствия!Next, you need a Welcome view template! В меню Сборка выберите собрать решение (или CTRL + SHIFT + B), чтобы убедиться, что проект скомпилирован.In the Build menu, select Build Solution (or Ctrl+Shift+B) to make sure the project is compiled. Щелкните правой кнопкой мыши папку виевс\хелловорлд и выберите Добавить, а затем выберите страницу представления MVC 5 с макетом (Razor).Right click the Views\HelloWorld folder and click Add, then click MVC 5 View Page with Layout (Razor).

В диалоговом окне Укажите имя для элемента введите Welcomeи нажмите кнопку ОК.In the Specify Name for Item dialog box, enter Welcome, and then click OK.

В диалоговом окне Выбор страницы макета примите значение по умолчанию ** _ Layout. cshtml** и нажмите кнопку ОК.In the Select a Layout Page dialog, accept the default _Layout.cshtml and click OK.

Будет создан файл мвкмовие\виевс\хелловорлд\велкоме.кштмл .The MvcMovie\Views\HelloWorld\Welcome.cshtml file is created.

Замените разметку в файле Welcome. cshtml .Replace the markup in the Welcome.cshtml file. Вы создадите цикл с текстом Hello столько " " раз, сколько говорит пользователь.You'll create a loop that says "Hello" as many times as the user says it should. Полный файл Welcome. cshtml приведен ниже.The complete Welcome.cshtml file is shown below.

@{
    ViewBag.Title = "Welcome";
}

<h2>Welcome</h2>

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

Запустите приложение и перейдите по следующему URL-адресу:Run the application and browse to the following URL:

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

Теперь данные берутся из URL-адреса и передаются контроллеру с помощью связывателя модели.Now data is taken from the URL and passed to the controller using the model binder. Контроллер упаковывает данные в ViewBag объект и передает этот объект в представление.The controller packages the data into a ViewBag object and passes that object to the view. Представление затем отображает данные в виде HTML-кода для пользователя.The view then displays the data as HTML to the user.

В приведенном выше примере мы использовали ViewBag объект для передачи данных из контроллера в представление.In the sample above, we used a ViewBag object to pass data from the controller to a view. Далее в этом руководстве для передачи данных из контроллера в представление мы будем использовать модель представления.Later in the tutorial, we will use a view model to pass data from a controller to a view. Подход модели представления для передачи данных, как правило, является более предпочтительным по сравнению с использованием контейнера представления.The view model approach to passing data is generally much preferred over the view bag approach. Дополнительные сведения см. в записи блога о строго типизированных представлениях Dynamic V .See the blog entry Dynamic V Strongly Typed Views for more information.

Ну, это разновидность " M " для модели, но не тип базы данных.Well, that was a kind of an "M" for model, but not the database kind. Итак, обобщим все полученные данные и попробуем создать базу данных фильмов.Let's take what we've learned and create a database of movies.