[ASP.NET MVC] Phần 4: Thêm mới View

View là một thành phần trong mô hình MVC (Model-View-Controller), chịu trách nhiệm chủ yếu về việc hiển thị nội dung trên giao diện Web (bằng mã HTML) cũng như tiếp nhận các tương tác từ người dùng (client) để gửi đến server.
Đầu tiên, bạn sẽ chỉnh sửa các phương thức trong lớp DammioController để trả về các tập tin View. Sau đó, bạn phải tạo các tập tin View (đuôi mở rộng là .cshtml) và sử dụng Razor để viết mã. Cơ chế Razor giảm thiểu số lượng ký tự và phím nhấn cần để tạo một tập tin View, do đó lập trình viên có thể làm việc nhanh và trôi chảy hơn.
Trong lớp DammioController.cs, chỉnh sửa phương thức Index như sau:

Code:

[size=16][ltr][code]public[/code]
 
[code]ActionResult Index()[/code][/ltr][/size]
[size=16][ltr][code]{[/code][/ltr][/size]
[size=16][ltr][code]      [/code]
[code]return[/code]
 
[code]View(); [/code][/ltr][/size]
[size=16][ltr][code]}[/code][/ltr][/size]

[ltr]Trong ví dụ trên, phương thức Index sẽ trả về một ActionResult (thể hiện kết quả của một phương thức hành động) hay một lớp kế thừa từ lớp ActionResult bằng câu lệnh return View();. View() được hiểu là ám chỉ một View tương ứng với Controller.
Tạo một View cho Controller
Để tạo một View mới, bạn chọn thư mục Views/Dammio trong Solution Explorers, sau đó chuột phải chọn Add -> MVC5 View Page with Layout (Razor). Vì bạn mới tìm hiểu về View cho nên bạn nên dùng kiểu tạo mới bằng Layout, khi nào bạn rành bạn có thể tạo mới bằng Add -> View nếu muốn.

Lưu ý, bạn phải thêm View tương ứng với Controller. Ví dụ, bạn có Controller tên là ABCController, thì lúc thêm View bạn phải thêm vào thư mục Views/ABC.
Sau đó, bạn phải đặt tên View vào hộp thoại, ví dụ Index và nhấn OK.

Tiếp theo, bạn chọn Layout (bố cục) cho View. Khi tạo dự án MVC thì Visual Studio để tạo cho bạn View mặc định là _Layout.cshtml, bạn có thể tạo bất cứ layout nào nếu muốn.

Sau khi bạn tạo xong, một tập tin Index.cshtml sẽ được tạo trong thư mục Views/Dammio vói nội dung mã nguồn như sau.

[/ltr]

Code:

[ltr][code]@{[/code][/ltr]
[ltr][code]    [/code]
[code]Layout = [/code]
[code]"~/Views/Shared/_Layout.cshtml"[/code]
[code];[/code][/ltr]
[ltr][code]}[/code][/ltr]

[size][ltr]

Tiếp theo bạn chỉnh sửa tập tin Index.cshtml với nội dung mã nguồn sau:


[/ltr][/size]

Code:

[ltr][code]@{[/code][/ltr]
[ltr][code]    [/code]
[code]Layout = [/code]
[code]"~/Views/Shared/_Layout.cshtml"[/code]
[code];[/code][/ltr]
[ltr][code]}[/code][/ltr]
[ltr] [/ltr]
[ltr][code]@{[/code][/ltr]
[ltr][code]    [/code]
[code]ViewBag.Title = [/code]
[code]"Index"[/code]
[code];[/code][/ltr]
[ltr][code]}[/code][/ltr]
[ltr] [/ltr]
[ltr][code]<h2>Index</h2>[/code][/ltr]
[ltr] [/ltr]
[ltr][code]<p>Hello [/code]
[code]from[/code]
 
[code]our View Template!</p>[/code][/ltr]

[size][ltr]

Sau đó, bạn chọn chuột phải lên tập tin Index.cshtml ở Solution Expoler và chọn chế độ View in Browser để xem nội dung View Index vừa tạo ở trình duyệt. Cách thứ hai, bạn có thể chạy đường dẫn http://localhost:xxxx/Dammio/Index sau khi nhấn F5 hoặc Ctrl + F5 ở dự án.

Cuối cùng, đây là giao diện trang Index.cshtml bạn có ở trình duyệt như sau:

Đến bước này, tôi sẽ trình bày tóm tắt lại để bạn hiểu rõ quy trình hiển thị dữ liệu trên giao diện View như sau, mong bạn đọc và chú ý kỹ, đây là phần quan trọng.
[/ltr][/size]

