Загрузка изображений

Рисунок 11-4: Добавляем новые столбцы в таблицу Products

Рисунок 11-5: Предварительный просмотр обновлений базы данных

Листинг 11-9: Добавляем свойства в класс Products

using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;
namespace SportsStore.Domain.Entities
{
	public class Product
	{
		[HiddenInput(DisplayValue = false)]
		public int ProductID { get; set; }

		[Required(ErrorMessage = "Please enter a product name")]
		public string Name { get; set; }

		[Required(ErrorMessage = "Please enter a description")]
		[DataType(DataType.MultilineText)]
		public string Description { get; set; }

		[Required]
		[Range(0.01, double.MaxValue, ErrorMessage = "Please enter a positive price")]
		public decimal Price { get; set; }

		[Required(ErrorMessage = "Please specify a category")]
		public string Category { get; set; }

		public byte[] ImageData { get; set; }

		[HiddenInput(DisplayValue = false)]
		public string ImageMimeType { get; set; }
	}
}

Внимание!

Убедитесь в том, что имена свойств, которые вы добавляете в класс Product, в точности соответствуют названиям новых столбцов в базе данных.

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

@model SportsStore.Domain.Entities.Product

@{
	ViewBag.Title = "Admin: Edit " + @Model.Name;
	Layout = "~/Views/Shared/_AdminLayout.cshtml";
}

<h1>Edit @Model.Name</h1>
@using (Html.BeginForm("Edit", "Admin", 
	FormMethod.Post, new { enctype = "multipart/form-data" })) {
	@Html.EditorForModel()
	<div class="editor-label">Image</div>
	<div class="editor-field">
		@if (Model.ImageData == null) {
			@:None
		}
		else {
			<img width="150" height="150" src="@Url.Action("GetImage", "Product", new { Model.ProductID })" />
		}
		<div>Upload new image:
			<input type="file" name="Image" /></div>
	</div>
	<input type="submit" value="Save" />
	@Html.ActionLink("Cancel and return to List", "Index")
}

<form action="/Admin/Edit" enctype="multipart/form-data" method="post">
...
</form>

@using (Html.BeginForm("Edit", "Admin", FormMethod.Post,
	new { enctype = "multipart/form-data" })) {

Листинг 11-11: Обработка изображения в классе AdminController

[HttpPost]
public ActionResult Edit(Product product, HttpPostedFileBase image)
{
	if (ModelState.IsValid)
	{
		if (image != null)
		{
			product.ImageMimeType = image.ContentType;
			product.ImageData = new byte[image.ContentLength];
			image.InputStream.Read(product.ImageData, 0, image.ContentLength);
		}
		repository.SaveProduct(product);
		TempData["message"] = string.Format("{0} has been saved", product.Name);
		return RedirectToAction("Index");
	}
	else
	{
		// there is something wrong with the data values
		return View(product);
	}
}

Примечание

Понадобится обновить модульные тесты, чтобы отразить новый параметр в листинге 11-11. Передача параметра со значением null позволит тестам скомпилироваться.

Листинг 11-12: Гарантируем, что данные изображений сохраняются в базе данных

public void SaveProduct(Product product)
{
	if (product.ProductID == 0)
	{
		context.Products.Add(product);
	}
	else
	{
		Product dbEntry = context.Products.Find(product.ProductID);
		if (dbEntry != null)
		{
			dbEntry.Name = product.Name;
			dbEntry.Description = product.Description;
			dbEntry.Price = product.Price;
			dbEntry.Category = product.Category;
			dbEntry.ImageData = product.ImageData;
			dbEntry.ImageMimeType = product.ImageMimeType;
		}
	}
	context.SaveChanges();
}

Листинг 11-13: Метод действия GetImage

public FileContentResult GetImage(int productId)
{
	Product prod = repository.Products.FirstOrDefault(p => p.ProductID == productId);
	if (prod != null)
	{
		return File(prod.ImageData, prod.ImageMimeType);
	}
	else
	{
		return null;
	}
}

Модульный тест: получение изображений

Мы хотим убедиться, что метод GetImage возвращает из хранилища правильный тип MIME, и гарантировать, что данные не возвращаются, если мы запрашиваем несуществующий ID товара. Вот тестовые методы, которые мы добавили в новый файл тестов под названием ImageTests.cs:

using Microsoft.VisualStudio.TestTools.UnitTesting;
	using Moq;
	using SportsStore.Domain.Abstract;
	using SportsStore.Domain.Entities;
	using SportsStore.WebUI.Controllers;
	using System.Linq;
	using System.Web.Mvc;
	namespace SportsStore.UnitTests
	{
		[TestClass]
		public class ImageTests
		{
			[TestMethod]
			public void Can_Retrieve_Image_Data()
			{
				// Arrange - create a Product with image data
				Product prod = new Product
				{
					ProductID = 2,
					Name = "Test",
					ImageData = new byte[] { },
					ImageMimeType = "image/png"
				};
				// 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"},
					prod,
					new Product {ProductID = 3, Name = "P3"}
				}.AsQueryable());
				// Arrange - create the controller
				ProductController target = new ProductController(mock.Object);
				// Act - call the GetImage action method
				ActionResult result = target.GetImage(2);
				// Assert
				Assert.IsNotNull(result);
				Assert.IsInstanceOfType(result, typeof(FileResult));
				Assert.AreEqual(prod.ImageMimeType, ((FileResult)result).ContentType);
			}
			[TestMethod]
			public void Cannot_Retrieve_Image_Data_For_Invalid_ID()
			{
				// 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"},
					new Product {ProductID = 2, Name = "P2"}
				}.AsQueryable());
				// Arrange - create the controller
				ProductController target = new ProductController(mock.Object);
				// Act - call the GetImage action method
				ActionResult result = target.GetImage(100);
				// Assert
				Assert.IsNull(result);
			}
		}
	}

Когда у нас есть действительный ID товара, тест гарантирует то, что мы получаем результат FileResult из метода действия и тип содержимого соответствует типу имитированных данных. Класс FileResult не дает нам доступ к двоичному содержимому файла, так что придется довольствоваться не вполне совершенным тестом. Когда мы запрашиваем недействительный ID товара, мы просто проверяем, что результат будет содержать null.

Рисунок 11-6: Добавляем изображение к списку товаров

Листинг 11-14: Отображаем изображения в каталоге товаров

@model SportsStore.Domain.Entities.Product
<div class="item">
	@if (Model.ImageData != null) {
		<div style="float: left; margin-right: 20px">
			<img width="75" height="75" src="@Url.Action("GetImage", "Product", new { Model.ProductID })" />
		</div>
	}
	<h3>@Model.Name</h3>
	@Model.Description
	<div class="item">
		@using (Html.BeginForm("AddToCart", "Cart")) {
			@Html.HiddenFor(x => x.ProductID)
			@Html.Hidden("returnUrl", Request.Url.PathAndQuery)
			<input type="submit" value="+ Add to cart" />
		}
	</div>
	<h4>@Model.Price.ToString("c")</h4>
</div>

Рисунок 11-7: Выводим изображения товаров