ASP.NET MVC 4
Адам Фриман
Отображение списка товаров
Мы могли бы до конца этой главы создавать доменную модель и хранилище, даже не затрагивая проект UI. Но, чтобы вам не стало скучно, мы сменим курс и начнем использовать MVC Framework в полную силу. Мы будем добавлять новые функции в модель и хранилище по мере необходимости.
В этом разделе мы создадим контроллер и метод действия, который будет отображать информацию о товарах, находящихся в хранилище. На данный момент у нас есть данные только в имитированном хранилище, но мы решим этот вопрос позже. Мы также проведем начальные настройки конфигурации маршрутизации, чтобы MVC было известно, как отображать запросы к приложению в контроллер, который мы собираемся создать.
Добавляем контроллер
Кликните правой кнопкой мыши папку Controllers
в проекте SportsStore.WebUI
и выберите Add
- Controller
в контекстном меню. Назначьте контроллеру имя ProductController
и убедитесь, что опция Template
содержит Empty controller
. Когда Visual Studio открывает файл для редактирования, вы можете удалить метод действия по умолчанию, который был добавлен автоматически, и ваш файл будет выглядеть как в листинге 7-6.
Листинг 7-6: Начальное определение ProductController
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using SportsStore.Domain.Abstract;
using SportsStore.Domain.Entities;
namespace SportsStore.WebUI.Controllers
{
public class ProductController : Controller
{
private IProductRepository repository;
public ProductController(IProductRepository productRepository)
{
this.repository = productRepository;
}
}
}
Удалив метод действия Index
, мы добавляем конструктор, который принимает параметр IProductRepository
. Это позволит Ninject внедрять зависимость для хранилища товаров, когда он будет создавать экземпляр класса контроллера. Мы также импортировали пространства имен SportsStore.Domain
, так что мы можем обращаться к хранилищу и классам моделей, не указывая их имен.
Далее мы добавляем метод действия под названием List
, который будет визуализировать представление, показывающее полный список товаров, как показано в листинге 7-7.
Листинг 7-7: Добавляем метод действия
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using SportsStore.Domain.Abstract;
using SportsStore.Domain.Entities;
namespace SportsStore.WebUI.Controllers
{
public class ProductController : Controller
{
private IProductRepository repository;
public ProductController(IProductRepository productRepository)
{
this.repository = productRepository;
}
public ViewResult List()
{
return View(repository.Products);
}
}
}
Такой вызов метода View
(без указания имени представления) сообщает платформе визуализировать представление по умолчанию для данного метода действия. Передавая список List
объектов Product
в метод View
, мы предоставляем платформе данные для заполнения объекта Model
в строго типизированном представлении.
Добавляем представление
Теперь нам нужно добавить представление по умолчанию для метода действия List
. Щелкните правой кнопкой мыши метод List
в редакторе кода и выберите Add
- View
в контекстном меню. Присвойте представлению имя List
и отметьте флажком опцию, которая создает строго типизированные представления, как показано на рисунке 7-5.
Рисунок 7-5: Добавляем представление List
В поле Model class
введите IEnumerable<SportsStore.Domain.Entities.Product>
. Вам придется напечатать это название; оно не будет доступно из раскрывающегося списка, который не включает перечисления доменных объектов.
В дальнейшем мы будем использовать стандартный макет Razor, который включен в шаблон проекта Basic
, чтобы наши представления выглядели единообразно. Отметьте флажком опцию Use a layout
, но оставьте текстовое поле пустым, как показано на рисунке. Нажмите кнопку Add
, чтобы создать представление.
Визуализируем данные представления
Зная, что модель в представлении является IEnumerable<Product>
, мы можем создать список с помощью цикла foreach
в Razor, как показано в листинге 7-8.
Листинг 7-8: Представление List.cshtml
@model IEnumerable<SportsStore.Domain.Entities.Product>
@{
ViewBag.Title = "Products";
}
@foreach (var p in Model)
{
<div class="item">
<h3>@p.Name</h3>
@p.Description
<h4>@p.Price.ToString("c")</h4>
</div>
}
Мы также изменили заголовок страницы. Обратите внимание, что нам не нужно использовать элементы Razor text
или @:
для отображения данных представления, потому что каждая строка в теле кода либо является директивой Razor, либо начинается с HTML-элемента.
Совет
Обратите внимание, что мы преобразовали свойство
Price
в строку с помощью методаToString("с")
, который отображает числовые значения как валюту в соответствии с настройками культуры, которые действуют на вашем сервере. Например, если сервер настроен какen-US
, то(1002,3).ToString ("с")
вернет$1,002.30
, но если сервер настроен какen-GB
, тот же метод вернет£1,002,30
. Вы можете изменить настройку культуры для вашего сервера, добавив в узел<system.web>
файлаWeb.config
следующую секцию:<globalization culture="en-GB" uiCulture="en-GB" />.
Настраиваем роут по умолчанию
Сейчас нам достаточно сообщить платформе MVC, что запросы, поступающие в корень сайта (http://mysite/
), нужно отображать в метод действия List
класса ProductController
. Для этого мы редактируем оператор в методе RegisterRoutes
в файле App_Start/RouteConfig.cs
, как показано в листинге 7-9.
Листинг 7-9: Добавляем роут по умолчанию
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
namespace SportsStore.WebUI
{
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new
{
controller = "Product",
action = "List",
id = UrlParameter.Optional
}
);
}
}
}
Измените Home
на Product
и Index
на List
, как показано в листинге. Мы подробно опишем возможности маршрутизации в ASP.NET в главе 13. На данный момент достаточно знать, что это изменение будет направлять запросы к URL по умолчанию в метод действия, который мы определили.
Совет
Обратите внимание, что в листинге 7-9 мы установили контроллеру значение
Product
, а неProductController
, что является именем класса. Это часть схемы именования ASP.NET MVC, в которой имена классов контроллеров всегда заканчиваются наController
, и при обращении к классу эта часть имени опускается.
Запускаем приложение
Все базовые составляющие приложения готовы. У нас есть контроллер с методом действия, который вызывается при запросе URL по умолчанию. Этот метод действия полагается на имитированную реализацию нашего интерфейса хранилища, которая генерирует простые тестовые данные. Тестовые данные передаются в представление, которое мы связали с методом действия, и оно создает простой список с информацией для каждого товара. Если вы запустите приложение, то увидите результат, показанный на рисунке 7-6.
Рисунок 7-6: Просматриваем базовую функциональность приложения
Это типичный шаблон разработки для платформы ASP.NET MVC. Мы отводим довольно много времени на настройку, но затем разработка базовой функциональности приложения происходит очень быстро.