跟我学ASP.NET MVC之九：SportsStrore产品管理

摘要：

在这篇文章中，我将继续完成SportsStore应用程序，让站点管理者可以管理产品列表。我将添加创建、修改和删除产品功能。

本篇文章将分模块的方式，逐个介绍SportsStore站点管理功能的开发过程。

数据管理部分

修改IProductRepository.cs接口代码文件。

 using SportsStore.Domain.Entities;
 using System.Collections.Generic;

 namespace SportsStore.Domain.Abstract
 {
     public interface IProductRepository
     {
         IEnumerable<Product> Products { get; }

         void SaveProduct(Product product);

         Product DeleteProduct(int productID);
     }
 }

添加了两个接口方法SaveProduct和DeleteProduct。

修改EFProductRepository.cs代码文件，添加这两个新添加的接口的实现。

 using SportsStore.Domain.Abstract;
 using SportsStore.Domain.Entities;
 using System.Collections.Generic;

 namespace SportsStore.Domain.Concrete
 {
     public class EFProductRepository : IProductRepository
     {
         private EFDbContext context = new EFDbContext();
         public IEnumerable<Product> Products
         {
             get
             {
                 try
                 {
                     return context.Products;
                 }
                 catch (System.Exception e)
                 {
                     return null;
                 }
             }
         }

         public void SaveProduct(Product product)
         {
             if (product.ProductID == )
             {
                 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;
                 }
             }
             context.SaveChanges();
         }

         public Product DeleteProduct(int productID)
         {
             Product dbEntry = context.Products.Find(productID);
             if (dbEntry != null)
             {
                 context.Products.Remove(dbEntry);
                 context.SaveChanges();
             }
             return dbEntry;
         }
     }
 }

这两个方法SaveProduct和方法DeleteProduct，调用EntifyFramework，实现了保存（添加和修改）和删除产品功能。

产品管理控制器

添加控制器AdminController，此控制器区别于只用于显示产品的网站首页控制器ProductController，实现了增删改Action方法。

 using SportsStore.Domain.Abstract;
 using SportsStore.Domain.Entities;
 using System.Linq;
 using System.Web.Mvc;

 namespace SportsStore.WebUI.Controllers
 {
     public class AdminController : Controller
     {
         private IProductRepository repository;

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

         public ViewResult Index()
         {
             return View(repository.Products);
         }

         public ViewResult Edit(int productId)
         {
             Product product = repository.Products.FirstOrDefault(p => p.ProductID == productId);
             return View(product);
         }

         [HttpPost]
         public ActionResult Edit(Product product)
         {
             if (ModelState.IsValid)
             {
                 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);
             }
         }

         public ViewResult Create()
         {
             return View("Edit", new Product());
         }

         [HttpPost]
         public ActionResult Delete(int productId)
         {
             Product deletedProduct = repository.DeleteProduct(productId);
             if (deletedProduct != null)
             {
                 TempData["message"] = string.Format("{0} was deleted", deletedProduct.Name);
             }
             return RedirectToAction("Index");
         }
     }
 }

• 以Ninject构造函数注入方式生成属性IProductRepository repository。
• Index方法Action：返回产品列表
• Edit方法Action（Get方式）：传入productId参数，返回带有这个产品信息的Edit视图。Edit视图的视图模型类是Product类型。
• Edit方法Action（Post方式）：从视图上通过模型绑定返回产品product参数，如果绑定的模型验证结果返回的ModelState.IsValid为true，则保存修改后的product信息，使用Temp对象在页面上显示保存成功字符串，并返回产品列表视图。否则，返回原视图（Edit视图），并向视图传入正在编辑的产品对象，用户可以继续编辑该产品。
• Create方法Action：重用了Edit方法Action。返回Edit方法对应的视图，使用new Product()传入一个初始化的产品对象。
• Delete方法Action：使用了Post特性修饰，表示只能通过Post方式调用该Action，比Get方式更加安全。删除成功后，使用Temp对象在页面上显示删除成功字符串。
• 使用Temp对象保存和显示操作成功的字符串，而不能使用ViewData，因为ViewData只能在当前Action上使用。这里使用了RedirectToAction跳转到了另一个视图。

视图

在Shared文件夹中，添加_AdminLayout.cshtml视图。

 <!DOCTYPE html>

 <html>
 <head>
     <meta name="viewport" content="width=device-width" />
     <link href="~/Content/bootstrap.css" rel="stylesheet" />
     <link href="~/Content/bootstrap-theme.css" rel="stylesheet" />
     <title>@ViewBag.Title</title>
 </head>
 <body>
     <div class="navbar navbar-inverse" role="navigation">
         <a class="navbar-brand" href="#">
             <span class="hidden-xs">SPORTS STORE</span>
             <div class="visible-xs">SPORTS</div>
             <div class="visible-xs">STORE</div>
         </a>
     </div>
     <div>
         @if (TempData["message"] != null)
         {
             <div class="alert alert-success">@TempData["message"]</div>
         }
         @RenderBody()
     </div>
 </body>
 </html>

