Представления

Введение в представления

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core

Последнее обновление: 31.10.2015

Хотя работа приложения MVC управляется главным образом контроллерами, но непосредственно пользователю приложение доступно в виде представления, которое и формирует внешний вид приложения. В ASP.NET MVC 5 представления - это файлы с расширением cshtml, которые содержат код пользовательского интерфейса в основном на языке html. Стандартное представление:

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>SomeView</title>
</head>
<body>
    <div>
        <h2>@ViewBag.Message</h2>
    </div>
</body>
</html>

Хотя представление содержит. главным образом, код html, оно не является html-страницей. При компиляции приложения на основе требуемого представления сначала генерируется класс на языке C#, а затем этот класс компилируется. Так, из выше приведенного представления будет генерироваться примерно в такой класс:

#pragma checksum "c:\users\hp\documents\visual studio 2013\Projects\MVC\BookStore\BookStore\Views\Home\SomeView.cshtml" "{ff1816ec-aa5e-4d10-87f7-6f4963833460}" "1F05F4D370C9D00F8CBDFB8BD1F51D74189D0617"

namespace ASP {
    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using System.Net;
    using System.Web;
    using System.Web.Helpers;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.WebPages;
    using System.Web.Mvc;
    using System.Web.Mvc.Ajax;
    using System.Web.Mvc.Html;
    using System.Web.Optimization;
    using System.Web.Routing;
    using BookStore;
    
    public class _Page_Views_Home_SomeView_cshtml : System.Web.Mvc.WebViewPage<dynamic> {
        
#line hidden
        
        public _Page_Views_Home_SomeView_cshtml() {
        }
        
        protected ASP.global_asax ApplicationInstance {
            get {
                return ((ASP.global_asax)(Context.ApplicationInstance));
            }
        }
        
        public override void Execute() {
BeginContext("~/Views/Home/SomeView.cshtml", 0, 2, true);

WriteLiteral("\r\n");

EndContext("~/Views/Home/SomeView.cshtml", 0, 2, true);

            
            #line 2 "c:\users\hp\documents\visual studio 2013\Projects\MVC\BookStore\BookStore\Views\Home\SomeView.cshtml"
  
    Layout = null;

            
            #line default
            #line hidden
BeginContext("~/Views/Home/SomeView.cshtml", 27, 48, true);

WriteLiteral("\r\n\r\n<!DOCTYPE html>\r\n\r\n<html>\r\n<head>\r\n    <meta");

EndContext("~/Views/Home/SomeView.cshtml", 27, 48, true);

BeginContext("~/Views/Home/SomeView.cshtml", 75, 16, true);

WriteLiteral(" name=\"viewport\"");

EndContext("~/Views/Home/SomeView.cshtml", 75, 16, true);

BeginContext("~/Views/Home/SomeView.cshtml", 91, 29, true);

WriteLiteral(" content=\"width=device-width\"");

EndContext("~/Views/Home/SomeView.cshtml", 91, 29, true);

BeginContext("~/Views/Home/SomeView.cshtml", 120, 74, true);

WriteLiteral(" />\r\n    <title>SomeView</title>\r\n</head>\r\n<body>\r\n    <div> \r\n       <h2>");

EndContext("~/Views/Home/SomeView.cshtml", 120, 74, true);

BeginContext("~/Views/Home/SomeView.cshtml", 195, 15, false);

            
            #line 15 "c:\users\hp\documents\visual studio 2013\Projects\MVC\BookStore\BookStore\Views\Home\SomeView.cshtml"
      Write(ViewBag.Message);

            
            #line default
            #line hidden
EndContext("~/Views/Home/SomeView.cshtml", 195, 15, false);

BeginContext("~/Views/Home/SomeView.cshtml", 210, 38, true);

WriteLiteral("</h2> \r\n    </div>\r\n</body>\r\n</html>\r\n");

EndContext("~/Views/Home/SomeView.cshtml", 210, 38, true);

        }
    }
}

Код, конечно, не самый читабельный, особенно если не знать, что делают все эти классы и методы, но здесь мы можем увидеть, что при компиляции создается класс, наследующий от класса System.Web.Mvc.WebViewPage<T>, где T - это класс модели, которая будет использоваться. Но так как представление не строго типизированное, поэтому вместо имени класса модели идет ключевое слово dynamic. Все действия данного класса заключены в методе Execute, в котором с помощью метода WriteLiteral обрабатываются все имеющиеся в представлении элементы разметки html.

Найти сгенерированные из представлений файлы кода можно по пути C:\Users\Имя_Логина\AppData\Local\Temp\Temporary ASP.NET Files\root. Правда, все папки имеют зашифрованные имена, поэтому чтобы определить нужную папку приложения, нужно будет затратить некоторое время на поиск. Кроме того, сами генерируемые файлы кода также имеют зашифрованные имена. Например, выше приведенный класс в моем случае имеет имя App_Web_nri53fza.1.cs и находится в папке root\307f1c1d\a36bbd4f.

Создание нового представления

Для создания нового представления выберем в проекте папку Views и в нем нажмем правой кнопкой на подкаталог Home и в появившемся списке выберем пункт Add - > View... (Представление). В окне добавления нового представления предлагается настроить целый ряд опций:

Создание нового представления в ASP.NET MVC 5

