Thuc hanh tao website ban hang

Tạo website bán hàng Tổng quan Bài thực hành hướng dẫn bạn tạo website bán hàng có chức bản: - Hiển thị thơng tin sản phẩm - Chức giỏ hàng: + Thêm sản phẩm vào giỏ hàng + Xóa sản phẩm khỏi giỏ hàng + Checkout giỏ hàng Solution gồm có project sau: Tên project OnlineShop.Domain Project Template Class Library OnlineShop.WebUI ASP.NET MVC4 Web Application (Chọn Basic template) Unit Test Project OnlineShop.UnitTests Mô tả Chứa tất lớp Entities lớp xử lý logic liên quan tới nghiệp vụ Chứa lớp để truy xuất liệu Chứa website, chứa lớp Controller, View Chứa Unit tests dùng để test cho project Domain WebUI Các Reference project mô tả bảng sau Tên project OnlineShop.Domain OnlineShop.WebUI Tools sử dụng Không Ninject Moq OnlineShop.UnitTests Ninject Moq Reference Projects Reference Assembly Không System.Web.Mvc System.ComponentModel.DataA nnotations Không OnlineShop.Domain OnlineShop.Domain OnlineShop.WebUI System.Web.Mvc System.Web Microsoft.CShap Tạo Project, thiết lập môi trường, thêm công cụ 2.1 Tạo project WebUI UnitTests Chọn Menu File -> New Project Chọn ngôn ngữ Visual C#, chọn NET Framework 4.5, loại project ASP.NET MVC4 Web Application Đặt tên Project OnlineShop.WebUI, đặt Solution name OnlineShop Check chọn Create directory for solution Nhấn OK Chọn Project Template Basic Chọn View engine Razor Check chọn Create Unit test project đặt tên OnlineShop.UnitTests 2.2 Tạo project OnlineShop.Domain Click phải vào Solution OnlineShop, chọn Add new Project Chọn loại project Class Library, đặt tên project OnlineShop.Domain Sau tạo xong xóa bỏ file Class1.cs mà visual studio tạo sẵn 2.3 Thiết lập Reference cho project 2.3.1 Một project có reference tới project khác solution Ví dụ: project OnlineShop.WebUI có reference tới project OnlineShop.Domain Right Click lên References project OnlineShop.WebUI  chọn Add Reference Chọn thẻ Solution  check chọn project OnlineShop.Domain bấm OK 2.3.2 Thêm reference tới Assembly có sẵn NET Ví dụ: Project OnlineShop.Domain có reference tới System.Web.Mvc Click phải lên thư mục Reference project OnlineShop.Domain  Add Reference Chọn thẻ Assemblies, gõ tên tìm kiếm “Mvc” vào search bên góc phải trên, check lựa chọn vào System.Web.Mvc (lưu ý chọn phiên 4.0) Bấm OK 2.3.3 Dùng Nuget để tự động thêm thư viện sử dụng 2.3.3.1 Thêm package Ninject vào cho project OnlineShop.WebUI Click phải vào project OnlineShop.WebUI  Manage NuGet Packages Gõ ninject vào tìm kiếm, bấm nút Install để cài đặt gói Ninject IoC container for NET vào project 2.4 Thiết lập ControllerFactory cho project OnlineShop.WebUI Tạo thư mục tên Infrastruture project OnlineShop.WebUI Trong thư mục Infrastructure, tạo lớp tên NinjectControllerFactory sau: using using using using using using using using System; System.Collections.Generic; System.Linq; System.Web; System.Web.Mvc; System.Web.Routing; Moq; Ninject; namespace OnlineShop.WebUI.Infrastructure { public class NinjectControllerFactory : DefaultControllerFactory { private IKernel ninjectKernel; public NinjectControllerFactory() { ninjectKernel = new StandardKernel(); this.AddBindings(); } protected override IController GetControllerInstance(RequestContext requestContext , Type controllerType) { IController result; if (controllerType == null) return null; Đặt tên NavigationController Nhấn Add Thêm vào Controller action Menu sau: using using using using using System; System.Collections.Generic; System.Linq; System.Web; System.Web.Mvc; namespace OnlineShop.WebUI.Controllers { public class NavigationController : Controller { public string Menu() { return "This is navigation controller"; } } } 4.2 Hiển thị Menu từ NavigationController Mở file _Layout.cshtml thư mục Views/Shared sửa sau: @ViewBag.Title @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") WEBSITE BÁN HÀNG @Html.Action("Menu", "Navigation") @RenderBody() @Scripts.Render("~/bundles/jquery") @RenderSection("scripts", required: false) Chạy website, bạn thấy kết hình Các bạn thấy, bên menu trái nội dung chuỗi “This is navigation controller” hiển thị nội dung trả action Menu controller NavigationController Trong source code file _Layout.cshtml, menu sinh cách gọi hàm Action Html helper @Html.Action("Menu", "Navigation") Khi gọi phương thức @Html.Action(“Ten Action”, “Ten controller” ) kết action chèn vào nội dung html vị trí gọi Cách khác tương tự @{ Html.RenderAction("Menu", "Navigation"); } 4.3 Sửa Action Menu để hiển thị danh sách Product Category Mở controller NavigationController sửa lại sau: using using using using using using OnlineShop.Domain.Abstracts; System; System.Collections.Generic; System.Linq; System.Web; System.Web.Mvc; namespace OnlineShop.WebUI.Controllers { public class NavigationController : Controller { IProductRepository repository; public NavigationController(IProductRepository productRepository) { this.repository = productRepository; } public PartialViewResult Menu() { IEnumerable categories = repository.Products.Select(p => p.Category).Distinct(); return PartialView(categories); } } } 4.4 Tạo PartialView menu Click phải vào phương thức Menu lớp NavigationController, chọn Add View Nhấn Add Nội dung PartialView Menu (file Menu.cshtml thư mục Views/Navigation) sau: Code: @model IEnumerable @Html.ActionLink("Home","List","Product") @foreach (var categoryName in Model) { @Html.RouteLink(categoryName, new { controller = "Product", action = "List", category = categoryName, page = }) } 4.5 Thêm CSS cho menu Mở file Site.css thư mục Contents thêm vào cuối file sau: 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 #ff6a00; } DIV#categories A.selected { background-color: #666; color: White; } DIV#categories A:hover { background-color: #CCC; } DIV#categories A.selected:hover { background-color: #666; } Chạy lại website xem kết quả: Danh sách nhóm sản phẩm link hiển thị menu bên trái, nhiên, click vào link danh sách sản phẩm chưa lọc Tiếp theo lọc dánh sách sản phẩm theo nhóm 4.6 Lọc danh sách sản phẩm theo Category Mở file ProductController.cs thư mục Controller, sửa lại Action List sau: public ActionResult List(string category = null, int page = 1) { ProductListViewModel model = new ProductListViewModel(); model.Products = repository.Products Where(p => category==null || p.Category == category) OrderBy(p => p.ProductID) Skip((page - 1) * PageSize) Take(PageSize); model.PagingInfo = new PagingInfo { ItemsPerPage = this.PageSize, TotalItems = repository.Products Where(p => category == null || p.Category == category) Count(), CurrentPage = page }; return View(model); } Thêm vào tham số category nhóm sản phẩm muốn xem Lọc danh sách sản phẩm, nhận sản phẩm thuộc nhóm Chạy lại website click vào link category menu bên trái thấy sản phẩm lọc Tiếp theo, cấu hình lại Route để đường dẫn URL đẹp 4.7 Thiết lập Route có category Mở file RouteConfig.cs thư mục App_Start sửa lại sau: using using using using using using System; System.Collections.Generic; System.Linq; System.Web; System.Web.Mvc; System.Web.Routing; namespace OnlineShop.WebUI { 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 = 1} ); 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 } ); } Trong phương thức MapRoute, tham số constraints dùng để kiểm tra điều kiện tham số constraints: new { page = @"\d+" } cho biết tham số page phải match với regular expression “\d+”, hay page phải dãy số liên tiếp số Lưu ý thứ tự thiết lập Route, nhận URL match URL theo thứ tự từ xuống áp dụng ln match Ví dụ: URL “” Kết Controller=product Action=List Giải thích Chuỗi “” match với biểu thức route đầu tiên, sử dụng Page23 PageNum23 Sport/Page3 Page4/Page3 Category=null Page=1 giá trị mặc định new Controller =Product Action=List Category=null Page=23 Controller=Product Action=List Category=PageNum23 Page=1 Controller=Product Action=List Category=Sport Page=3 Controller=Product Action=List Category=Page4 Page=3 Nó match với route Page{page} { Controller = "Product", action = "List", category =(string) null, page = } Nó khơng match với route Page{page}, match với route sau “{category}” 4.8 Làm bật Category chọn menu Sửa lại Controller NavigationController sau: using using using using using using OnlineShop.Domain.Abstracts; System; System.Collections.Generic; System.Linq; System.Web; System.Web.Mvc; namespace OnlineShop.WebUI.Controllers { public class NavigationController : Controller { IProductRepository repository; public NavigationController(IProductRepository productRepository) { this.repository = productRepository; } public PartialViewResult Menu(string category=null) { ViewBag.SelectedCategory = category; IEnumerable categories = repository.Products.Select(p => p.Category).Distinct(); return PartialView(categories); } } } Thêm tham số category vào action Menu để biết category hiển thị Category trọn gửi qua View thông qua ViewBag ViewBag.SelectedCategory = category; Ở bên PartialView Menu, sử dụng giá trị SelectedCategory ViewBag để biết category hiển thị highlight Mở Menu Partial view Action Menu (file Menu.cshtml thư mục Views/Navigation) sửa sau: @model IEnumerable @Html.ActionLink("Home","List","Product") @foreach (var categoryName in Model) { @Html.RouteLink(categoryName, new { controller = "Product", action = "List", category = categoryName, page = }, new { @class = categoryName == ViewBag.SelectedCategory ? "selected" : null } ) } Thêm thuộc tính class = “selected” vào cho link category name với selected category Do thuộc tính class HTML trùng với từ khóa class C# nên ta dùng @class để khỏi bị trùng Tạo chức giỏ hàng quản lý gi ỏ hàng 5.1 Thay đổi hiển thị sản phẩm, thêm nút Thêm vào giỏ hàng 5.2 Tạo lớp ShoppingCard Trong thư mục Entities project OnlineShop.Domain, tạo hai lớp sau: Lớp ShoppingCardItem, thể hàng giỏ hàng Lớp ShoppingCard mô thể giỏ hàng Code lớp ShoppingCardItem using using using using System; System.Collections.Generic; System.Linq; System.Text; namespace OnlineShop.Domain.Entities { public class ShoppingCardItem { public Product Product { get; set; } public int Quantity { get; set; } public decimal Value { get { return Quantity * Product.Price; } } } } Code lớp ShoppingCard sau: using using using using System; System.Collections.Generic; System.Linq; System.Text; namespace OnlineShop.Domain.Entities { public class ShoppingCard { private List CardItems = new List(); public IEnumerable Items { get { return CardItems; } } public decimal TotalValue { get{ return Items.Sum(i => i.Value);} } public void AddItem(Product p, int quantity) { ShoppingCardItem item = CardItems.Where(i => i.Product.ProductID == p.ProductID).FirstOrDefault(); if (item == null) CardItems.Add(new ShoppingCardItem { Product = p, Quantity = quantity }); else item.Quantity += quantity; } public void RemoveItem(Product p) { CardItems.RemoveAll(i => i.Product.ProductID == p.ProductID); } public void Clear() { CardItems.Clear(); } } } 5.3 Tạo ShoppingCard Controller Tạo controller ShoppingCard sau: ... trị Product Repository cách implement IProductRepository Do chưa muốn thời gian xây dựng csdl, nhanh ta tạo lớp product repository giả trả lưu trữ trả đối tượng product nhớ ko làm việc với csdl... ninjectKernel.Bind().To(); thay MockProductRepository lớp ProductRepository khác Nhấn Ctr+F5 để chạy website, kết nhận lỗi hình sau: Đây ta chưa thiết lập Default Route, 3.2.4 Thiết lập Default Route... @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") WEBSITE BÁN HÀNG chứa ds nhóm sản phẩm, links tới nhóm sản phẩm