ASP.NET - MVC - View
ASP.NET MVC - View
Trong phần này, bạn sẽ tìm hiểu về khung nhìn View trong ASP.NET MVC.
View là một giao diện người dùng. View chính là các thành phần chịu trách nhiệm hiển thị các thông tin lên cho người dùng thông qua giao diện. Thông thường, các thông tin cần hiển thị được lấy từ thành phần Models. Ví dụ, đối tượng Product có một “Edit” view bao gồm các textboxes, các dropdowns và checkboxes để chỉnh sửa các thuộc tính của sản phẩm; có một “Display” view gồm 2 dòng, cột dòng là ProductID, dòng sau là OrderDate… để xem thông tin về sản phẩm.
View ASP.NET MVC được lưu trong thư mục Views. Các phương thức hành động khác nhau của một lớp controller duy nhất có thể hiển thị các Views khác nhau, do đó, thư mục Views chứa một thư mục riêng cho mỗi controller có cùng tên controller, để phù hợp với nhiều Views.Ví dụ: các Views sẽ được hiển thị từ bất kỳ phương thức hành động nào của HomeController, nằm trong thư mục Views > Home. Tương tự các Views sẽ được hiển thị từ StudentController, sẽ nằm trong thư mục Views > Student như được hiển thị bên dưới.
Chú ý: Trong hình 1, các bạn thấy có 2 thư mục Home và Student trong thư mục Views, tương ứng với 2 controller HomeController và StudentController. Trong mỗi thư mục, số lượng các View khác nhau, tùy thuộc nghiệp vụ, logic của controller đó..
Razor View Engine
Microsoft đã giới thiệu công cụ Razor được đóng gói với MVC 3. Bạn có thể viết hỗn hợp các thẻ html và mã phía máy chủ trongcrazor. Razor sử dụng ký tự @ cho mã phía máy chủ thay vì <%%>. Bạn có thể sử ngôn ngữ C # hoặc Visual Basic để viết mã phía máy chủ bên trong Razor. Razor tối đa hóa tốc độ viết mã bằng cách giảm thiểu số lượng ký tự và tổ hợp phím cần thiết khi viết trong View. Các tập tin Razor có phần mở rộng .cshtml hoặc vbhtml.
ASP.NET MVC hỗ trợ các loại tập tin:
Phần mở rộng | Giải thích |
---|---|
.cshtml | C# Razor . Hỗ trợ C# có thẻ html . |
.vbhtml | Visual Basic Razor . Hỗ trợ Visual Basic có thẻ html . |
.aspx | ASP.Net web form |
.ascx | ASP.NET web control |
Tạo mới View.
Click chuột phải vào ActionResult Index(), chọn Add View…
Trong cửa sổ Add View, các bạn nhập các thông số, sau đó nhấn nút Add để tiến hành tạo View.
Màn hình thêm mới View
Tùy chọn trong Add View:
- ViewName: tên view, mặc định sẽ là tên action trong Controller, có thể thay đổi tên khác.
- Template: lựa chọn các mẫu View có sẵn.
- Create as a partial view: tạo view có kiểu là partial view (sẽ giới thiệu trong bài PartialView)
- Use a layout page: chọn Layout Page mặc định cho View.
Bây giờ, chúng ta chọn Student từ lớp Model classLớp Model tự động hiển thị tên của tất cả các lớp trong thư mục Model. Chúng ta đã tạo lớp Student trong phần trước, vì vậy nó sẽ được đưa vào danh sách.
Chọn checkbox "Use a layout page" checkbox và chọn trang _Layout.cshtml, sau đó, nút Add . Sau này chúng ta sẽ thấy trang bố cục là gì nhưng bây giờ nghĩ nó giống như một trang chính trong MVC.
Code của trang Index.cshtml.
Views\Student\Index.cshtml:
@model IEnumerable<MVC_BasicTutorials.Models.Student>
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.StudentName)
</th>
<th>
@Html.DisplayNameFor(model => model.Age)
</th>
<th></th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.StudentName)
</td>
<td>
@Html.DisplayFor(modelItem => item.Age)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id=item.StudentId }) |
@Html.ActionLink("Details", "Details", new { id=item.StudentId }) |
@Html.ActionLink("Delete", "Delete", new { id = item.StudentId })
</td>
</tr>
}
</table>
Như hình trên ở trên, View Index chứa cả mã Html và razor. Razor có ký hiệu là @. @Html là một lớp Helper để tạo các điều khiển html.
Index.cshtml
Run chúng ta có kết quả:
Chú ý:
Một View trong ASP.NET MVC điều thừa kế từ lớp WebViewPage trong namespace System.Web.Mvc .