Đầu tiên, một người dùng sẽ chạy đường dẫn http://localhost:xxxx/Dammio/Index, server sẽ dò tìm và biết được đường dẫn này thuộc về tập tin DammioController.cs với phương thức Index(). Tiếp tục, server sẽ thực thi nội dung trong phương thức Index() và trả về dòng lệnh return View(). Vì đây là phương thức Index trả về View, server sẽ dò tìm đúng tập tin có tên Index.cshtml nằm trong thư mục Views/Dammio. Tiếp theo, server đọc nội dung Index.cshtml và hiển thị mã HTML trên màn hình.

[size][ltr]
Nếu bạn nắm được cách hoạt động trên, thì bạn cũng sẽ hiểu được tất cả các View trong ASP.NET MVC đều hoạt động như vậy.
Tiếp theo, chúng ta thử tạo 1 View tên là Hello.cshtml nằm trong thư mục Views/Dammio. Để tạo mới View, bạn phải tạo phương thức tương ứng trong lớp DammioController trước. Bạn tạo phương thức Hello với nội dung như sau ở tập tin DammioController.cs:

[/ltr][/size]

Code:

[ltr][code]using[/code]
 
[code]System;[/code][/ltr]
[ltr][code]using[/code]
 
[code]System.Collections.Generic;[/code][/ltr]
[ltr][code]using[/code]
 
[code]System.Linq;[/code][/ltr]
[ltr][code]using[/code]
 
[code]System.Web;[/code][/ltr]
[ltr][code]using[/code]
 
[code]System.Web.Mvc;[/code][/ltr]
[ltr] [/ltr]
[ltr][code]namespace[/code]
 
[code]DammioMVC.Controllers[/code][/ltr]
[ltr][code]{[/code][/ltr]
[ltr][code]    [/code]
[code]public[/code]
 
[code]class[/code]
 
[code]DammioController : Controller[/code][/ltr]
[ltr][code]    [/code]
[code]{[/code][/ltr]
[ltr][code]        [/code]
[code]//[/code][/ltr]
[ltr][code]        [/code]
[code]// GET: /Dammio/[/code][/ltr]
[ltr][code]        [/code]
[code]public[/code]
 
[code]ActionResult Index()[/code][/ltr]
[ltr][code]        [/code]
[code]{[/code][/ltr]
[ltr][code]            [/code]
[code]return[/code]
 
[code]View(); [/code][/ltr]
[ltr][code]        [/code]
[code]}[/code][/ltr]
[ltr] [/ltr]
[ltr][code]        [/code]
[code]// Phương thức Hello[/code][/ltr]
[ltr][code]        [/code]
[code]public[/code]
 
[code]ActionResult Hello()[/code][/ltr]
[ltr][code]        [/code]
[code]{[/code][/ltr]
[ltr][code]            [/code]
[code]return[/code]
 
[code]View(); [/code][/ltr]
[ltr][code]        [/code]
[code]}[/code][/ltr]
[ltr] [/ltr]
[ltr][code]        [/code]
[code]// [/code][/ltr]
[ltr][code]        [/code]
[code]// GET: /Dammio/ChaoMung/ [/code][/ltr]
[ltr][code]        [/code]
[code]public[/code]
 
[code]string[/code]
 
[code]ChaoMung([/code]
[code]string[/code]
 
[code]ten, [/code]
[code]int[/code]
 
[code]tuoi = 1)[/code][/ltr]
[ltr][code]        [/code]
[code]{[/code][/ltr]
[ltr][code]            [/code]
[code]return[/code]
 
[code]HttpUtility.HtmlEncode([/code]
[code]"Xin chào "[/code]
 
[code]+ ten + [/code]
[code]". Tuổi của bạn là: "[/code]
 
[code]+ tuoi);[/code][/ltr]
[ltr][code]        [/code]
[code]}[/code][/ltr]
[ltr][code]    [/code]
[code]}[/code][/ltr]
[ltr][code]}[/code][/ltr]

[size][ltr]

Sau đó tương tự bạn cũng tạo 1 View tên là Hello.cshtml nằm trong thư mục Views/Dammio với nội dung:


[/ltr][/size]

Code:

[ltr][code]@{[/code][/ltr]
[ltr][code]    [/code]
[code]Layout = [/code]
[code]"~/Views/Shared/_Layout.cshtml"[/code]
[code];[/code][/ltr]
[ltr][code]}[/code][/ltr]
[ltr] [/ltr]
[ltr][code]@{[/code][/ltr]
[ltr][code]    [/code]
[code]ViewBag.Title = [/code]
[code]"Hello"[/code]
[code];[/code][/ltr]
[ltr][code]}[/code][/ltr]
[ltr] [/ltr]
[ltr][code]<h3>Đây là nội dung của tập tin Hello.cshtml được xử lý từ phương thức Hello ở controller Dammio (DammioController).</h3>[/code][/ltr]