Разберем все эти настройки:

  • View Name: имя нового представления. После создания ему автоматически будет присваиваться расширение cshtml.

  • Template: шаблон нового представления. Мы можем выбрать из следующего списка шаблонов:

    • Типы шаблонов представления

    • Empty (without model): создается пустое представление с начальной разметкой

    • Empty: также создается пустое представление, но теперь ниже мы можем выбрать модель, которая будет подключена в представлении с помощью директивы @model

    • Create: генерируется представление с формой для создания новых объектов модели. В этой форме для каждого свойства модели создается отдельное поле

    • Delete: генерируется представление с формой для удаления объектов модели. В этой форме для каждого свойства модели создается отдельное поле

    • Details: генерируется представление, которое отображает значения всех свойств модели

    • Edit: генерируется представление с формой для редактирования имеющихся объектов модели. В этой форме для каждого свойства модели создается отдельное поле

    • List: создается представление, которое отображает все объекты из списка моделей в виде таблицы. Для генерации списка объектов в данное представление необходимо передавать из метода контроллера значение типа IEnumerable<Тип_модели>. Представление также содержит ссылки на методы для выполнения операций создания/правки/удаления.

  • Model class: при выборе одной из предыдущих опций, кроме опции Empty (without model), нам становится доступно это поле, в котором мы можем указать модель для типизации представления. Такое представление будет считаться строго типизированным, то есть привязанным к одному классу модели

  • Data context class: также при выборе одной из предыдущих опций, кроме опции Empty (without model), нам становится доступно это поле, в котором мы можем выбрать класс контекста данных

  • Create as a partial view: позволяет создать частичное представление

  • Reference Script Libraries: эта опция показывает, будет ли представление автоматически подключать стандартный набор библиотек jQuery и прочих файлов JavaScript.

  • Use a layout page: эта опция указывает, будет ли использоваться мастер-страница или представление будет самодостаточным. После установки этой опции нам станет доступным нижнее поле, в котором можно выбрать мастер-страницу. Для движка Razor указание мастер-страницы не является обязательным, если вы собираетесь использовать мастер-страницу, определенную по умолчанию в файле _ViewStart.cshtml. Однако, если вы хотите переопределить мастер-страницу, то можете воспользоваться этой опцией.

Пути к файлам представлений

Все добавляемые представления, как правило, группируются по контроллерам в соответствующие папки в каталоге Views. Представления, которые относятся к методам контроллера Home, будут находиться в проекте в папке Views/Home. Однако при необходимости мы сами можем создать в каталоге Views папку с произвольным именем, где будем хранить дополнительные представления, необязательно связанные с определенными методами контроллера.

Чтобы произвести рендеринг представления в выходной поток, используется метод View(). Если в этот метод не передается имени представления, то по умолчанию приложение будет работать с тем представлением, имя которого совпадает с именем метода действия. Например, следующий метод действия будет обращаться к представлению Index.cshtml:

public ActionResult Index()
{
    IEnumerable<Book> books = db.Books;
    ViewBag.Books = books;
    return View();
}

Указав путь к представлению явным образом, мы можем переопределить настройки по умолчанию:

public ActionResult Index()
{
    IEnumerable<Book> books = db.Books;
    ViewBag.Books = books;
    return View("~/Views/Some/SomeView.cshtml");
}

Синтаксис Razor

Стандартное представление очень похоже на обычную веб-страницу с кучей кода html. Однако оно также имеет вставки кода на C#, которые предваряются знаком @. Этот знак используется движком представлений Razor для перехода к коду на языке C#. Чтобы понять суть работы движка Razor и его синтаксиса, вначале посмотрим, что представляют из себя движки представлений.

Движок представлений

При вызове метода View контроллер не производит рендеринг представления и не генерирует разметку html. Контроллер только готовит данные и выбирает, какое представление надо возвратить в качестве объекта ViewResult. Затем уже объект ViewResult обращается к движку представления для рендеринга представления в выходной результат.

Если ранее предыдущие версии ASP.NET MVC и Visual Studio по умолчанию поддерживали два движка представлений - движок Web Forms и движок Razor, то сейчас Razor в силу своей простоты и легкости стал единственным движком по умолчанию. Использование Razor позволило уменьшить синтаксис при вызове кода C#, сделать сам код более "чистым".

Здесь важно понимать, что Razor - это не какой-то новый язык, это лишь способ рендеринга представлений, который имеет определенный синтаксис для перехода от разметки html к коду C#.

Основы синтаксиса Razor

Использование синтаксиса Razor характеризуется тем, что перед выражением кода стоит знак @, после которого осуществляется переход к коду C#. Существуют два типа переходов: к выражениям кода и к блоку кода.

Например, переход к выражению кода:

<p>@b.Name</p>

Razor автоматически распознает, что Name - это свойство объекта b.

Также можно использовать стандартные классы и методы, например, выведем текущее время:

<h3>@DateTime.Now.ToShortTimeString()</h3>

Применение блоков кода аналогично, только знак @ ставится перед всем блоком кода, а движок автоматически определяет, где этот блок кода заканчивается:

@foreach (BookStore.Models.Book b in Model)
{
    <p>@b.Name</p>
}

Более того мы можем создавать блоки кода в представлении, создавать там переменные так же, как и в файле кода C#:

@{
    string head = "Привет мир!!!";
    head = head + " Добро пожаловать на сайт!";
}
 <h3>@head</h3>
Дополнительные материалы

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850