5 chuong 05 tủ tài liệu bách khoa

Chương Làm việc với Razor Một nhìn tổng quan máy/phương tiện procezses nội dung ASP.NET tìm kiếm câu lệnh lập trình thơng thường để chèn nội dung động vào để gửi tới trình duyệt Razor tên MVC Framework góc nhìn học(view engine) Khơng có tha đổi Razor MVC5 bạn quen thuộc với câu lệnh từ phiên trước bạn bỏ qua Trong chương này, đưa cho bạn chuyến ngắn câu lệnh Razor để bạn nhận Razor bạn nhìn thấy chúng.Tôi không đưa tài liệu đầy đủ Razor chương này; xem khóa học ngắn hạn câu lệnh Razor Tôi khai phá sâu phần xuyên suốt sách này, nội dung đặc trưng khác MVC Framework Bảng 5-1 cung cấp tóm tắt cho chương Table5-1 Tóm tắt chương Vấn đề Giải Mục lục Xác định truy cập vào loại mơ hình Sử dụng biểu thức @model @Model 1–4, 15 Giảm trùng lập hiển thị Sử dụng Layout 5–7, 10–12 Định rõ layout mặc định Dùng hiển thị start view 8, Đưa giá trị liệu hiển thị từ controller Chuyển qua đối tượng view model hay view bag 13, 14 Tạo nộiion dung khác dựa giá trị Reduce duplicat in views liệu Sử dụng câu lệnh Razor có điều kiện 16, 17 Liệt kê mảng hay tập hợp Sử dụng @foreach expression 18, 19 Thêm namespace vào view Sử dụng @using expression 20 Chuẩn bị cho dự án mẫu Để giải thích Razor, Tơi tạo dự án Visual Studo gọi Razor, sử dụng mẫu the ASP.NET MVC Web Application Tôi chọn Empty đánh dấu vào hộp để lấy cấu hình ban đầu cho dự án Xác định Model Tôi bắt đầu với dạng domain đơn giản gọi Product xác định lớp Product.cs , nơi mà tơi thêm vào thư mục Models Bạn thấy nội dung tập tin Mục lục 5-1 Mục lục5-1 Những nội dung tập tin Product.cs namespace Razor.Models { public class Product { public int ProductID { get; set; } public string Name { get; set; } public string Description { get; set; } public decimal Price { get; set; } public string Category { set; get; } } } Xác định Controller Tôi theo quy ước MVC Framew ork xác định controller gọi Home điểm xuất phát ban đầu dự án Nhấp phải vào thư mục Controllers Solution Explorer, chọn Add Controller , chọn MVC5 Controller–Empty , chọn Add đặt tên cho HomeController Khi bạn bạn bấm vào nút Add thứ hai, Visual Studio tạo tập tin Controllers/HomeController.cs Chỉnh sửa ghép nội dung cho phù hợp hiển thị Mục lục 5-2 Mục lục 5-2.Nội dung tập tin HomeController.cs using System.Web.Mvc; using Razor.Models; namespace Razor.Controllers { public class HomeController : Controller { Product myProduct = new Product { ProductID = 1, Name = "Kayak", Description = "A boat for one person", Category = "Watersports", Price = 275M }; public ActionResult Index() { return View(myProduct); } } } Controller định nghĩa phương thức hành động gọi Index , tơi tạo định thuộc tính đối tượng đối tượng Product Tôi đưa Product vào phương thức View để sử dụng mơ hình hiển thị ra.Tơi khơng định tên tập tin hiển thị mà tơi gọi phương thức View,vì sử dụng mặc định hiển thị cho phương thức động Tạo View Nhấp phải vào phương thức Index lớp HomeController chọn Add View từ danh mục nhấp chuột phải Đảm bảo tên hiển thị Index , thay đổi Template thành Empty chọn Product cho lớp mô hình (Nếu bạn khơng thấy Product lựa chọn cho mơ hình, lập dự án bắt đầu lại) Bỏ chọn View Option boxes bấm Add để tạo tập tin Index.cshtml thư mục Views/Home Các nội dung ban đầu hiển thị biểu diễn Mục lục5-3 Mục lục5-3 Những nội dung tập tin Index.cshtml @model Razor.Models.Product @{ Layout = null; } Index Trong phần kế tiếp,tôi qua phần hiển thị khác Razor chứng minh vài thứ khác biệt mà bạn làm việc với số chúng.Khi học Razor, hữu dụng để nhớ hiển thị tồn để để thể hay nhiều phần mơ hình cho người dùng - điểu có nghĩa tạo HTML để hiển thị liệu lấy từ hay nhiều đối tượng Nếu bạn nhớ cổ gắng để xây dựng trang HTML mà gửi cho khách hàng, sau m ọi thứ Razor làm bắt đầu trở nên hợp lý Ghi Tôi lập lại vài thông tin phần mà đề cập Chương2 Tôi muốn cấp cho bạn nơi độc tài liệu mà bạn tìm đến bạn cần phải tìm tính Razor tơi nghĩ lượng nhỏ nhân đơi khiến trở nên đág giá Làm việc với mơ hình đối tượng Hãy bắt đầu dòng hiển thị: @model Razor.Models.Product Những câu lệnh Razor bắt đầu với @ character Trong trường hợp này, câu lệnh @model biểu thị kiểu đối tượng mơ hình mà tơi thơng qua thị từ phương thức động Điều cho phép tham khảo phương pháp, lĩnh v ực, thuộc tính đối tượng thị thông qua @Model , hiển thị Mục Lục5-4, cho thấy bổ sung đơn giản hiển thị Index Mục lục5-4 Đề cập đến View Model Object Property tập tin Index.cshtml @model Razor.Models.Product @{ Layout = null; } Index @Model.Name Ghi Ghi kê khai loại đối tượng mơ hình hiển thị sử dụng that @model (low er case m ) truy cập thuộc tính Name sử dụng @Model (upper case M ) Điều khó hiểu bạn bắt đầu làm việc với Razor, trở thành tự nhiên thứ hai nhanh Nếu bạn bắt đầu dự án này, bạn thấy đầu Hình5-1 Hình 5-1 Ảnh hưởng việc đọc giá trị hiệu ứng View Bằng cách sử dụng biểu thị @model, Tơi nói với MVC đối tượng làm việc Visua Studio sử dụng điều vài cách.Đầu tiên, bạn viết hiển thị bạn, Visual Studio bật lên đề nghị tên thành viên bân gõ @Model khoảng thời gian, hiển thị Hình 5-2 Điều tương tự cách tự động hoàn chỉnh biểu thức lambda truyền đến phương thức hỗ trợ HTML, mà tơi mơ tả Chương Hình 5-2 Visual Studio đưa đề nghị tên thành phần dựa biểu thức @Model Khá hữu ích Visuo Studio đánh dấu lỗi xảy vấn đề với thành viên đối đượng mơ hình hiển thị mà bạn truy cập đến Bạn thấy ví dụ Hình 5-3, @Model.NotARealProperty nơi mà tôi cố tham khảo Visual Studio nhận lớp Product định kiểu mơ hình khơng có thuộc tính in đậm lỗi trình soạn thảo Hình 5-3 Visual Studio báo cáo vấn đề với biểu thức @Model Làm việc với Layout Những biểu thức Razor khác tập tin hiển thị Index.cshtml này: @{ Layout = null; } Đây ví dụ Razor code block, cho phép tơi bao gồm câu lệnh C# hiển thị Các code block mở @{ and closed w ith } and câu lệnh chứa dược đánh giá xem thấy Code block đặt giá trị thuộc tinh Layout thành null Như tơi giải thích chi tiết Chương20, Tổng quan Razor biên dịch vào lớp C# ứng dụng MVC lớp sở sử dụng định nghĩa thuộc tính Layout.Tơi cho bạn thấy làm để tất hoạt động Chương 20, hiệu mặc định thuộc tính Layout thành null để báo tới MVC framew ork hiển thị khép kín làm tất nội dung cần thiết cho khách hàng View khép kín tốt cho ứng dụng ví dụ đơn giản, dự án thật có hàng chục lượt xem Những Layout mẫu hiệu có chứa đánh dấu mà bạn dùng để tạo quán ứng dụng bạn – đảm bảo thư viện JavaScript chuẩn bao gồm kết nhìn thơng dụng cảm thấy thông suốt Tạo Layout Tạo layout, nhấp phải thư mục Views Solution Explorer, chọn Add New Item từ danh mục Add chọn mẫu MVC5 Layout Page (Razor) , Hình 5-4 The containing element has data attributes Discount: Express: Supplier: Tôi dùng biểu thức Razor để đặt giá trị vài thuộc tính liệu phần tử div Mẹo Data Thuộc tính liệu, thuộc tính có tên bắt đầu data- , cách thức để tạo thuộc tính tùy chỉnh nhiều năm thành phần chuẩn thức phần HTML5 Tôi dùng giá tr ị ApplyDiscount, ExpressShip Supplier giátrịview bag để đặt giá trị cho thuộc tính Bắt đầu với ứng dụng mẫu, mục tiêu phương pháp động, nhìn vào mã HTML sử dụng tạo nên trang Bạn thấy Razor đặt giá trị thuộc tính này: The containing element has data attributes Gía trị False True tương ứng giá trị Boolean view bag, Razor làm điều hợp lý cho giá trị chứa giáo trị null, mà để làm chuỗi rỗng Nhưng nhận điều thú vị tâp thứ hai bổ sung vào view, mà lọa hộp checkbok đánh dấu thuộc tính giá trị view bag mà tơi dùng cho thuộc tính liệu HTML Razor thể lại sau: Discount: Express: 120 120 Supplier: Razor quan tâm đến đường mà thuộc tính chọn sử dụng, có diện của thuộc tính thay giá trị thay đổi cấu hình phần tử ( biết thuộc tính Boolean đặc điểm kỹ thuật HTML) Nếu Razor lồng False hay null hay chuỗi rỗng giá trị thuộc tính chọn, sau checkbox hiển thị duyệt kiểm tra, Thay vào đó, Razor bị xóa thuộc tính từ yếu tố từ phần tử hoàn toàn giá trị false hay null , tạo hiệu ứng mà phù hợp với hiển thị liệu, Hình 5-11 121 121 Hình 5-11 Hiệu việc xóa thuộc tính mà chứa diện cấu hình phần tử chúng Sử dụng câu lệnh có điều kiện Razor scó thể xử lý câu lệnh có điều kiện, có nghĩa tơi thiết kế output từ view dựa liệu view Đây kỹ thuật trung tâm Razor, chophe1p bạn tạo layout hoàn chỉnh dễ đổi mà hợp lý để đọc trì Mục lục 5-16, Tơi nâng cấp tập tin view DemoExpression.cshtml để bao gồm câu lệnh có điều kiện Mục lục 5-16 Sử d ụ ng câ u l ệ nh R a z or c ó đ i ề u k i ệ n tr on g t ậ p ti n DemoExpression.cshtml 122 122 @model Razor.Models.Product @{ ViewBag.Title = "DemoExpression"; Layout = "∼/Views/_BasicLayout.cshtml"; } PropertyValue Name@Model.Name 123 123 Price@Model.Price Stock Level @switch ((int)ViewBag.ProductCount) { case 0: @: Out of Stock break; case 1: Low Stock (@ViewBag.ProductCount) break; default: @ViewBag.ProductCount break; } Để bắt đầu với câu lệnh có điều kiện, bạn đặt ký tự @ trước từ khóa C# có điều kiện, chuyển đổi ví dụ Bạn chấm dứt khối mã với ký tự đóng 9}0 giống bạn làm với khối mã C# thông thường Mẹo Chú ý bỏ giá trị thuộc tính ViewBag.ProductCount thành int để dùng chuyển với câu lệnh Switch Đây cần thiết biểu thức chuyển Razor khơng thể đánh giá thuộc tính bạn sử dụng – bạn phải ép kiểu để biết thực thi mà so sánh Bên khối mã Razor, bạn bao gồm phần tử HTML giá trị liệu vào view output cách xác định HTML vava2 biểu thức Razor, này: Low Stock (@ViewBag.ProductCount) Hoặc này: 124 124 @ViewBag.ProductCount Tôi không đưa phần tử hay biểu thức ngoặc kép biểu thị chúng cách đặc biệt – động Razor giải thích đầu đễ xử lý Tuy nhiên, bạn muốn chèn văn vào view khơng chứa phần tử HTML, bạn cần phải cung cấp cho Razor tay sửa dòng đầu này: @: Out of Stock Ký tự @: ngăn chặn Razor việc giải thích câu lệnh C#, hành vi mặc định gặp văn Bạn thấy kết câu lệnh điều kiện Hình 5-12 125 125 Hình 5-12 Sử dụng câu lệnh chuyển Razor view Câu lệnh có điều kiện quan trọng Razor view chúng cho phép nội dung thay đổi giá trị liệu mà view nhận từ phươn thức động Như minh chứng bổ sung, Mục lục 5-17 cho thấy việc bổ sung trạng thái IF vào DemoExpression.cshtml Như bạn tưởng tượng, câu lệnh điều kiện thưởng sử dụng Mục lục 5-17 Sử d ụ ng tr n g t há i tr o ng R az or V ie w tr on g t ậ p ti n DemoExpression.cshtml @model Razor.Models.Product @{ ViewBag.Title = "DemoExpression"; Layout = "∼/Views/_BasicLayout.cshtml"; 126 126 } PropertyValue Name@Model.Name Price@Model.Price Stock Level @if (ViewBag.ProductCount == 0) { @:Out of Stock } else if (ViewBag.ProductCount == 1) { Low Stock (@ViewBag.ProductCount) 127 127 } else { @ViewBag.ProductCount } Câu lệnh điều kiện tạo kết tương tự câu lệnh switch, tơi muốn chứng minh cách bạn lồng câu lệnh điều kiện C# với Razor Views Tơi giải thích cách làm việc Chương 20, khám phá view kỹ Liệt kê mảng tập hợp Khi viết ứng dụng MVC, bạn thường muốn liệt kê nhựng nội dung mảng hay kiểu đối tượng tập hợp tạo nội dung chi tiết cho Để giải thích cách chúng hồn thiện, tơi xác định phương thức động điều khiển Home gọi DemoArray mà bạn thấy Mục lục 5-18 Mục lục 5-18 Phương thức động DemoArray tập tin HomeController.cs using System.Web.Mvc; using Razor.Models; namespace Razor.Controllers { public class HomeController : Controller { Product myProduct = new Product { ProductID = 1, Name = "Kayak", Description = "A boat for one person", Category = "Watersports", Price = 275M 128 128 }; // other action methods omitted for brevity public ActionResult DemoArray() { Product[] array = { new Product {Name = "Kayak", Price = 275M}, new Product {Name = "Lifejacket", Price = 48.95M}, new Product {Name = "Soccer ball", Price = 19.50M}, new Product {Name = "Corner flag", Price = 34.95M} }; return View(array); } } } Phương thức động tạo đối tượng Product[] object có chứa giả trị liệu đơn giản thông chúng qua phương thức View method liệu kết xuất cách sử dụng view mặc định Tính Visuo Studio không cho phép bạn định mảng hay kiểu mơ hình ( khơng hiểu sao, kể từ Razor vui vẻ hỗ trợ mãng) Để tạo view cho phương thức động truyền đến mảng, cách tốt để tạo view mà khơng cần mơ hình sau tự thêm biểu thức @model sau tập tin tạo Trong Mục lục 5-19, bạn nhìn thấy nội dung tập tin DemoArray.cshtml tạo cách thư mục Views/Home sau chỉnh sửa 129 129 Mục lục 5-19 Những nội dung tập tin DemoArray.cshtml @model Razor.Models.Product[] @{ ViewBag.Title = "DemoArray"; Layout = "∼/Views/_BasicLayout.cshtml"; } @if (Model.Length > 0) { ProductPrice @foreach (Razor.Models.Product p in Model) { @p.Name $@p.Price } } else { No product data } Tôi dùng câu lệnh @if statement để liệt kê nội dung dựa độ dài mảng mà view model nhận biểu thức @foreach expression để liệt kê nội dung mảng tạo dòng bảng HTML cho chúng Bạn thấy biểu thức phù hợp với C# Bạn thấy cách tạo biến địa phương gọi P vòng foreach sau so sánh với thuộc tính sử dụng biểu thức Razor @p.Name and @p.Price Kết tạo phần tử h2 element mảng trống sản xuất dòng item bảng HTML cách khôn ngoan Bởi liệu tơi tĩnh VD này, bạn ln nhìn thấ ke61y giống nhau, Hình 5-13 130 130 Hình 5-13 Tạo phần tử sử dụng thuộc tính foreach Đối phó với Namespaces Bạn nhận thấy phải tham khảo lớp Product tên đầy đủ vòng foreach ví dụ trước, này: @foreach (Razor.Models.Product p in Model) { Điều khó chịu view phức tạp, nơi bạn có qua nhiều tài liệu cho view model lớp khác Tơi dọn dep view cách sử dụng biểu thức @using mang namespace vào văn cho view, làm thường xuyên lớp C# Mục lục 5-20 cho thấy cách áp dụng biểu thức @using cho view DemoArray.cshtml 131 131 Mục lục 5-20 Áp dụng biểu thức @using Expression tập tin DemoArray.cshtml @using Razor.Models @model Product[] @{ ViewBag.Title = "DemoArray"; Layout = "∼/Views/_BasicLayout.cshtml"; } @if (Model.Length > 0) { ProductPrice 132 132 @foreach (Product p in Model) { @p.Name $@p.Price } } else { 133 133 No product data } Một view bao gồm biểu thức A view can contain multiple @using expressions phức tạp Tôi dùng biểu thức @using expression để xuất namespace Razor.Models, điều có nghĩa tơi xóa namespace khỏi biểu thức @model khơng cần vòng lặp foreach Tóm tắt Trong chương này, Tơi đưa cho bạn nhìn tổng quan cơng cụ Razor cách dùng để tạo HTML Tôi cho thấy bạn làm để tham khảo liệu từ điều khiển thông qua đôi tượng view model view bag, biểu thức Razor dùng điều chỉnh dựa giá trị Bạn thấy nhiều vd khác cách Razor dùng phần lại sách mô tả chế MVC view hoặt động Chương 20 Trong chương kế, tô mô tả phát triển thử nghiệm công cụ thiết yếu làm tảng cho MVC Framework giúp bạn có sản phẩm tốt dự án bạn 134 134 ... Add chọn mẫu MVC5 Layout Page (Razor) , Hình 5- 4 Hình 5- 4 Tạo layout Đặt tên thư mục thành _BasicLayout.cshtml (chú ý ký tự gạch dưới) chọn nút Add để tạo tập tin Mục lục 5- 5 cho thấy nội dung... phổ thông view tạo Để thấy hiệu ứng layout, chạy ứng dụng thử nghiệm Kết hiển thị Hình 5- 5 113 113 Hình 5- 5 Ảnh hưởng việc áp dụng layout đơn giản để hiển thị Sử dụng tập tin View Start Tôi nếp... layout đặt textbox, Hình 5- 8 Hình 5- 8 Xác định layout tạo view Nhấp nút Add để tạo tập tin /Views/Home/NameAndPrice.cshtml Bạn hấy nội dung tập tin Mục Lục 5- 11 Mục lục 5- 11 Những nội dung tập