Đang tải... (xem toàn văn)
@Html.ActionLink("Create New","Create")
@Html.DisplayNameFor(model @Html.DisplayNameFor(model @Html.DisplayNameFor(model @Html.DisplayNameFor(model =>model.Name) =>model.Description) =>model.Price) =>model.Category) @foreach (var item in Model){ @Html.DisplayFor(modelItem =>item.Name) @Html.DisplayFor(modelItem =>item.Description) @Html.DisplayFor(modelItem =>item.Price) @Html.DisplayFor(modelItem =>item.Category) @Html.ActionLink("Edit", "Edit", new { id=item.ProductID })| @Html.ActionLink("Details", "Details", new {id=item.ProductID })| @Html.ActionLink("Delete", "Delete", new { id=item.ProductID }) } VS tìm kiểu đối tượng view model phát sinh element bảng liên quan đến thuộc tính định nghĩa kiểu model Chúng ta thấy cách mà view dựng nên cách chạy ứng dụng điều hướng cho đến /Admin/Index Hình 11-3 miêu tả kết Figure 11-3 Rendering the scaffold Listview Scafold view cố gắng tạo cấu hình hợp lý dựa sở view Chúng ta có cột cho thuộc tính lớp Product nối đến tác vụ CRUD dẫn đến action method Admin controller (tuy nhiên, từ lúc tạo controller khơng sử dụng tính scafolding nên action method khơng tồn ) Tính Scafolding khéo léo view phát sinh đơn giản bình thương khơng đáng có với project có độ phức tạp Lời khuyên nên bắt đầu với controller rỗng (empty controller), views layout thêm tính cần vào cần thiết Trở với hướng tiếp cận tự thực hành, thay đổi file Index.cshtml List 11-4 Listing 11-4.Modifying the Index.cshtmlView @modelIEnumerable @{ ViewBag.Title = "Admin: AllProducts"; Layout ="∼/Views/Shared/_AdminLayout.cshtml"; } AllProducts ID Name Price Actions @foreach (var item in Model){ @item.ProductID @Html.ActionLink(item.Name, "Edit", new { item.ProductID}) @item.Price.ToString("c") @using (Html.BeginForm("Delete", "Admin")){ @Html.Hidden("ProductID",item.ProductID) } } @Html.ActionLink("Add a new product", "Create", null, new { @class = "btn btn-default"}) View thể thông tin form chắn hơn, bỏ qua số thuộc tính lớp Product dùng Boostrap để đặt thơng số style Chúng ta xem cách view dựng lên hình 11-4 Figure 11-4 Rendering the modified Indexview Bây có trang danh sách ổn.Quản trị viên thấy product catalog có nút để thêm xóa kiểm tra thơng tin Trong phần thêm chức để hỗ trợ cho hoạt động Now I have a nice list page The administrator can see the products in the catalog and there are links or buttons to add, delete, and inspect items In the following sections, I will add the functionality to support each of these actions Sửa thông tin Products Để cung cấp tính tạo sửa , thêm trang cho phép sửa thông tin tương tự hình 11 -1 Cơng việc chia thành hai phần Hiển thị trang cho phép người quản trị thay đổi giá trị thuộc tính product Thêm action method xử lý thay đổi chúng submit (gửi đi) Tạo Edit action method List 11-5 nội dung Edit method thêm vào Admin controller Đây action method định lời lời gọi đến công cụ hỗ trợ Html.ActionLink torng Index view Listing 11-5.Adding the Edit Action Method in the AdminController.cs File usingSystem.Linq; usingSystem.Web.Mvc; usingSportsStore.Domain.Abstract; usingSportsStore.Domain.Entities; namespace SportsStore.WebUI.Controllers { public class AdminController : Controller{ private IProductRepositoryrepository; public AdminController(IProductRepository repo) { repository =repo; } public ViewResult Index(){ returnView(repository.Products); } public ViewResult Edit(int productId) { Product product =repository.Products FirstOrDefault(p =>p.ProductID == productId); returnView(product); } } } Hàm đơn giản tìm product có ID tương ứng với tham số productId truyền đối tượng view model đến View method UNIT TEST: THE EDIT ACTIONMETHOD Tôi muốn kiểm thử hành vi Edit action method Trước tiên lấy sản phẩm mà yêu cầu cung cấp ID có tồn Rõ ràng muốn đảm bảo sửa product mà mong muốn Hành vi thứ hai không lấy sản phẩm u cầu ID khơng có vùng lưu trữ Sau hàm kiểm thử thêm vào file test AdminTest.cs [TestMethod] publicvoid Can_Edit_Product(){ // Arrange - create the mock repository Mockmock = new Mock(); mock.Setup(m =>m.Products).Returns(new Product[]{ newProduct {ProductID = 1, Name = "P1"}, new Product {ProductID = 2, Name = "P2"}, new Product {ProductID = 3, Name ="P3"}, }); // Arrange - create thecontroller AdminController target = newAdminController(mock.Object); //Act Product p1 = target.Edit(1).ViewData.Model as Product; Product p2 = target.Edit(2).ViewData.Model as Product; Product p3 = target.Edit(3).ViewData.Model asProduct; //Assert Assert.AreEqual(1, p1.ProductID); Assert.AreEqual(2, p2.ProductID); Assert.AreEqual(3,p3.ProductID); } [TestMethod] publicvoid Cannot_Edit_Nonexistent_Product(){ // Arrange - create the mock repository Mockmock = new Mock(); mock.Setup(m =>m.Products).Returns(new Product[]{ newProduct {ProductID = 1, Name = "P1"}, new Product {ProductID = 2, Name = "P2"}, new Product {ProductID = 3, Name ="P3"}, }); // Arrange - create thecontroller AdminController target = newAdminController(mock.Object); //Act Product result =(Product)target.Edit(4).ViewData.Model; // Assert Assert.IsNull(result); } Creating the EditView (Tạo Edit View) Bây có action method, tạo view để dựng nên Chuột phải vào folder Views/Admin Solution Explorer chọn Add>MVC5 View Page (Razor) phần menu Đặt tên thành Edit.cshtml, nhấn nút để tạo file thay đổi nội dung List 11-6 Listing 11-6 The Contents of the Edit cshtml File @modelSportsStore.Domain.Entities.Product @{ ViewBag.Title = "Admin: Edit " + @Model.Name; Layout ="∼/Views/Shared/_AdminLayout.cshtml"; } Edit@Model.Name @using (Html.BeginForm()){ @Html.EditorForModel() @Html.ActionLink("Cancel and return to List","Index") 10 Figure 11-7.Displaying the editor page forproducts Updating the ProductRepository Trước xử lý thay đổi, cần nâng cấp vùng lưu product cho phép khả lưu thay đổi Đầu tiên thêm method vào IProductRepository interfaces list 11-9 (để nhắc lại, thấy interface folder Abstract project SportStore.Domain) Before I can process edits, I need to enhance the product repository so that it is able to save changes First, I will add a new method to the IProductRepository interface, as shown in Listing 11-9 (As a reminder, you will find this interface in the Abstract folder of the SportsStore.Domain project.) Listing 11-9.Adding a Method to the IProductRespository.cs File using System.Collections.Generic; usingSportsStore.Domain.Entities; 14 namespace SportsStore.Domain.Abstract { public interface IProductRepository{ IEnumerable Products { get;} voidSaveProduct(Productproduct); } } Chúng ta sau thêm method vào việc thực thi Entity Framework vùng lưu trữ, định nghĩa Concrete/EFProductRepository.cs file List 11-10 Listing 11-10.Implementing the SaveProduct Method in the EFProductRepository.cs File using SportsStore.Domain.Abstract; using SportsStore.Domain.Entities; usingSystem.Collections.Generic; namespace SportsStore.Domain.Concrete{ public class EFProductRepository : IProductRepository { private EFDbContext context = newEFDbContext(); public IEnumerable Products { get { return context.Products;} } publicvoid SaveProduct(Product product){ if(product.ProductID == 0) { context.Products.Add(product); } else{ Product context.Products.Find(product.ProductID); if(dbEntry != null) { dbEntry.Name =product.Name; 15 dbEntry = dbEntry.Description = product.Description; dbEntry.Price = product.Price; dbEntry.Category =product.Category; } } context.SaveChanges(); } } } Việc thực thi hàm SaveChanges thêm product vào vùng nhớ ProductID 0, khơng áp dụng thay đổi vào vào entry tồn database Tôi không muốn sâu vào chi tiết Entity Framework giải thích từ trước, chủ đề riêng biệt khơng phần MVC Framework.Nhưng có vài điều hàm SaveMethod có mang theo thiết kế ứng dụng MVC Tôi biết cần thực thao tác update nhận tham số có ProductID khơng Tơi thực cách lấy đối tượng Product vùng nhớ với ProductID cập nhật thuộc tính cho chúng khớp với tham số đối tượng Tơi làm Entity Framework lần theo đối tượng tạo từ database Đối tượng truyền đến hàm SaveChanges tạo MVC Framework dùng công cụ model binder mặc định, nghãi Entity Framwork khơng biết đối tượng tham số không áp dụng thay đổi vào sở liệu Có nhiều cách đề giải vấn đề dùng cách đơn giản xác định vùng liên hệ với đối tượng cho phép Entity Framework biết cập nhật cách rõ ràng Hướng tiếp cận thay tạo model binder tùy chỉnh lấy đối tượng từ vùng chứa Đây nghe cách tiếp cận có nét sang trọng địi hỏi thêm khả tìm kiếm vào interface vùng chứa cho phép chúng xác định đối tượng Product giá trị ProductID Handling Edit POSTRequests (Giải Edit POST Request) Ở thời điểm sẵn sàng thực thi nội dung truyền vào Edit action method Admin controller xử lý POST request quản trị viên nhấn vào nút Save Action method thể List 11-11 Listing 11-11.Adding the POST-Handling Edit Action Method in the AdminController.cs File using System.Linq; usingSystem.Web.Mvc; using SportsStore.Domain.Abstract; usingSportsStore.Domain.Entities; namespace SportsStore.WebUI.Controllers { public class AdminController : Controller{ private IProductRepositoryrepository; public AdminController(IProductRepository repo) { repository =repo; } public ViewResult Index(){ returnView(repository.Products); } public ViewResult Edit(int productId) { Product product =repository.Products FirstOrDefault(p =>p.ProductID == productId); 16 returnView(product); } [HttpPost] public ActionResult Edit(Product product) { if (ModelState.IsValid){ repository.SaveProduct(product); TempData["message"] = string.Format("{0} has beensaved", product.Name); returnRedirectToAction("Index"); } else{ // there is something wrong with the data values returnView(product); } } } } Tôi kiểm tra model binder xác thực liệu chuyển đến user cách đọc giá trị thuộc tính ModelState.IsValid Nếu tất ổn, tơi lưu thay đổi vào vừng chứa gọi đến Index action method để trả danh sách sản phẩm Nếu có vấn đề với liệu, tơi dựng lại Edit view cho phép user chỉnh sửa lại cho xác Sau tơi lưu thay đổi vào vùng nhớ, lưu thông điệp cách dùng tính TempData Đây dictionary dàng key/value tương tự với sữ liệu session tính viewbag mà dùng trước Điểm khác chủ yếu session data so với temp data bị xóa kết thúc HTTP request Chúý tơi trả kiểu ActionResult từ hàm Edit Tôi dùng kiểu ViewResult ViewResult bắt nguồn từ ActionResult nóđược dùng muốn framework dừng view Tuy nhiên kiểu khác ActionResults khả dụng, số chúng trả hàm RedirectToAction, sẽđiều hướng lại browser để gọi đến Index action method Chúng ta sẽđề cập việc chương 17 Chúng ta sử dụng ViewBag trường hợp người dùng điều hướng lại ViewBag truyền liệu controller view khơng thể giữ liệu lâu HTTP request hành Tơi dùng tính session data sau thơng điệp vấn lưu giữ lại tơi xóa cách rõ ràng, tơi khơng muốn phải làm Vì tính TempDta hồn hảo cho việc đọc Chúng ta đọc liệu từ view dựng action method mà định hướng lại cho người dùng, định nghĩa phần UNIT TEST: EDITSUBMISSIONS Cho việc yêu cầu POST xử lý Edit action method, cần đảm bảo thay đổi hợp lệ đến đối tượng Product mà model binder tạo truyền đến vùng nhớ product để lưu Tôi muốn kiểm tra thay đổi không hợp lệ (khi mà lỗi model xẩy ra) không quyền vào vùng nhớ Sau hàm kiểm tra [TestMethod] publicvoid Can_Save_Valid_Changes(){ // Arrange - create mockrepository Mockmock = newMock(); // Arrange - create thecontroller AdminController target = newAdminController(mock.Object); // Arrange - create aproduct Product product = new Product {Name ="Test"}; // Act - try to save the product ActionResult result =target.Edit(product); // Assert - check that the repository was called mock.Verify(m =>m.SaveProduct(product)); 17 // Assert - check the method result type Assert.IsNotInstanceOfType(result,typeof(ViewResult)); } [TestMethod] publicvoid Cannot_Save_Invalid_Changes(){ // Arrange - create mockrepository Mockmock = newMock(); // Arrange - create thecontroller AdminController target = newAdminController(mock.Object); // Arrange - create aproduct Product product = new Product { Name= "Test"}; // Arrange - add an error to the model state target.ModelState.AddModelError("error","error"); // Act - try to save theproduct ActionResult result =target.Edit(product); // Assert - check that the repository was notcalled mock.Verify(m =>m.SaveProduct(It.IsAny()),Times.Never()); // Assert - check the method result type Assert.IsInstanceOfType(result,typeof(ViewResult)); } Hiển thị thông điệp xác nhận Tôi xử lý thông điệp lưu dùng TempData file laytout _AdminLayout.cshtml Bằng cách xữ lý thơng điệp template m tơi tạo thông điệp view dùnglayout mà không cần tạo thêm vùng Razor List 11-12 biểu diễn thay đổi file Listing 11-12.Handling the ViewBag Message in the _AdminLayout.cshtml File @{ Layout =null; } @if (TempData["message"] != null){ @TempData["message"] } @RenderBody() 18 Mẹo: lợi ích việc thao tác với thơng điệp template user thấy hiển thị trang dựng lên sau lưu thay đổi Ở thời điểm tại, trả chúng danh sách product, tơi thay đổi dịng công việc để dựng lên view khác user vấn thấy nội dung thông điệp (miễn view sử dụng layout đó) Giờ tơi có tất mảnh cần thiết để chỉnh sửa product.Để xem cách tất vận hành, chạy ứng dụng, điều hướng vào Admin/Index tạo vào thay đổi Chọn nút save Chúng ta quay lại list view thông điệp TempData hiển thị hình 11-8 Figure 11-8.Editing a product and seeing the TempDatamessage Thông điệp biến chúng chạy lại trang danh sách product TempData bị xóa nó đọc Việc tiện lợi khơng muốn thơng điệp cũ cịn nằm lại 19 Thêm vào xác thực Model Trong trường hợp hầu hết project, cần thêm vào quy tác xác thực cho đối tượng model.Ở thời điểm tại, người quản trị điền giá tiền số âm bỏ trống phần mô tả, SportsStore vui vẻ chấp nhận điều lưu vào database Dù cho có hay ko liệu xấu lưu dựa vào việc có phù hợp với ràng buộc định nghĩa bảng dùng để tạo nên database chương List 11-13 cho thấy cách tơi áp dụng thích liệu vào lớp Product, cách làm lớp ShippingDetails chương trước Listing 11-13.Applying Validation Attributes to the Product.cs File using System.ComponentModel.DataAnnotations; usingSystem.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; } [DataType(DataType.MultilineText)] [Required(ErrorMessage = "Please enter adescription")] public string Description { get; set;} [Required] [Range(0.01, double.MaxValue, positiveprice")] public decimal Price { get; set;} ErrorMessage = "Please enter a [Required(ErrorMessage = "Please specify acategory")] public string Category { get; set;} } } Hàm hỗ trờ Html.TextBox Html.TextArea mà dùng view Edit.cshtml để tạo đầu vào element dùng MVC Framework để tín hiệu vấn đề khâu xác thực Những tín hiệu gửi cách dùng lớp định nghĩa file Content/ErrorStyle.css, có hiệu ứng làm bật vấn đề Tôi cần cung cấp cho người dùng nội dùng chi tiết vấn đề thấy List 11-14 Listing 11-14.Adding Validation Messages to the Edit.cshtml File @foreach (var property in ViewData.ModelMetadata.Properties) { if(property.PropertyName != "ProductID"){ @(property.DisplayName ?? property.PropertyName) @if (property.PropertyName == "Description"){ @Html.TextArea(property.PropertyName,null, new{ @class = "form-control", rows = 5}) 20 } else{ @Html.TextBox(property.PropertyName, null, new { @class = "form-control"}) } @Html.ValidationMessage(property.PropertyName) } } Trong chương 9, dùng hàm hỗ trợ Html.ValidationSumary để tạo danh sách hợp tất vấn đề form.Trong danh sách dùng hàm hỗ trợ Html.ValidationMessage, hiển thị thơng điệp cho thuộc tính model Chúng ta đặt hàm hỗ trợ Html.ValidationMessage đâu view quy ước (và nhạy cảm) nên đặt gần element có vấn đề xác thực nhẳm gửi đến user nội dung Trong hình 11-9 cho thấy cách thơng điệp xác thực xuất chỉnh sửa sản phẩm điền liệu không tuân theo quy tắc lớp Product Figure 11-9.Data validation when editingproducts 21 Enabling Client-SideValidation Bật chế xác thực bên phía Client Hiện tại, xác thực liệu áp dụng người quản trị gửi thay đổi đến server nhiều người dùng đòi hỏi phản hồi có vấn đề với liệu mà họ nhập vào Đó lý nhà phát triển thường muốn thực tji chế xác thực bên phía client Nơi mà liệu kiểm tra Browser , dùng Javascript MVC Framework thực thi xác thực bên phía server dựa thích liệu mà áp dụng lên lớp domain model Tính bật mặc định khơng hoạt động tơi không thêm đường dẫn đến thư viên Javascript MS cung cấp hỗ trợ cho phép xác thực bên phía client dùng thự viện jQuery lời gọi phổ biến từ jQuery plug-in, jQuery Validation MS mở rộng cơng cụ để thêm tính nang hỗ trợ xác thực cho thuộc tính Bước cài đặt gói xác thực Chọn Tools>Library Package Manager>Package Manager Console VS để mở hộp thoại Nuget command line điền vào lệnh sau Install-Package Microsoft.jQuery.Unobtrusive.Validation -version3.0.0 -projectnameSportsStore.WebUI Mẹo: đừng bận tâm bạn thấy thơng điệp nói gói cài đặt từ trước MS thêm gói cách thầm lặng vào project check vào Reference Script Libraries dùng tính Scafolding tạo view Tiếp theo cần thêm element để đưa Javascript file gói vào ứng dụng HTML Các đơn giản thêm đường dần _AdminLayout.cshtml file Do xác thực phía client làm việc trang dùng layout Chúng ta nhìn thấy thay đổi List 11-15 (thứ tự element quan trọng) Listing 11-15 Importing JavaScript Files for Client-Side Validation into the _AdminLayout.cshtml File @{ Layout =null; } @if (TempData["message"] != null){ @TempData["message"] } @RenderBody() Những bổ sung vào layout cho phép tính xác thực bên phía client hoạt động, cung cấp phản hồi đến người dùng giá trị họ điền vào trước họ gửi mẫu form Sự xuất thông báo lỗi đến người dùng tương lớp CSSđược dùng xác thực server dùng cho bên slient phản hồi không cần request phải gửi đến server Trong hầu hết trường hợp, xác thực phía client tính hữu dụng lí khơng muốn xác thực phía client, cần thêm câu lệnh vào view 22 @{ } ViewBag.Title = "Admin: Edit " + @Model.Name; Layout ="∼/Views/Shared/_AdminLayout.cshtml"; HtmlHelper.ClientValidationEnabled = false; HtmlHelper.UnobtrusiveJavaScriptEnabled =false; Những câu lệnh tắt tính xác thực bên phía client cho view thêm vào Chúng ta tắt xác thực phía client cho tồn ứng dụng cách đặt giá trị file Web.config sau Creating NewProducts (Tạo Product mới) Kế tiếp, thực thi Creat action method, xác định đường dẫn Add a new product danh sách prodct Việc cho phép người quản trị thêm item vào product catalog.Thêm khả tạo product cần thêm số thay đổi nhỏ vào ứng dụng.Đây ví dụ hữu ích cho thấy sức mạnh linh hoạt ứng dụng MVC thiết kế cấu trúc tốt Thêm hàm Creat vối nội dung List 11-16 vào Admin controller Listing 11-16.Adding the Create Action Method to the AdminController.cs File using System.Linq; usingSystem.Web.Mvc; using SportsStore.Domain.Abstract; usingSportsStore.Domain.Entities; namespace SportsStore.WebUI.Controllers { public class AdminController : Controller{ private IProductRepositoryrepository; public AdminController(IProductRepository repo) { repository =repo; } // other action methods omitted forbrevity public ViewResult Create(){ return View("Edit", newProduct()); } } 23 } Hàm Creat khơng tạo view mặc định cho Thay vào xác định Edit view nên dùng Điều hoàn toàn chấp nhận action method dùng view thường liên quan đến view khác Trong trường hợp này, truyền đối tượng product view model để Edit view đưa với trường rỗng Chú ý: Tôi chưa thêm unite test cho action method Làm kiểm tra khả MVC Framework để xử lý Viewseult ta trả kết action method vốn điều tơi chấp nhận ()Không thiết phải viết phần kiểm thử cho framework trừ nghi ngờ có xảy vấn đề với Điều dẫn đến việc chỉnh sửa Tơi thường trông đợi from gửi trả đến action dựng lên Html.BeginForm giả định theo mặc định phát sinh form HTML Tuy nhiên khơng hoạt động cho hàm Creat tơi muốn from gửi trả Edit action để tơi lưu liệu product Để xác định điều này, dùng phiên chứa tham số hàm hỗ trợ Html.BeginFrom để xác định mục tiêu from phát sinh Edit view Edit action method Admincontroller list 11-17, miêu tả thay đổi tạo cho file view Views/Admin/Edgit.cshtml Listing 11-17.Explicitly Specifying an Action Method and Controller for a Form in the Edit.cshtml File @modelSportsStore.Domain.Entities.Product @{ ViewBag.Title = "Admin: Edit " + @Model.Name; Layout ="∼/Views/Shared/_AdminLayout.cshtml"; } Edit@Model.Name @using (Html.BeginForm("Edit", "Admin")){ @foreach (var property in ViewData.ModelMetadata.Properties) { if(property.PropertyName != "ProductID"){ @(property.DisplayName ?? property.PropertyName) @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) } } @Html.ActionLink("Cancel and return to List", "Index", null, new{ @class = "btnbtn-default" }) } 24 Giờ form gửi đến Edit action action dựng lên Giờ tạo product nhấn vào link Add a new product điền vào chi tiết hình 11-10 Figure 11-10.Adding a new product to thecatalog DeletingProducts (Xóa product) Thêm tính hỗ trợ cho phép xóa quan trọng Đầu tiên thêm vào hàm IProductRepository interface List 11-18 Listing 11-18.Adding a Method to Delete Products to the IProductRepository.cs File using System.Collections.Generic; usingSportsStore.Domain.Entities; namespace SportsStore.Domain.Abstract { public interface IProductRepository{ IEnumerable Products { get; } void SaveProduct(Productproduct); Product DeleteProduct(intproductID); } } 25 ... Admin controller xử lý POST request quản trị viên nhấn vào nút Save Action method thể List 11- 11 Listing 11- 11.Adding the POST-Handling Edit Action Method in the AdminController.cs File using System.Linq;... hình 11- 10 Figure 11- 10.Adding a new product to thecatalog DeletingProducts (Xóa product) Thêm tính hỗ trợ cho phép xóa quan trọng Đầu tiên tơi thêm vào hàm IProductRepository interface List 11- 18... thấy cách mà view dựng nên cách chạy ứng dụng điều hướng cho đến /Admin/Index Hình 11- 3 miêu tả kết Figure 11- 3 Rendering the scaffold Listview Scafold view cố gắng tạo cấu hình hợp lý dựa sở