5.Chuong 05

Tóm tắt chương Vấn đề Giải quyết Mục lục Xác định và truy cập vào loại mô hình Giảm sự trùng lập trong hiển thị Reduce duplicat ion in views Sử dụng biểu thức @model và @Model Sử dụng

Chương 5

Làm việc với Razor

Một cái nhìn tổng quan về máy/phương tiện procezses nội dung của ASP.NET và tìm kiếm những câu lệnh lập trình thông thường để chèn một nội

dung động vào để gửi tới một trình duyệt và Razor là cái tên của MVC Framework góc nhìn cơ học(view engine) Không có sự tha đổi ở Razor trong MVC5

và nếu bạn đã quen thuộc với những câu lệnh từ phiên bản trước bạn có thể bỏ qua

Trong chương này, tôi sẽ đưa cho bạn một chuyến đi ngắn về câu lệnh của Razor để bạn có thể nhận ra Razor khi bạn nhìn thấy chúng.Tôi

sẽ không đưa ra một tài liệu đầy đủ về Razor trong chương này; có thể xem như là một khóa học ngắn hạn về câu lệnh của Razor Tôi sẽ khai phá sâu hơn ở những phần tiếp theo xuyên suốt cuốn sách này, trong những nội dung của những đặc trưng khác của MVC Framework Bảng 5-1 cung cấp tóm tắt cho chương này

Table 5-1 Tóm tắt chương

Vấn đề Giải quyết Mục lục

Xác định và truy cập vào loại mô hình

Giảm sự trùng lập trong hiển thị

Reduce duplicat ion in views

Sử dụng biểu thức @model và @Model

Sử dụng Layout

1–4, 15 5–7, 10–12

Tạo ra những nội dung khác nhau dựa trên giá trị

dữ liệu

Liệt kê một mảng hay một tập hợp

Thêm một namespace vào một view

Sử dụng @foreach expression

Sử dụng @using expression

18, 19

20

Chuẩn bị cho một dự án mẫu

Để giải thích Razor, Tôi đã tạo một dự án Visual Studo mới gọi là Razor, sử dụng mẫu the ASP.NET MVC Web

Application Tôi đã chọn Empty và đánh dấu vào hộp để lấy cấu hình ban đầu cho dự án này

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 sẽ theo một quy ước MVC Framew ork và xác định controller gọi là Home như là điểm xuất phát ban đầu của dự án Nhấp phải vào thư

mục Controllers trong Solution Explorer, chọn Add Controller, chọn MVC5