[size][ltr]




Tiếp theo, bạn nhấn chuột phải lên tập tin Hello.cshtml và View in Browser để xem giao diện ở trình duyệt hoặc chạy đường dẫn http://localhost:xxxx/Dammio/Hello sau khi nhấn F5 hoặc Ctrl + F5 ở dự án.

Thay đổi nội dung trang bố cục (Layout) và tập tin View
Sau khi khởi tạo các trang view theo các phương thức khác nhau ở controller, bạn tiếp tục tìm hiểu cách thay đổi nội dung các trang View cũng như bố cục trang bố cục.
Đầu tiên, bạn mở tập tin bố cục _Layout.cshtml ở thư mục /Views/Shared trong cửa sổ Solution Explorer và thấy mã nguồn như sau:

[/ltr][/size]

Code:

[ltr][code]<!DOCTYPE html>[/code][/ltr]
[ltr][code]<html>[/code][/ltr]
[ltr][code]<head>[/code][/ltr]
[ltr][code]    [/code]
[code]<meta charset=[/code]
[code]"utf-8"[/code]
 
[code]/>[/code][/ltr]
[ltr][code]    [/code]
[code]<meta name=[/code]
[code]"viewport"[/code]
 
[code]content=[/code]
[code]"width=device-width, initial-scale=1.0"[/code]
[code]>[/code][/ltr]
[ltr][code]    [/code]
[code]<title>@ViewBag.Title - My ASP.NET Application</title>[/code][/ltr]
[ltr][code]    [/code]
[code]@Styles.Render([/code]
[code]"~/Content/css"[/code]
[code])[/code][/ltr]
[ltr][code]    [/code]
[code]@Scripts.Render([/code]
[code]"~/bundles/modernizr"[/code]
[code])[/code][/ltr]
[ltr] [/ltr]
[ltr][code]</head>[/code][/ltr]
[ltr][code]<body>[/code][/ltr]
[ltr][code]    [/code]
[code]<div [/code]
[code]class[/code]
[code]=[/code]
[code]"navbar navbar-inverse navbar-fixed-top"[/code]
[code]>[/code][/ltr]
[ltr][code]        [/code]
[code]<div [/code]
[code]class[/code]
[code]=[/code]
[code]"container"[/code]
[code]>[/code][/ltr]
[ltr][code]            [/code]
[code]<div [/code]
[code]class[/code]
[code]=[/code]
[code]"navbar-header"[/code]
[code]>[/code][/ltr]
[ltr][code]                [/code]
[code]<button type=[/code]
[code]"button"[/code]
 
[code]class[/code]
[code]=[/code]
[code]"navbar-toggle"[/code]
 
[code]data-toggle=[/code]
[code]"collapse"[/code]
 
