Добавление элементов навигации

Листинг 8-1: Расширяем класс ProductsListViewModel

using System.Collections.Generic;
using SportsStore.Domain.Entities;
namespace SportsStore.WebUI.Models
{
	public class ProductsListViewModel
	{
		public IEnumerable<Product> Products { get; set; }
		public PagingInfo PagingInfo { get; set; }
		public string CurrentCategory { get; set; }
	}
}

Листинг 8-2: Добавляем поддержку категорий в метод действия List

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using SportsStore.Domain.Abstract;
using SportsStore.Domain.Entities;
using SportsStore.WebUI.Models;
namespace SportsStore.WebUI.Controllers
{
	public class ProductController : Controller
	{
		private IProductRepository repository;
		public int PageSize = 4;
		public ProductController(IProductRepository productRepository)
		{
			this.repository = productRepository;
		}
		public ViewResult List(string category, int page = 1)
		{
			ProductsListViewModel viewModel = new ProductsListViewModel
			{
				Products = repository.Products
				.Where(p => category == null || p.Category == category)
				.OrderBy(p => p.ProductID)
				.Skip((page - 1) * PageSize)
				.Take(PageSize),
				PagingInfo = new PagingInfo
				{
					CurrentPage = page,
					ItemsPerPage = PageSize,
					TotalItems = repository.Products.Count()
				},
				CurrentCategory = category
			};
			return View(viewModel);
		}
	}
}

Модульный тест: обновление существующих модульных тестов

Мы изменили сигнатуру метода действия List, из-за чего некоторые из наших существующих модульных тестов не будут скомпилированы. Чтобы решить эту проблему, передайте null в качестве первого параметра в метод List в те модульные тесты, которые работают с контроллером. Например, в тесте Can_Paginate раздел действия станет таким:

...
[TestMethod]
public void Can_Paginate()
{
	// Arrange
	Mock<IProductRepository> mock = new Mock<IProductRepository>();
	mock.Setup(m => m.Products).Returns(new Product[] {
		new Product {ProductID = 1, Name = "P1"},
		new Product {ProductID = 2, Name = "P2"},
		new Product {ProductID = 3, Name = "P3"},
		new Product {ProductID = 4, Name = "P4"},
		new Product {ProductID = 5, Name = "P5"}
		}.AsQueryable());
	// create a controller and make the page size 3 items
	ProductController controller = new ProductController(mock.Object);
	controller.PageSize = 3;
	// Act
	ProductsListViewModel result
		= (ProductsListViewModel)controller.List(null, 2).Model;
	// Assert
	Product[] prodArray = result.Products.ToArray();
	Assert.IsTrue(prodArray.Length == 2);
	Assert.AreEqual(prodArray[0].Name, "P4");
	Assert.AreEqual(prodArray[1].Name, "P5");
}
...

Используя null, мы получаем все объекты Product, которые контроллер получает из хранилища, что полностью повторяет ситуацию, которая была раньше, пока мы не добавили новый параметр.

Рисунок 8-1: Использование строки запроса для фильтрации по категориям

Модульный тест: фильтрация категорий

Нам нужно тщательно протестировать функцию фильтрации по категориям, чтобы гарантировать, что фильтрация проводится корректно, и мы получаем только продукты из указанной категории. Вот тест:

...
[TestMethod]
public void Can_Filter_Products()
{
	// Arrange
	// - create the mock repository
	Mock<IProductRepository> mock = new Mock<IProductRepository>();
	mock.Setup(m => m.Products).Returns(new Product[] {
		new Product {ProductID = 1, Name = "P1", Category = "Cat1"},
		new Product {ProductID = 2, Name = "P2", Category = "Cat2"},
		new Product {ProductID = 3, Name = "P3", Category = "Cat1"},
		new Product {ProductID = 4, Name = "P4", Category = "Cat2"},
		new Product {ProductID = 5, Name = "P5", Category = "Cat3"}
		}.AsQueryable());

	// Arrange - create a controller and make the page size 3 items
	ProductController controller = new ProductController(mock.Object);
	controller.PageSize = 3;

	// Action
	Product[] result = ((ProductsListViewModel)controller.List("Cat2", 1).Model)
		.Products.ToArray();

	// Assert
	Assert.AreEqual(result.Length, 2);
	Assert.IsTrue(result[0].Name == "P2" && result[0].Category == "Cat2");
	Assert.IsTrue(result[1].Name == "P4" && result[1].Category == "Cat2");
}
...