_AdminLayout.cshtml的页面布局跟网站首页的布局类似。只是在Body的上部增加了显示操作成功的字符串的DIV元素。

产品管理的Index.cshtml视图

 @model IEnumerable<SportsStore.Domain.Entities.Product>

 @{
     ViewBag.Title = "Index";
     Layout = "~/Views/Shared/_AdminLayout.cshtml";
 }

 <div class="panel panel-default">
     <div class="panel-heading">
         <h3>All Products</h3>
     </div>
     <div class="panel-body">
         <table class="table table-striped table-condensed table-bordered">
             <tr>
                 <th class="text-right">ID</th>
                 <th>Name</th>
                 <th class="text-right">Price</th>
                 <th class="text-center">Actions</th>
             </tr>
             @foreach (var item in Model)
             {
                 <tr>
                     <td class="text-right">@item.ProductID</td>
                     <td>
                         @Html.ActionLink(item.Name, "Edit", new
                         {
                             item.ProductID
                         })
                     </td>
                     <td class="text-right">@item.Price.ToString("c")</td>
                     <td class="text-center">
                         @using (Html.BeginForm("Delete", "Admin"))
                         {
                             @Html.Hidden("ProductID", item.ProductID)
                             <input type="submit" class="btn btn-default btn-xs" value="Delete" />
                         }
                     </td>
                 </tr>
             }
         </table>
     </div>
     <div class="panel-footer">
         @Html.ActionLink("Add a new product", "Create", null, new { @class = "btn btn-default" })
     </div>
 </div>

• 该视图通过语句：Layout = "~/Views/Shared/_AdminLayout.cshtml";，指定它的布局视图是刚才创建的_AdminLayout.cshtml。
• 该视图通过表格的形式呈现了产品列表。显示产品名称的列是一个指向Edit方法Action的链接。每一行的最后一列放置一个删除产品的表单，表达内容是一个保存ProductID信息的隐藏元素和一个删除按钮。
• 页面底部显示一个创建产品的超链接，该链接通过css样式呈现成按钮样式。

最后是Edit.cshtml视图

 @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))
 {
     <div class="panel-body">
         @Html.HiddenFor(m => m.ProductID)
         @foreach (var property in ViewData.ModelMetadata.Properties)
         {
             switch (property.PropertyName)
             {
                 case "ProductID":
                     break;
                 default:
                     <div class="form-group">
                         <label>
                             @(property.DisplayName ?? property.PropertyName)
                         </label>
                         @if (property.PropertyName == "Description")
                         {
                             @Html.TextArea(property.PropertyName, null, new { @class = "form-control", rows = 5 })
                         }
                         else
                         {
                             @Html.TextBox(property.PropertyName, null, new { @class = "form-control" })
                         }
                     </div>
                     break;
             }
         }
     </div>
     <div class="panel-footer">
         <input type="submit" value="Save" class="btn btn-primary" />
         @Html.ActionLink("Cancel and return to List", "Index", null, new { @class = "btn btn-default" })
     </div>
 }

• 首先使用@Html.HiddenFor(m => m.ProductID)向页面发送保存有ProductID信息的隐藏元素。
• 使用ViewData.ModelMetadata.Properties，返回视图绑定类的所有属性。这里是Product类的所有属性。
• 如果该属性名是ProductID（ProductID属性），则不生成表单HTML元素。如果该属性是Description属性，则显示成一个TextArea，通过@class指定他的行数。否则，只显示成一个普通的text输入框。
• @(property.DisplayName ?? property.PropertyName)用于显示输入元素前面的Label元素。如果属性使用了Display特性指定了属性显示在页面上的字符串，则显示这个字符串。否则，只显示这个属性名。这个对于使用了多语言的系统非常有用。

运行程序，得到运行结果。

点击任意一个产品的链接，返回Edit视图。

如果点击按钮Add a new product，返回Create视图。

添加视图模型验证

修改Product.cs类。

 using System.ComponentModel.DataAnnotations;

 namespace SportsStore.Domain.Entities
 {
     public class Product
     {
         public int ProductID { get; set; }
         [Required(ErrorMessage = "Please enter a product name")]
         public string Name { get; set; }
         [Required(ErrorMessage = "Please enter a description")]
         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; }
     }
 }

需要引入名称空间System.ComponentModel.DataAnnotations;。该名称空间下包含了数量庞大的模型验证特性类。这里只使用了Required和Range。

继续编辑Edit.cshtml视图，将验证结果字符串显示在视图页面上。

 @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))
 {
     <div class="panel-body">
         @Html.HiddenFor(m => m.ProductID)
         @foreach (var property in ViewData.ModelMetadata.Properties)
         {
             switch (property.PropertyName)
             {
                 case "ProductID":
                     break;
                 default:
                     <div class="form-group">
                         <label>
                             @(property.DisplayName ?? property.PropertyName)
                         </label>
                         @if (property.PropertyName == "Description")
                         {
                             @Html.TextArea(property.PropertyName, null, new { @class = "form-control", rows = 5 })
                         }
                         else
                         {
                             @Html.TextBox(property.PropertyName, null, new { @class = "form-control" })
                         }
                     </div>
                     @Html.ValidationMessage(property.PropertyName)
                     break;
             }
         }
     </div>
     <div class="panel-footer">
         <input type="submit" value="Save" class="btn btn-primary" />
         @Html.ActionLink("Cancel and return to List", "Index", null, new { @class = "btn btn-default" })
     </div>
 }

