Представления в ASP.NET Core MVC. Передача данных в представление

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

Слабо типизированные данные

Нестрогие типы (или слабые типы) предполагают, что тип используемых данных не объявляется явным образом. Коллекцию слабо типизированных данных можно использовать для передачи небольших объемов данных в контроллеры и представления.

Свойство ViewData контроллера

Свойство ViewData класса Controller позволяет передать в представление данные в виде пар «ключ-значение»

public ViewDataDictionary ViewData { get; set; }

Например, вернемся к нашему контроллеру для работы с записями блога. На данный момент в представлении, которое мы создали происходит вычисление различных дат:

@{
    DateOnly date = DateOnly.FromDateTime(DateTime.Now);
    DateOnly lastweekStart = DateOnly.FromDateTime(DateTime.Now.AddDays(-7));
}

Строго говоря, наше представление не должно заниматься какими-либо расчётами — в MVC это должна выполнять модель или, на крайний случай, небольшие вычисления может взять на себя контроллер. Перепишем метод Index() контроллера BlogController следующим образом:

public class BlogController : Controller
{
    public IActionResult Index()
    {
        ViewData["CurrentDate"] = DateOnly.FromDateTime(DateTime.Now);
        ViewData["LastWeekStartDate"] = DateOnly.FromDateTime(DateTime.Now.AddDays(-7));
        return View();
    }
}

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

@*Здесь располагается код C#*@
@{
    //Условная БД с заголовками статей блога
    string[] Titles = new[]
    {
       "Hello, world!",
       "Знакомство с Razor в ASP.NET Core MVC",
       "Разметка Razor"
    };

    int i = 0;

}


<h2>Последние записи блога на момент @ViewData["CurrentDate"]</h2>
<ul>
    @foreach (string title in Titles)
    {
        <li>@title</li>
    }
</ul>

@*Здесь будут выводиться записи за прошлую неделю*@
<h2>Записи за прошлую неделю: с @ViewData["LastWeekStartDate"] по @ViewData["CurrentDate"]</h2>

здесь мы используем свойство ViewData для вывода дат в заголовках:

<h2>Последние записи блога на момент @ViewData["CurrentDate"]</h2>

и

<h2>Записи за прошлую неделю: с @ViewData["LastWeekStartDate"] по @ViewData["CurrentDate"]</h2>

Значения для ViewData можно устанавливать непосредственно в представлении, например:

@{
    ViewData["Title"] = $"Последние записи блога на момент {ViewData["CurrentDate"]}";
}

<h2>@ViewData["Title"]</h2>

Результат:

Свойство ViewBag контроллера

ViewBag — это оболочка над ViewData, предоставляющая динамический доступ к объектам, хранящимся в ViewData. Например, мы можем переписать код контроллера следующим образом:

public class BlogController : Controller
{
    public IActionResult Index()
    {
        ViewBag.CurrentDate = DateOnly.FromDateTime(DateTime.Now);
        ViewBag.LastWeekStartDate = DateOnly.FromDateTime(DateTime.Now.AddDays(-7));
        return View();
    }
}

и представление:

@*Здесь располагается код C#*@
@{
    ViewBag.Title = $"Последние записи блога на момент {ViewBag.CurrentDate}";
}


<h2>@ViewBag.Title</h2>


<h2>Записи за прошлую неделю: с @ViewBag.LastWeekStartDate по @ViewBag.CurrentDate</h2>

Результат выполнения будет тот же, что и на рисунке выше.

Атрибут [ViewData]

В некоторых случаях, мы можем использовать в контроллере атрибут [ViewData] для передачи данных в представление, например,

namespace AspViews.Controllers
{
    public class BlogController : Controller
    {
        [ViewData(Key = "PageTitle")]
        public string Title { get; set; }

        public IActionResult Index()
        {
            Title = "Последние записи блога";   
            ViewBag.CurrentDate = DateOnly.FromDateTime(DateTime.Now);
            ViewBag.LastWeekStartDate = DateOnly.FromDateTime(DateTime.Now.AddDays(-7));
            return View();
        }
    }

Здесь свойство Title контроллера будет добавляться в ViewData с ключом PageTitle и передаваться в представление. Соответственно, в представлении мы можем использовать значение свойства следующим образом:

<h1>@ViewData["PageTitle"]</h1>

Результат

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

Наиболее надежный подход — указание типа модели в представлении. Такая модель называется viewmodel. Экземпляр типа viewmodel передается в представление из действия. Например, перепишем код контроллера и представления следующим образом:

Контроллер

public class BlogController : Controller
{
    [ViewData(Key = "PageTitle")]
    public string Title { get; set; }

    public IActionResult Index()
    {
        Title = "Последние записи блога";
        ViewBag.CurrentDate = DateOnly.FromDateTime(DateTime.Now);
        ViewBag.LastWeekStartDate = DateOnly.FromDateTime(DateTime.Now.AddDays(-7));

        //viewmodel
        string[] Titles = new[] { "Hello, world!",
                                  "Знакомство с Razor в ASP.NET Core MVC",
                                  "Разметка Razor"
                                };

        return View(Titles);//передаем viewmodel в представление
    }
}

здесь стоит обратить внимание на вызов метода View() — в параметрах метода мы передаем модель данных. Теперь наше представление не нуждается в том, чтобы в его коде создавать условную БД с записями — список будет передавать контроллер. Перепишем представление следующим образом:

@*Определяем тип модели в представлении*@
@model string[] 

@{
    ViewBag.Title = $"Последние записи блога на момент {ViewBag.CurrentDate}";
}

<h1>@ViewData["PageTitle"]</h1>

<h2>@ViewBag.Title</h2>
<ul>
    @foreach (string title in Model)
    {
        <li>@title</li>
    }
</ul>

@*Здесь будут выводиться записи за прошлую неделю*@
<h2>Записи за прошлую неделю: с @ViewBag.LastWeekStartDate по @ViewBag.CurrentDate</h2>

Первое на что необходимо обратить внимание — директива @model:

@model string[]

с помощью этой директивы Razor мы определяем тип модели данных в представлении. Далее, в цикле мы используем свойство Model для того, чтобы получить данные модели:

<ul>
    @foreach (string title in Model)
    {
        <li>@title</li>
    }
</ul>

Результат:

Используя viewmodel мы можем передавать в представления любые типы данных и уже в самом представлении организовывать их отображение пользователю.

Итого

Передача данных в представление может осуществляться различными способами — с использованием свойств ViewData, ViewBag контроллера, атрибута [ViewData], а также с использованием модели данных. Наиболее надежный подход — указание типа модели в представлении. Использование свойств контроллера можно использовать для передачи небольших по объему данных в представление.