Этот тест создает имитированное хранилище, содержащее объекты Product, которые принадлежат к различным категориям. С помощью метода Action запрашивается одна определенная категория, и, мы проверяем результаты, чтобы убедиться, что получаем правильные объекты в правильном порядке.

Листинг 8-3: Новая схема URL

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(null,
				"",
				new
				{
					controller = "Product",
					action = "List",
					category = (string)null,
					page = 1
				}
			);

			routes.MapRoute(null,
				"Page{page}",
				new { controller = "Product", action = "List", category = (string)null },
				new { page = @"\d+" }
			);

			routes.MapRoute(null,
				"{category}",
				new { controller = "Product", action = "List", page = 1 }
			);

			routes.MapRoute(null,
				"{category}/Page{page}",
				new { controller = "Product", action = "List" },
				new { page = @"\d+" }
			);

			routes.MapRoute(null, "{controller}/{action}");
		}
	}
}

Внимание

Важно добавлять новые роуты из листинга 8-3 по очереди, как они показаны в листинге. Роуты применяются в том порядке, в котором они определены, и если вы его измените, то получите другой результат.

Таблица 8-1: Информация о роутах

Заметка

Мы покажем, как создавать модульные тесты для конфигурации маршрутизации в главе 13.

Листинг 8-4: Добавляем информацию о категории к ссылкам на страницы

@model SportsStore.WebUI.Models.ProductsListViewModel

@{
	ViewBag.Title = "Products";
}

@foreach (var p in Model.Products)
{
	Html.RenderPartial("ProductSummary", p);
}

<div class="pager">
	@Html.PageLinks(Model.PagingInfo, x => Url.Action("List",
		new { page = x, category = Model.CurrentCategory }))
</div>

Листинг 8-5: Метод действия Menu

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace SportsStore.WebUI.Controllers
{
	public class NavController : Controller
	{
		public string Menu()
		{
			return "Hello from NavController";
		}
	}
}

Листинг 8-6: Добавляем вызов к RenderAction в макет Razor

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width" />
	<title>@ViewBag.Title</title>
	<link href="~/Content/Site.css" type="text/css" rel="stylesheet" />
</head>
<body>
	<div id="header">
		<div class="title">SPORTS STORE</div>
	</div>
	<div id="categories">
		@{ Html.RenderAction("Menu", "Nav"); }
	</div>
	<div id="content">
		@RenderBody()
	</div>
</body>
</html>

Примечание

Метод RenderAction записывает свое содержание непосредственно в поток ответа, как и метод RenderPartial, о котором мы упоминали в главе 5. Это означает, что метод возвращает void, и поэтому его нельзя использовать с регулярным тегом Razor @. Вместо этого мы должны заключить вызов метода в блок кода Razor (и не забудьте поставить точку с запятой в конце оператора). Если вам не нравится синтаксис блока кода, можно использовать метод Action в качестве альтернативы.

Рисунок 8-2: Отображение результата метода действия Menu

Листинг 8-7: Реализация метода Menu

using SportsStore.Domain.Abstract;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace SportsStore.WebUI.Controllers
{
	public class NavController : Controller
	{
		private IProductRepository repository;

		public NavController(IProductRepository repo)
		{
			repository = repo;
		}

		public PartialViewResult Menu()
		{
			IEnumerable<string> categories = repository.Products
				.Select(x => x.Category)
				.Distinct()
				.OrderBy(x => x);
			return PartialView(categories);
		}
	}
}

Модульный тест: создание списка категорий

