5.Chuong 05

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