这里通过在每个表单元素所在的DIV下面，使用语句@Html.ValidationMessage(property.PropertyName)返回表单验证结果。

还要修改_AdminLayout.cshtml，引入验证出现错误时所用的CSS样式表。

 <!DOCTYPE html>

 <html>
 <head>
     <meta name="viewport" content="width=device-width" />
     <link href="~/Content/bootstrap.css" rel="stylesheet" />
     <link href="~/Content/bootstrap-theme.css" rel="stylesheet" />
     <link href="~/Content/ErrorStyles.css" rel="stylesheet" />
     <title>@ViewBag.Title</title>
 </head>
 <body>
     <div class="navbar navbar-inverse" role="navigation">
         <a class="navbar-brand" href="#">
             <span class="hidden-xs">SPORTS STORE</span>
             <div class="visible-xs">SPORTS</div>
             <div class="visible-xs">STORE</div>
         </a>
     </div>
     <div>
         @if (TempData["message"] != null)
         {
             <div class="alert alert-success">@TempData["message"]</div>
         }
         @RenderBody()
     </div>
 </body>
 </html>

运行程序，访问/Admin/Edit视图。如果清空表单元素，则返回验证失败的Edit视图。错误消息显示在每个表单元素的下面。

如果表单元素填写正确

点击Save按钮，则保存成功。并返回Index视图，在Index视图上看到新创建的产品。在产品列表上部，显示保存成功的字符串。

如果在Index视图上，删除Daniel这个产品。删除成功后，返回Index视图。

为表单添加客户端验证

现在使用的是服务器端验证。也就是说验证必须是发送到服务器端完成的。可以使用客户端验证方式，加快页面的访问速度。

首先使用NutGet向SportsStore.WebUI工程，添加javascript包Microsoft.jQuery.Unobtrusive.Validation 。

它将同时安装jquery.validate和jquery.validate.unobtrusive。

安装完成后的scrips文件夹内容是这样的。

修改_AdminLayout.cshtml视图，添加对新的JavaScript引用。

 <!DOCTYPE html>

 <html>
 <head>
     <meta name="viewport" content="width=device-width" />
     <link href="~/Content/bootstrap.css" rel="stylesheet" />
     <link href="~/Content/bootstrap-theme.css" rel="stylesheet" />
     <link href="~/Content/ErrorStyles.css" rel="stylesheet" />
     <script src="~/Scripts/jquery-1.9.1.js"></script>
     <script src="~/Scripts/jquery.validate.js"></script>
     <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
     <title>@ViewBag.Title</title>
 </head>
 <body>
     <div class="navbar navbar-inverse" role="navigation">
         <a class="navbar-brand" href="#">
             <span class="hidden-xs">SPORTS STORE</span>
             <div class="visible-xs">SPORTS</div>
             <div class="visible-xs">STORE</div>
         </a>
     </div>
     <div>
         @if (TempData["message"] != null)
         {
             <div class="alert alert-success">@TempData["message"]</div>
         }
         @RenderBody()
     </div>
 </body>
 </html>

运行程序，在/Admin/Create视图上，在空的表单元素页面上点击Save按钮，发现新的表达验证直接在客户端完成了。

你也可以修改Web.config文件里的ClientValidationEnabled属性和UnobtrusiveJavaScriptEnabled属性，将他们都改为false（默认值都为true），来禁用客户端验证（变成服务器端验证）。

添加Admin路由规则

这时候，如果我们访问URL：/Admin，将继续返回Product控制器的List视图，将Admin字符串作为category参数传入List方法Action。而此时，我们希望访问/Admin/Index视图。

此时我们需要修改RouteConfig.cs代码文件的方法RegisterRoutes，向路由表头部插入新的路由规则（新的路由规则代码放在第二个位置）。

 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Web;
 using System.Web.Mvc;
 using System.Web.Routing;

 namespace SportsStore
 {
     public class RouteConfig
     {
         public static void RegisterRoutes(RouteCollection routes)
         {
             routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

             routes.MapRoute(
                 name: null,
                 url: "",
                 defaults: new { controller = "Product", action = "List", category = (string)null, page =  }
             );

             routes.MapRoute(
                 name: null,
                 url: "Admin",
                 defaults: new { controller = "Admin", action = "Index" }
          );

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

             routes.MapRoute(
                 name: null,
                 url: "{category}",
                 defaults: new { controller = "Product", action = "List", page =  }
             );

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

             routes.MapRoute(
                 name: "Default",
                 url: "{controller}/{action}/{id}",
                 defaults: new { controller = "Product", action = "List", id = UrlParameter.Optional }
             );
         }
     }
 }

新的路由规则的url是Admin，控制器是AdminController，Action是Index方法。

这时运行程序，访问/Admin页面，将得到/Admin/Index视图。

而其他的路由规则均不受影响。