[code]data-target=[/code]
[code]".navbar-collapse"[/code]
[code]>[/code][/ltr]
[ltr][code]                    [/code]
[code]<span [/code]
[code]class[/code]
[code]=[/code]
[code]"icon-bar"[/code]
[code]></span>[/code][/ltr]
[ltr][code]                    [/code]
[code]<span [/code]
[code]class[/code]
[code]=[/code]
[code]"icon-bar"[/code]
[code]></span>[/code][/ltr]
[ltr][code]                    [/code]
[code]<span [/code]
[code]class[/code]
[code]=[/code]
[code]"icon-bar"[/code]
[code]></span>[/code][/ltr]
[ltr][code]                [/code]
[code]</button>[/code][/ltr]
[ltr][code]                [/code]
[code]@Html.ActionLink([/code]
[code]"Application name"[/code]
[code], [/code]
[code]"Index"[/code]
[code], [/code]
[code]"Home"[/code]
[code], [/code]
[code]null[/code]
[code], [/code]
[code]new[/code]
 
[code]{ @[/code]
[code]class[/code]
 
[code]= [/code]
[code]"navbar-brand"[/code]
 
[code]})[/code][/ltr]
[ltr][code]            [/code]
[code]</div>[/code][/ltr]
[ltr][code]            [/code]
[code]<div [/code]
[code]class[/code]
[code]=[/code]
[code]"navbar-collapse collapse"[/code]
[code]>[/code][/ltr]
[ltr][code]                [/code]
[code]<ul [/code]
[code]class[/code]
[code]=[/code]
[code]"nav navbar-nav"[/code]
[code]>[/code][/ltr]
[ltr][code]                    [/code]
[code]<li>@Html.ActionLink([/code]
[code]"Home"[/code]
[code], [/code]
[code]"Index"[/code]
[code], [/code]
[code]"Home"[/code]
[code])</li>[/code][/ltr]
[ltr][code]                    [/code]
[code]<li>@Html.ActionLink([/code]
[code]"About"[/code]
[code], [/code]
[code]"About"[/code]
[code], [/code]
[code]"Home"[/code]
[code])</li>[/code][/ltr]
[ltr][code]                    [/code]
[code]<li>@Html.ActionLink([/code]
[code]"Contact"[/code]
[code], [/code]
[code]"Contact"[/code]
[code], [/code]
[code]"Home"[/code]
[code])</li>[/code][/ltr]
[ltr][code]                [/code]
[code]</ul>[/code][/ltr]
[ltr][code]                [/code]
[code]@Html.Partial([/code]
[code]"_LoginPartial"[/code]
[code])[/code][/ltr]
[ltr][code]            [/code]
[code]</div>[/code][/ltr]
[ltr][code]        [/code]
[code]</div>[/code][/ltr]
[ltr][code]    [/code]
[code]</div>[/code][/ltr]
[ltr][code]    [/code]
[code]<div [/code]
[code]class[/code]
[code]=[/code]
[code]"container body-content"[/code]
[code]>[/code][/ltr]
[ltr][code]        [/code]
[code]@RenderBody()[/code][/ltr]
[ltr][code]        [/code]
[code]<hr />[/code][/ltr]
[ltr][code]        [/code]
[code]<footer>[/code][/ltr]
[ltr][code]            [/code]
[code]<p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>[/code][/ltr]
[ltr][code]        [/code]
[code]</footer>[/code][/ltr]
[ltr][code]    [/code]
[code]</div>[/code][/ltr]
[ltr] [/ltr]
[ltr][code]    [/code]
[code]@Scripts.Render([/code]
[code]"~/bundles/jquery"[/code]
[code])[/code][/ltr]
[ltr][code]    [/code]
[code]@Scripts.Render([/code]
[code]"~/bundles/bootstrap"[/code]
[code])[/code][/ltr]
[ltr][code]    [/code]
[code]@RenderSection([/code]
[code]"scripts"[/code]
[code], required: [/code]
[code]false[/code]
[code])[/code][/ltr]
[ltr][code]</body>[/code][/ltr]
[ltr][code]</html>[/code][/ltr]

[size][ltr]


Trong tập tin này, ở dòng <title>@ViewBag.Title – My ASP.NET Application</title> bạn có thể đổi tên tiêu đề cho các trang Web tùy ý. @ViewBag.Title là một biến Title thuộc đối tượng chứa biến ViewBag và có thể được thiết lập giá trị ở mỗi trang View khác nhau. Tiếp theo bạn thay dòng này bằng đoạn mã




[/ltr][/size]

Code:

<title>@ViewBag.Title - Dammio Website</title>

[size][ltr]



Tiếp theo, bạn dò tìm dòng @RenderBody(). RenderBody chính là 1 placeholder (nơi chứa) giúp bạn đặt nội dung khác nhau ở mỗi trang khác nhau, bao quanh chính là bố cục trang. Để hình dụng điều này, bạn chạy lại trang http://localhost:xxxx/Dammio/Hello ở trình duyệt:

Trong hình trên, bạn có thể thấy trang Hello.cshtml sử dụng tập tin _Layout.cshtml làm tập tin bố cục, vì vậy menu màu đen ở đầu và dòng chữ “© 2018 – My ASP.NET Application” đều lấy từ tập tin _Layout.cshtml, chỉ có nội dung ở giữa (khung xanh lá) là nội dung của chính trang Hello.cshtml.
Trong phần Menu của tập tin _Layout.cshtml, bạn có thể chỉnh sửa ActionLink (một siêu liên kết, giống như thẻ a href) như sau:
Thay dòng:
[/ltr][/size]

Code:

@Html.ActionLink("Application name", "Index", "Home", null, new { @class = "navbar-brand" })

[size][ltr]

bằng:

[/ltr][/size]

Code:

@Html.ActionLink("DAMMIO.COM", "Index", "Home", null, new { @class = "navbar-brand" })

[size][ltr]


Bạn có thể chạy lại trang http://localhost:xxxx/Dammio/Hello để xem kết quả thay đổi tên Menu.

Ở đây, xin giải thích về phương thức ActionLink, phương thức này có cú pháp:
[/ltr][/size]

ActionLink(string linkText, string actionName, string controllerName)
linkText: là văn bản hiển thị trên đường dẫn
actionName: là tên phương thức
controllerName: là tên controller

[size][ltr]
Cách dùng ActionLink như sau:
[/ltr][/size]

1	Code: @Html.ActionLink( Code: "Liên kết" Code: , Code: "Hello" Code: , Code: "Dammio" Code: )

[size][ltr]
thì sẽ phân giải thành mã HTML như sau:


[/ltr][/size]