Главная страница   /   7.3. Отображение списка товаров (ASP.NET MVC 4

ASP.NET MVC 4

ASP.NET MVC 4

Адам Фриман

7.3. Отображение списка товаров

Мы могли бы до конца этой главы создавать доменную модель и хранилище, даже не затрагивая проект 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. Мы отводим довольно много времени на настройку, но затем разработка базовой функциональности приложения происходит очень быстро.