一步步打造一個簡單的 MVC 電商網站 - BooksStore（一）
本系列的 GitHub地址：https://github.com/liqingwen2015/Wen.BooksStore
《一步步打造一個簡單的 MVC 電商網站 - BooksStore（一）》（發布時間：2017-03-30 ）
《一步步打造一個簡單的 MVC 電商網站 - BooksStore（二）》（發布時間：2017-03-31）
《一步步打造一個簡單的 MVC 電商網站 - BooksStore（三）》（發布時間：2017-04-01）
《一步步打造一個簡單的 MVC 電商網站 - BooksStore（四）》（發布時間：2017-04-05）
簡介
主要功能與知識點如下：
分類、產品瀏覽、購物車、結算、CRUD（增刪改查） 管理、發郵件、分頁、模型綁定、認證過濾器和單元測試等（預計四篇、周五、下周一和周二）。
【備注】項目使用 VS2015 + C#6 進行開發，有問題請發表在留言區哦，還有，頁面長得比較丑，請見諒。
目錄
- 創建項目架構
- 創建域模型實體
- 創建單元測試
- 創建控制器與視圖
- 創建分頁
- 加入樣式
一、創建項目架構
1.新建一個解決方案“BooksStore”，並添加以下項目：
Web MVC 為一個空的 MVC 項目：
2.添加項目引用（需要使用 NuGet）：
這是不同項目需要引用的類庫和項目
AddBindings() 添加綁定方法，先留空。
public class NinjectControllerFactory : DefaultControllerFactory { private readonly IKernel _kernel; public NinjectControllerFactory() { _kernel = new StandardKernel(); AddBindings(); } protected override IController GetControllerInstance(RequestContext requestContext, Type controllerType) { return controllerType == null ? null : (IController) _kernel.Get(controllerType); } /// <summary> /// 添加綁定 /// </summary> private void AddBindings() { } }
ControllerBuilder.Current.SetControllerFactory(new NinjectControllerFactory());
public class MvcApplication : System.Web.HttpApplication { protected void Application_Start() { AreaRegistration.RegisterAllAreas(); RouteConfig.RegisterRoutes(RouteTable.Routes); ControllerBuilder.Current.SetControllerFactory(new NinjectControllerFactory()); } }
二、創建域模型實體
public class Book { /// <summary> /// 標識 /// </summary> public int Id { get; set; } /// <summary> /// 名稱 /// </summary> public string Name { get; set; } /// <summary> /// 描述 /// </summary> public string Description { get; set; } /// <summary> /// 價格 /// </summary> public decimal Price { get; set; } /// <summary> /// 分類 /// </summary> public string Category { get; set; } }
有了實體之后，我們應該創建一個“庫”對該實體進行操作，而這種持久化邏輯操作也應該和域模型是進行隔離的。
2.先定義一個接口 IbookRepository，在根目錄創建一個名為 Abstract 的文件夾，顧名思義就是應該放置一些抽象的類，如接口。
public interface IBookRepository { IQueryable<Book> Books { get; } }
我們通過該接口就可以得到對應類的相關信息，而不需要去管該數據如何存儲，以及存儲的位置，這就是存儲庫模式的本質。
3.接下來，我們就需要對數據庫進行操作了，我們使用簡單的 EF（ORM 對象關系模型） 去對數據庫進行操作，所以需要自己通過 Nuget 下載 EF 的類庫。
4.因為之前定義了接口類，接下來就應該定義實現該接口的類了
安裝完之后，再次建立一個名為 Concrete 的文件夾，存放實例。
在里面創建一個 EfDbContext 的類，派生於 DbContext，該類會為用戶要使用的數據庫中的每個表自動的定義一個屬性。該屬性名為 Books，指定了表名，DbSet<Book> 表示為 Book 實體的表模型，Book 對象相當於 Books 表中的行（記錄）。
public class EfDbContext : DbContext { public DbSet<Book> Books { get; set; } }
再創建一個 EfBookRepository 存儲庫類，它實現 IBookRepository 接口，使用了上文創建的 EfDbContext 上下文對象，包含了具體的方法定義。
public class EfBookRepository : IBookRepository { private readonly EfDbContext _context = new EfDbContext(); public IQueryable<Book> Books => _context.Books; }
5.現在只差在數據庫新建一張表了。
CREATE TABLE Book ( Id INT IDENTITY PRIMARY KEY, Name NVARCHAR(100), Description NVARCHAR(MAX), Price DECIMAL, Category NVARCHAR(50) )
並插入測試數據：
INSERT INTO dbo.Book ( Name , Description , Price , Category ) VALUES ( N'C#從入門到精通' , -- Name - nvarchar(100) N'好書-C#從入門到精通' , -- Description - nvarchar(max) 50 , -- Price - decimal N'.NET' -- Category - nvarchar(50) ) INSERT INTO dbo.Book ( Name , Description , Price , Category ) VALUES ( N'ASP.NET從入門到精通' , -- Name - nvarchar(100) N'好書-ASP.NET從入門到精通' , -- Description - nvarchar(max) 60 , -- Price - decimal N'.NET' -- Category - nvarchar(50) ) INSERT INTO dbo.Book ( Name , Description , Price , Category ) VALUES ( N'多線程從入門到精通' , -- Name - nvarchar(100) N'好書-多線程從入門到精通' , -- Description - nvarchar(max) 65 , -- Price - decimal N'.NET' -- Category - nvarchar(50) ) INSERT INTO dbo.Book ( Name , Description , Price , Category ) VALUES ( N'java從入門到放棄' , -- Name - nvarchar(100) N'好書-java從入門到放棄' , -- Description - nvarchar(max) 65 , -- Price - decimal N'java' -- Category - nvarchar(50) ) INSERT INTO dbo.Book ( Name , Description , Price , Category ) VALUES ( N'sql從入門到放棄' , -- Name - nvarchar(100) N'好書-sql從入門到放棄' , -- Description - nvarchar(max) 45 , -- Price - decimal N'sql' -- Category - nvarchar(50) ) INSERT INTO dbo.Book ( Name , Description , Price , Category ) VALUES ( N'sql從入門到出家' , -- Name - nvarchar(100) N'好書-sql從入門到出家' , -- Description - nvarchar(max) 45 , -- Price - decimal N'sql' -- Category - nvarchar(50) ) INSERT INTO dbo.Book ( Name , Description , Price , Category ) VALUES ( N'php從入門到出家' , -- Name - nvarchar(100) N'好書-php從入門到出家' , -- Description - nvarchar(max) 45 , -- Price - decimal N'php' -- Category - nvarchar(50) )
因為我希望表名為 Book，而不是 Books，所以我在之前的 Book 類上加上特性 [Table("Book")] ：
三、創建單元測試
1.做完預熱操作后，你可能想立即以界面的的方式進行顯示，別急，先用單元測試檢查一下我們對數據庫的操作是否正常，通過對數據進行簡單的讀取，檢查下連接是否成功。
2.單元測試也需要引入 ef 類庫（Nuget）。
3.安裝完之后會生成一個 app.config 配置文件，需要額外添加一行連接字符串（在后續的 Web UI 項目里，也需要加上這條信息，不然會提示對應的錯誤信息）。
<connectionStrings> <add name="EfDbContext" connectionString="server=.;database=TestDb;uid=sa;pwd=123" providerName="System.Data.SqlClient"/> </connectionStrings>
4.當所有前置工作都准備好了的時候，就應該填寫測試方法了，因為我插入了 7 條數據，這里我就判斷一下從數據庫讀取出的行數是否為 7 ：
[TestMethod] public void BooksCountTest() { var bookRepository=new EfBookRepository(); var books = bookRepository.Books; Assert.AreEqual(books.Count(),7); }
5.在該方法體的內部單擊右鍵，你可以看到一個“運行測試”的選項，這時你可以嘗試單擊它：
從這個符號可以看到，是成功了！
接下來，我們要正式從頁面顯示我們想要的信息了。
四、創建控制器與視圖
1.先新建一個空的控制器：BookController：
2.需要我們自定義一個 Details 方法，用於后續與界面進行交互。
public class BookController : Controller { private readonly IBookRepository _bookRepository; public BookController(IBookRepository bookRepository) { _bookRepository = bookRepository; } /// <summary> /// 詳情 /// </summary> /// <returns></returns> public ActionResult Details() { return View(_bookRepository.Books); } }
3.接下來，要創建一個視圖 View 了。
4.將 Details.cshtml 的內容替換為下面的：
@model IEnumerable<Wen.BooksStore.Domain.Entities.Book> @{ ViewBag.Title = "Books"; } @foreach (var item in Model) { <div> <h3>@item.Name</h3> @item.Description <h4>@item.Price.ToString("C")</h4> <br /> <hr /> </div> }
5.改下默認的路由機制，讓他默認跳轉到該頁面。
6.還有一點需要注意的是，因為我們使用了 Ninject 容器，並且需要對控制器中的構造函數中的參數 IBookRepository 進行解析，告訴他將使用哪個對象對該接口進行服務，也就是需要修改之前的 AddBindings 方法：
7.運行的效果大致如下（因為加了點 CSS 樣式，所以顯示的效果可能有些許不同），結果是一致的。
五、創建分頁
1.在 Models 文件夾新增一個 PagingInfo.cs 分頁信息類。
/// <summary> /// 分頁信息 /// </summary> public class PagingInfo { /// <summary> /// 總數 /// </summary> public int TotalItems { get; set; } /// <summary> /// 頁容量 /// </summary> public int PageSize { get; set; } /// <summary> /// 當前頁 /// </summary> public int PageIndex { get; set; } /// <summary> /// 總頁數 /// </summary> public int TotalPages => (int)Math.Ceiling((decimal)TotalItems / PageSize); }
2.新增一個 HtmlHelpers 文件夾存放一個基於 Html 幫助類的擴展方法：
public static class PagingHelper { /// <summary> /// 分頁 /// </summary> /// <param name="helper"></param> /// <param name="pagingInfo"></param> /// <param name="func"></param> /// <returns></returns> public static MvcHtmlString PageLinks(this HtmlHelper helper, PagingInfo pagingInfo, Func<int, string> func) { var sb = new StringBuilder(); for (var i = 1; i <= pagingInfo.TotalPages; i++) { //創建 <a> 標簽 var tagBuilder = new TagBuilder("a"); //添加特性 tagBuilder.MergeAttribute("href", func(i)); //添加值 tagBuilder.InnerHtml = i.ToString(); if (i == pagingInfo.PageIndex) { tagBuilder.AddCssClass("selected"); } sb.Append(tagBuilder); } return MvcHtmlString.Create(sb.ToString()); } }
3.添加完畢后需要在配置文件內加入該命名空間
4.現在要重新修改 BookController.cs 控制器內的的代碼，並添加新的視圖模型類 BookDetailsViewModels.cs，讓它繼承之前的分頁類。
public class BookDetailsViewModels : PagingInfo { public IEnumerable<Book> Books { get; set; } }
修改后的控制器代碼：
public class BookController : Controller { private readonly IBookRepository _bookRepository; public int PageSize = 5; public BookController(IBookRepository bookRepository) { _bookRepository = bookRepository; } /// <summary> /// 詳情 /// </summary> /// <param name="pageIndex"></param> /// <returns></returns> public ActionResult Details(int pageIndex = 1) { var model = new BookDetailsViewModels() { Books = _bookRepository.Books.OrderBy(x => x.Id).Skip((pageIndex - 1) * PageSize).Take(PageSize), PageSize = PageSize, PageIndex = pageIndex, TotalItems = _bookRepository.Books.Count() }; return View(model); } }
5.修改視圖模型后，對應的視圖頁也需要修改
@model Wen.BooksStore.WebUI.Models.BookDetailsViewModels @{ ViewBag.Title = "Books"; } @foreach (var item in Model.Books) { <div> <h3>@item.Name</h3> @item.Description <h4>@item.Price.ToString("C")</h4> <br /> <hr /> </div> } <div class="pager"> @Html.PageLinks(Model, x => Url.Action("Details", new { pageIndex = x })) </div>
六、加入樣式
1.頁面的樣式簡單的設計為 3 大板塊，頂部為標題，左側邊欄為分類，主模塊將顯示具體內容。
我們現在要在 Views 文件夾下創建一個文件 _ViewStart.cshtml，再創建一個 Shared 的文件夾和文件 _Layout.cshtml。
2._Layout.cshtml 這是布局頁，當代碼執行到 @RenderBody() 時，就會負責將之前 Details.cshtml 的內容進行渲染：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<link href="~/Contents/Site.css" rel="stylesheet" />
</head>
<body>
<div id="header">
<div class="title">圖書商城</div>
</div>
<div id="sideBar">分類</div>
<div id="content">
@RenderBody()
</div>
</body>
</html>
_ViewStart.cshtml 該文件表示默認的布局頁為該視圖文件：
@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
3.網站的根目錄下也要添加一個名為 Contents 的文件夾，用於存放 CSS。
body { } #header, #content, #sideBar { display: block; } #header { background-color: green; border-bottom: 2px solid #111; color: White; } #header, .title { font-size: 1.5em; padding: .5em; } #sideBar { float: left; width: 8em; padding: .3em; } #content { border-left: 2px solid gray; margin-left: 10em; padding: 1em; } .pager { text-align: right; padding: .5em 0 0 0; margin-top: 1em; } .pager A { font-size: 1.1em; color: #666; padding: 0 .4em 0 .4em; } .pager A:hover { background-color: Silver; } .pager A.selected { background-color: #353535; color: White; }
現在，分頁也已經有了效果，基本界面就出來了。
本系列的 GitHub地址：https://github.com/liqingwen2015/Wen.BooksStore
錯誤修正
感謝 韓之一 ：BooksCountTest() 這個方法里 Assert.AreEqual(books.Count(), 7); 參數寫反了, 第一個是期望值, 第二個是真實值。
【博主】反骨仔
【原文】http://www.cnblogs.com/liqingwen/p/6640861.html
【參考】《精通 ASP.NET MVC ...》