ASP.net Mvc SportsSpore專案開發(五）
阿新 • • 發佈：2019-02-18
1.新增分類管理
此次需要實現的是對物品資訊的讀取，新增更新和刪除的操作。這些動作統稱為“CRUD”。
建立CRUD控制器，在Controllers檔案下新增控制器AdminController
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 AdminController : Controller { private IProductsRepository repository; public AdminController(IProductsRepository 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}已儲存", product.Name); return RedirectToAction("Index"); } else { return View(product); } } public ViewResult Create() { return View("Edit", new Product()); } public ActionResult Delete(int productId) { Product delete = repository.DeleteProduct(productId); if (delete != null) { TempData["message"] = string.Format("{0}已刪除", delete.Name); } return RedirectToAction("Index"); } } }
所有的操作的實現都寫在裡面了。
建立新的Razor佈局，在Views/Share檔案下，並新增（MVC5佈局頁面）_AdminLayout.cshtml.
@{ Layout = null; } <!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.10.2.js"></script> <script src="~/Scripts/jquery.validate.js"></script> <script src="~/Scripts/jquery.validate.unobtrusive.js"></script> <title></title> </head> <body> <div> @if (TempData["message"] != null) {//提示資訊 <div class="alert alert-success">@TempData["message"]</div> } @RenderBody() </div> </body> </html>
剛才已經建立了一個佈局，現在新增一個檢視頁，在Views/Admin檔案下新增檢視Index，模板選擇List（列表），模板類選擇Product，勾選使用佈局頁，選擇剛剛建立的佈局頁_AdminLayout,然後建立的Index檢視中生成一些固定的程式碼，可以看到包含所有的資訊展示和操作，但是執行後，展示很醜，所有重新編寫檢視頁：
@model IEnumerable<SportsStore.Domain.Entities.Product> @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_AdminLayout.cshtml"; } <div class="panel panel-default"> <div class="panel-heading"> <h3>所有物品</h3> </div> <div class="panel-body"> <table class="table table-striped table-condensed table-bordered"> <tr> <th class="text-center">序號</th> <th class="text-center">名稱</th> <th class="text-center">價格</th> <th class="text-center">動作</th> @*<th class="text-center">編輯</th>*@ </tr> @foreach (var item in Model) { <tr> <td class="text-center"> @item.ProductID </td> <td class="text-center"> @item.Name </td> <td class="text-center"> @item.Price.ToString("c") </td> <td class="text-center"> @Html.ActionLink("刪除", "Delete",new { item.ProductID},new { @class = "btn btn-default" }) @Html.ActionLink("編輯", "Edit", new { item.ProductID }, new { @class = "btn btn-default" }) @*@using (Html.BeginForm("Delete", "Admin")) { @Html.Hidden("ProductID",item.ProductID) <input type="submit" class="btn btn-default btn-xs" value="刪除"/> }*@ </td> </tr> } </table> </div> <div class="panel-footer"> @Html.ActionLink("新增", "Create", null, new { @class = "btn btn-default"}) </div> </div>
建立Edit檢視，在動作方法右擊新增檢視：
@model SportsStore.Domain.Entities.Product
@{
ViewBag.Title = "Admin:Edit" + @Model.Name;
Layout = "~/Views/Shared/_AdminLayout.cshtml";
}
<div class="panel">
<div class="panel-heading">
<h3>編輯</h3>
</div>
@using (Html.BeginForm("Edit","Admin"))
{
<div class="panel-body">
@Html.HiddenFor(m=>m.ProductID)
@foreach(var property in ViewData.ModelMetadata.Properties)
{
if (property.PropertyName != "ProductID")
{
<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" })
}
@Html.ValidationMessage(property.PropertyName)
</div>
}
}
</div>
<div class="panel-footer">
<input type="submit" value="儲存" class="btn btn-primary"/>
@Html.ActionLink("取消", "Index", null, new { @class = "btn btn-default" })
</div>
}
</div>對儲存庫介面新增一個方法在 SportsStore.Domain下的Abstract下的 IProductsRepository
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using SportsStore.Domain.Entities;
namespace SportsStore.Domain.Abstract
{//建立一個儲存庫模式
public interface IProductsRepository
{//該介面使用了IQueryable<T>介面，可以讓呼叫程式獲取一個Product物件序列，而不必說明從哪或如何獲取和接收資料。
IEnumerable<Product> Products { get; }
void SaveProduct(Product product);
Product DeleteProduct(int productID);
}
}相應地在Concrete下的EFProductRepository中實現介面的方法
public Product DeleteProduct(int productID)
{
Product dbEntry = context.Products.Find(productID);
if (dbEntry != null)
{
context.Products.Remove(dbEntry);
context.SaveChanges();
}
return dbEntry;
}
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;
}
}
context.SaveChanges();
}執行效果圖：
點選SportsStore即可跳轉到商店的物品頁