Протестировать нашу способность создавать список категорий относительно просто. Наша цель - создать список, который отсортирован в алфавитном порядке и не содержит дубликатов. Самый простой способ это сделать - предоставить неотсортированные тестовые данные с дублирующими категориями, передать их в NavController и задать утверждение, что данные будут правильно обработаны. Вот модульный тест, который мы использовали:

...
[TestMethod]
public void Can_Create_Categories()
{
	// Arrange
	// - create the mock repository
	Mock<IProductRepository> mock = new Mock<IProductRepository>();
	mock.Setup(m => m.Products).Returns(new Product[] {
		new Product {ProductID = 1, Name = "P1", Category = "Apples"},
		new Product {ProductID = 2, Name = "P2", Category = "Apples"},
		new Product {ProductID = 3, Name = "P3", Category = "Plums"},
		new Product {ProductID = 4, Name = "P4", Category = "Oranges"},
		}.AsQueryable());

	// Arrange - create the controller
	NavController target = new NavController(mock.Object);

	// Act = get the set of categories
	string[] results = ((IEnumerable<string>)target.Menu().Model).ToArray();

	// Assert
	Assert.AreEqual(results.Length, 3);
	Assert.AreEqual(results[0], "Apples");
	Assert.AreEqual(results[1], "Oranges");
	Assert.AreEqual(results[2], "Plums");
}
...

Мы создали имитированную реализацию хранилища, которая содержит повторяющиеся и неотсортированные категории. Наше утверждение заключается в том, что все повторяющиеся строки будут удалены и данные будут отсортированы в алфавитном порядке.

Рисунок 8-3 : Создаем частичное представление Menu

Листинг 8-8: Частичное представление Menu

@model IEnumerable<string>

@Html.ActionLink("Home", "List", "Product")

@foreach (var link in Model)
{
	@Html.RouteLink(link, new
		{
			controller = "Product",
			action = "List",
			category = link,
			page = 1
		})
}

Листинг 8-9: CSS для ссылок на категории

...
DIV#categories A
{
	font: bold 1.1em "Arial Narrow","Franklin Gothic Medium",Arial; display: block;
	text-decoration: none; padding: .6em; color: Black;
	border-bottom: 1px solid silver;
}
DIV#categories A.selected { background-color: #666; color: White; }
DIV#categories A:hover { background-color: #CCC; }
DIV#categories A.selected:hover { background-color: #666; }
...

Рисунок 8-4: Ссылки на категории

Листинг 8-10: Использование ViewBag

using SportsStore.Domain.Abstract;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace SportsStore.WebUI.Controllers
{
	public class NavController : Controller
	{
		private IProductRepository repository;
		public NavController(IProductRepository repo)
		{
			repository = repo;
		}
		public PartialViewResult Menu(string category = null)
		{
			ViewBag.SelectedCategory = category;
			IEnumerable<string> categories = repository.Products
				.Select(x => x.Category)
				.Distinct()
				.OrderBy(x => x);
			return PartialView(categories);
		}
	}
}

Модульный тест: Указание выбранной категории

Чтобы проверить, что метод действия Menu правильно добавляет информацию о выбранной категории, проверим в модульном тесте значение свойства ViewBag, которое доступно через класс ViewResult. Вот этот тест:

[TestMethod]
public void Indicates_Selected_Category()
{
	// Arrange
	// - create the mock repository
	Mock<IProductRepository> mock = new Mock<IProductRepository>();
	mock.Setup(m => m.Products).Returns(new Product[] {
		new Product {ProductID = 1, Name = "P1", Category = "Apples"},
		new Product {ProductID = 4, Name = "P2", Category = "Oranges"},
	}.AsQueryable());

	// Arrange - create the controller
	NavController target = new NavController(mock.Object);

	// Arrange - define the category to selected
	string categoryToSelect = "Apples";

	// Action
	string result = target.Menu(categoryToSelect).ViewBag.SelectedCategory;

	// Assert
	Assert.AreEqual(categoryToSelect, result);
}

Обратите внимание, что мы не должны приводить значение свойства из ViewBag. Это одно из преимуществ использования объекта ViewBag перед ViewData.