Controller–Empty, chọn Add và đặt tên cho HomeController Khi bạn bạn bấm vào nút Add thứ hai, Visual Studio sẽ tạo ra tập tin Controllers/HomeController.cs Chỉnh sửa và ghép những nội dung cho phù hợp rồi hiển thị trong 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() {

Tạo View

Nhấp phải vào phương thức Index trong lớp HomeController và chọn Add View từ danh mục khi nhấp chuột phải Đảm bảo tên hiển thị là Index, thay đổi Template thành Empty và chọn Product cho các lớp mô hình (Nếu như bạn không thấy Product là một lựa chọn cho mô hình, lập dự án và bắt đầu lại) Bỏ chọn View Option boxes và bấm Add để tạo tập tin Index.cshtml trong thư mục Views/Home Các nội dung ban đầu của hiển thị mới thì được biểu diễn trong Mục lục 5-3

Mục lục 5-3 Những nội dung của tập tin Index.cshtml

Ghi chú Tôi lập lại một vài thông tin trong phần kế tiếp mà tôi đã đề cập trong Chương 2 Tôi muốn cấp cho bạn một nơi độc nhất trong tài liệu mà bạn có thể tìm đến khi bạn cần phải tìm tính năng của Razor và tôi nghĩ rằng một lượng nhỏ của sự nhân đôi khiến nó trở nên đág giá

Làm việc với mô hình đối tượng

Hãy cùng bắt đầu dòng đầu tiên trong hiển thị:

Mục lục5-4 Đề cập đến một View Model Object Property trong tập tin Index.cshtml

Ghi chú Ghi chú rằng tôi kê khai các loại đối tượng mô hình hiển thị sử dụng that @model (low er case m) và truy cập thuộc tính Name sử dụng

@Model (upper case M) Điều này là hơi khó hiểu khi bạn bắt đầu làm việc với Razor, nhưng khi trở thành tự nhiên thứ hai khá nhanh

Nếu bạn bắt đầu dự án này, bạn sẽ thấy đầu ra ở Hình5-1

Hình 5-1 Ảnh hưởng của việc đọc một giá trị hiệu ứng trong View

Bằng cách sử dụng biểu thị @model, Tôi nói với MVC về đối tượng tôi sẽ làm việc và Visua Studio sử dụng điều này trong một vài cách.Đầu tiên, như bạn đang viết hiển thị của bạn, Visual Studio sẽ bật lên đề nghị về những tên thành viên khi bân gõ @Model trong một khoảng thời gian, như hiển thị trong Hình 5-2 Điều này cũng tương tự như cách tự động hoàn chỉnh biểu thức lambda được truyền đến phương thức hỗ trợ của HTML, cái mà tôi đã mô tả trong Chương 4

Hình 5-2 Visual Studio đưa ra những đề nghị về tên các thành phần dựa trên biểu thức @Model

Khá hữu ích khi Visuo Studio sẽ đánh dấu những lỗi khi xảy ra vấn đề với thành viên đối đượng mô hình hiển thị mà bạn đang truy cập đến Bạn có thể sẽ thấy ví dụ trong Hình 5-3, @Model.NotARealProperty nơi mà tôi tôi đã cố tham khảo Visual Studio đã nhận ra rằng lớp Product tôi đã chỉ định trong các kiểu mô hình thì không có những thuộc tính và đã in đậm một lỗi trong trình soạn thảo

Hình 5-3 Visual Studio báo cáo một vấn đề với biểu thức @Model

Làm việc với những Layout

Những biểu thức Razor khác trong tập tin hiển thị Index.cshtml là thế này:

View khép kín là tốt cho các ứng dụng ví dụ đơn giản, nhưng một dự án thật có thể có hàng chục lượt xem Những Layout mẫu hiệu quả

này có chứa đánh dấu mà bạn dùng để tạo sự nhất quán trên ứng dụng của bạn – nó có thể được đảm bảo rằng thư viện JavaScript chuẩn bao gồm trong kết quả hoặc một cái nhìn thông dụng và cảm thấy được thông suốt

Tạo Layout

Tạo một layout, nhấp phải thư mục Views trong Solution Explorer, chọn Add New Item từ danh mục Add và chọn mẫu MVC5 Layout Page (Razor) , như Hình 5-4

Hình 5-4 Tạo một layout mới

Đặt tên thư mục thành _BasicLayout.cshtml (chú ý ký tự đầu tiên là gạch dưới) và chọn nút Add để tạo tập tin

Mục lục 5-5 cho thấy những nội dung của tập tin như nó được tạo bởi Visual Studio

Ghi chú Tập tin ở thư mục Views có tên bắt đầu bằng dấu gạch dưới (_) không được trả lại cho người sử dụng, nó cho phép tập tin đặt tên để khác với những hiển thị mà bạn làm và những tập ti hỗ trợ nó Layout là một tập tin hỗ trợ, được bắt đầu với một dấu gạch dưới

111111

</html>

Layouts là một form chuyên dụng của view và tôi phả i in đ ậm @ expressions trong danh sách Các cuộc gọi đến phương thức

@RenderBody chèn nội dung hiển thị bởi các phương thức hành động và layout được đánh dấu Các biểu hiện khác của Razor trong layout kiếm một thuộc tính gọi là Title in the ViewBag để sắp xếp những nội dung vào phần title

Những phần tử trong layout sẽ được áp dụng cho bất kỳ một hiển thị nào dùng layout và đây là lý do tại sao layout cơ bản là các mẫu Trong Mục lục5-6, Tôi đã thêm một vài đánh dấu đơn giản trên layout để chứng minh cách làm việc này

Mục lục 5-6 Thêm phần tử vào tập tin _BasicLayout.cshtml

Tôi đã thêm một vài phần tử tiêu đề và áp dụng một vài kiểu CSS cho phần tử div nơi chứa biểu thức

@RenderBody, chỉ để làm nó rõ ràng những nội dung đến từ layout và đến từ view

Áp dụng một Layout

113

Để áp dụng một layout để xem, tôi cần thiết lập các giá trị thuộc tính của Layout Layout chứa phần tử HTML được xác định cấu trúc

đê phản hồi đến trình duyệt, vì thế tôi cũng có thể gỡ bỏ những phần tử đó khỏi view Bạn có thể xem cách tôi áp dụng layout trong Mục lục 5-7, nơi đó cho thấy một tập tin đơn giản và mạnh mẽ Index.cshtml

Mẹo Tôi cũng thiết một giá trị thuộc tính cho ViewBag.Title, nó sẽ được dùng như những nội dung của thuộc tính tiêu đề trong tài liệu HTML gửi lại cho người dùng - ở đây là tùy chọn, nhưng rất thực tiễn Nếu nó không có giá trị cho thuộc tính, MVC framew ork sẽ trả về một phần tử title rỗng

Product Name: @Model.Name

Sự biến đổi đáng kể, ngay cả khi với một view đơn giản như vậy Cái mà tôi rời cũng với sự tập trung vào trình bày dữ liệu từ đối tượng mô hình dữ liệu đến người dùng, nó là một ý tưởng – không những khiến tôi làm việc với những đánh dấu đơn giản, nó còn có nghĩa rằng tôi không phải lặp lại những phần tử phổ thông trong mỗi view tôi tạo Để thấy hiệu ứng của layout, chạy ứng dụng thử nghiệm Kết quả hiển thị trong Hình 5-5

Hình 5-5 Ảnh hưởng của việc áp dụng một layout đơn giản để hiển thị

Sử dụng tập tin View Start

Tôi vẫn còn một nếp gấp nhỏ để sắp xếp, đó là tôi có thể xác định được tập tin layout tôi muốn bố trí ở mỗi view Điều đó có nghĩa rằng tôi phải đổi tên các tập tin layout, tôi sẽ phải tìm mỗi view phù hợp để thay đổi, nó sẽ dễ bị lỗi truy cập và đếm những chủ đề thông dụng thuộc dạng dễ chạy qua MVC framew ork

Tôi có thể giải quyết điều này bằng cách dùng một tập tin view start Khi đó nó ám chỉ một view, MVC framwork sẽ tìm kiếm một tập tin có

_ViewStart.cshtml Nội dung của tập tin sẽ được đối xử như thể chúng được chứa trong tập tin view của chính nó và tôi có thể dùng tính năng này tự động đặt giá trị cho thuộc tính Layout.

Để tạo một tập tin view star, thêm vào một tập tin layout mới cho thư mục Views và đặt tên _ViewStart.cshtml (một lần nữa, chú ý gạch dưới hàng đầu tiên) Chỉnh sửa những nội dung của tận thị ở Mục lục 5-8

Mục lục 5-8 Nội dung của tập tin _View Start.cshtml

@{

Layout = "∼/Views/_BasicLayout.cshtml";

}

Product Name: @Model.Name

Tôi không xác định rằng tôi muốn dùng tập tin view start MVC Framework sẽ định vị tập tin và sử dụng nội dung của nó tự động Những giá trị được định nghĩa trong tập tin view được ưu tiên, nó sẽ dễ dàng đè lên lên tập tin view start

Chú ý Quan trọng là phải hiểu sự khác biệt giữa bỏ qua giá trị Layout từ tập tin view và cái đặt giá trị null/ Nếu view của bạn khép kín

và bản không muốn dùng layout, thì đặt thuộc tính Layout thành null Nếu bạn bỏ qua thuộc tính

Layout, sau đó MVC framew ork sẽ cho rằng bạn muốn một layout và nó sẽ dùng những giá trị tìm được trong tập tin view start

Giải thích những Layout được chia sẻ

s Một cách giải thích nhanh và ngắn gọn về việc làm thế nào những layout được chia sẻ, tôi đã thêm vào một phương thức hành động mới trênthe Home controller gọi là NameAndPrice Bạn có thể xem định nghịa phương thức này trong Mục lục 5-10, nơi thể hiện sự thay đổi tôi đã làm trên tập tin HomeController.cs

Mục lục 5-10 T hê m m ộ t ph ư ơ ng th ứ c đ ộ ng tr ê n t ậ p t in 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() {

117

}

Phương thức động thông qua đối tượng myProduct đến phương thức hiển thị , như phương thức động Index làm – nó không phải cái gì đó mà bạn sẽ làm trong dự án thật, nhưng tôi đang giải thích chức năng của Razor và vì thế ví dụ đơn giản là những gì tôi cần Nhấp chuột phải vào phương thức động NameAndPrice và chọn Add View từ menu pop-up Điền vào hộp thoại Add View tương tự Hình 5-6: đặt View Name là NameAndPrice; đặt Template là Empty và đặt Model Class là Product

Hình 5-6 thêm một view dựa trên a layout

Đảm bảo rằng hộp Use a Layout Page đã được chọn và thông báo một đoạn văn dưới trường văn bản Nó nói rằng bạn nên

để trống hộp văn bản nếu bạn đã xác định view bạn muốn sử dụng trong một tập tin view start Nếu bạn đã chọn nút Add button ở thời điểm này, view sẽ được tạo mà không có giá trị thuộc tính Layout

Tôi muốn xác định rõ một view, vì thế chọn nút có biểu tượng dấu chẩm ( ) mà nó nằm bên phải trường văn bản Visual Studio sẽ

giới thiệu cho bạn một hộp thoại cho phép bạn chọn một tập tin layout, như Hình 5-7

119

Hình 5-7 Lựa chọn tập tin layout

Các quy ước cho một dự án MVC là để đặt các tập tin layout vào thư mục Views , nhưng nó không chỉ là một quy ước, đó là lý

do bên trái bảng điều khiển của hộp thoại cho bạn điều hướng xung quanh dự án, trong trường hợp bạn quyết định đặt

chúng ở một nơi khác

Tôi đã chỉ định một tập tin layout, vì vậy chọn _BasicLayout.cshtml và nhấp vào nút OK để trở về hộp thoại Add View Bạn

sẽ thấy rằng tên của tập tin layout được đặt trong textbox, như Hình 5-8

Hình 5-8 Xác định layout khi tạo một view

Nhấp nút Add để tạo tập tin /Views/Home/NameAndPrice.cshtml Bạn có thể hấy những nội dung trong tập tin trong Mục Lục 5-11

Mục lục 5-11 Những nội dung của tập tin NameAndPrice.cshtml

121

Visual Studio sử dụng nội dung mặc định khác nhau cho tập tin view khi ban chỉ định một layout, nhưng mà ban có thể thấy kết quả có chứa các biểu thức cùng Razor tôi sử dụng khi tôi áp dụng trực tiếp layout vào view Để hoàn thành ví dụ này, Mục lục 5-12 cho thấy một bổ sung đơn giản cho tập tin NameAndPrice.cshtml mà nó hiện thị giá trị dữ liệu từ đối tượng view model

Mục lục 5-12 Thêm tập tin NameAndPrice.cshtml

Sản phẩm tên là @Model.Name và có giá là $@Model.Price

Nếu bạn bắt đầu ứng dụng và điều hướng đến /Home/NameAndPrice, bạn sẽ thấy kết quả được minh họa như Hình 5-9 Như bạn có thể mong đợi, các yếu tổ phổ biến và kiểu được định nghiã trong layout đã áp dụng để hiển thị, để chứng minh bằng cách nào layout có thể được dùng như một mẫu để tạo ra cái nhìn chung và cảm nhận (mặc dù là đơn giản và không hấp dẫn như vì dụ này)

Hình 5-9 Nội dung trong tập tin layout được áp dụng cho NameAndPrice view

Ghi chú Tôi đã quên kết quả tương tự nếu tôi rời trường văn bảng trong hộp thoại trống Add View và dựa vào các tập tin view start Tôi

đã xác định tập tin một cách rõ ràng chỉ bởi vì ôi muốn thể hiện với bạn rằng tính năng của Visual Studio giúp bạn thực hiện một lựa chọn

Sử dụng những biểu thức Razor

Bây giờ tôi sẽ cho bạn thấy những view và layout cơ bản, tôi sẽ chuyển sang nhiều dạng biểu thức khác nhau mà Razor hỗ trợ và cách bạn có thể dùng chúng để tạo nội dung xem Trong một ứng dụng MVC tốt sẽ có sự tách biệt rõ ràng giữa các vai trò mà các phương thức động và view biểu diễn Các quy tắc đơn giản mà tôi đạ giới thiệu chúng ở Bảng 5-2

Bảng 5-2 Những vai trò của các phương thức động và View

123

Phương thức động

View

Đưa một đối tượng view model object ra view

Sử dụng đối tượng view model để trình bày nội dung cho người dùng

Đưa dữ liệu định dạng ra view

Thay đổi bất kỳ khía cạnh nào của đối tượng view model

Tôi sẽ trở lại chủ đề trong cuốn sách này Để có một MVC Framwork tốt, bạn cần tôn trọng và thực thi sự tách biệt giữa hai phần khác nhau của ứng dụng.Như bạn sẽ thấy, bạn có thể làm khá nhiều với Razor, trong đó có câu lệnh C# - nhưng bạn không nên dùng Razor để thực hiện logic kinh doanh hoặc điều khiển các đối tượng mô hình domain trong bất kỳ hoàn cảnh nào

Cũng như vậy, bạn không nên định dạng dữ liệu mà phương thức động của bạn thông qua để xem Thay vào đó, hãy để view nhìn ra dữ liệu cần phải hiển thị Bạn có thể thấy một ví dụ đơn giản trong phần trước của chương này Tôi xác định một phương thức động tên NameAndPrice, nó hiển thị giá trị thuộc tính Name and Price của đối tượng Product Dẫu cho tôi biết đôi tượng nào cần để hiển thị, tôi đã thông qua đối tượng Product đến với view model, như thế này:

public ActionResult NameAndPrice() {