Листинг 8-11: Подсветка выбранной категории

@model IEnumerable<string>

@Html.ActionLink("Home", "List", "Product")

@foreach (var link in Model) {
	@Html.RouteLink(link, new {
		controller = "Product",
		action = "List",
		category = link,
		page = 1
	},
	new {
		@class = link == ViewBag.SelectedCategory ? "selected" : null
	})
}

Примечание

Обратите внимание, что мы использовали @class в анонимном объекте, который мы передали как новый параметр в вспомогательный метод RouteLink. Это не тег Razor. Мы используем стандартную функцию языка C#, чтобы избежать конфликта между ключевым словом HTML class (используется для присвоения стиля CSS к элементу) и того же слова C# (используется для обозначения класса .NET). Символ @ позволяет нам использовать зарезервированные ключевые слова C#, не запутывая компилятор. Если мы просто вызовем параметр class (без @), компилятор будет считать, что мы определяем новый тип C#. Когда мы будем использовать символ @, компилятор поймет, что мы хотим создать параметр в анонимном типе под названием class, и мы получим нужный нам результат.

Рисунок 8-5: Подсветка выбранной категории

Рисунок 8-6: Отображение неправильных ссылок на страницы, когда выбрана категория

Листинг 8-12: Объединяем данные о нумерации страниц и категории

public ViewResult List(string category, int page = 1)
{
	ProductsListViewModel viewModel = new ProductsListViewModel
	{
		Products = repository.Products
			.Where(p => category == null || p.Category == category)
			.OrderBy(p => p.ProductID)
			.Skip((page - 1) * PageSize)
			.Take(PageSize),
		PagingInfo = new PagingInfo
		{
			CurrentPage = page,
			ItemsPerPage = PageSize,
			TotalItems = category == null ?
				repository.Products.Count() :
				repository.Products.Where(e => e.Category == category).Count()
		},
		CurrentCategory = category
	};
	return View(viewModel);
}

Модульный тест: подсчет товаров по категориям

Тест, с помощью которого мы проверим текущий подсчет товаров в различных категориях, очень простой: мы создадим имитированное хранилище, которое содержит известное количество данных в различных категориях, а затем вызовем метод действия List, запрашивая каждую категорию по очереди. Вот модульный тест:

[TestMethod]
public void Generate_Category_Specific_Product_Count()
{
	// Arrange
	// - create the mock repository
	Mock<IProductRepository> mock = new Mock<IProductRepository>();
	mock.Setup(m => m.Products).Returns(new Product[] {
		new Product {ProductID = 1, Name = "P1", Category = "Cat1"},
		new Product {ProductID = 2, Name = "P2", Category = "Cat2"},
		new Product {ProductID = 3, Name = "P3", Category = "Cat1"},
		new Product {ProductID = 4, Name = "P4", Category = "Cat2"},
		new Product {ProductID = 5, Name = "P5", Category = "Cat3"}
	}.AsQueryable());

	// Arrange - create a controller and make the page size 3 items
	ProductController target = new ProductController(mock.Object);
	target.PageSize = 3;

	// Action - test the product counts for different categories
	int res1 = ((ProductsListViewModel)target
		.List("Cat1").Model).PagingInfo.TotalItems;
	int res2 = ((ProductsListViewModel)target
		.List("Cat2").Model).PagingInfo.TotalItems;
	int res3 = ((ProductsListViewModel)target
		.List("Cat3").Model).PagingInfo.TotalItems;
	int resAll = ((ProductsListViewModel)target
		.List(null).Model).PagingInfo.TotalItems;

	// Assert
	Assert.AreEqual(res1, 2);
	Assert.AreEqual(res2, 2);
	Assert.AreEqual(res3, 1);
	Assert.AreEqual(resAll, 5);
}

Обратите внимание, что мы также вызываем метод List, не указывая категорию, чтобы убедиться, мы получаем правильный подсчет всех товаров.

Рисунок 8-7: Отображается правильное количество страниц в категории