Trang chủ / ASP.NET Core / Thêm một View trong ứng dụng ASP.NET Core qua mô hình MVC

Thêm một View trong ứng dụng ASP.NET Core qua mô hình MVC

Thêm một View trong ứng dụng ASP.NET Core MVC. Ở bài trước Controller đã kiêm luôn VC nghĩa là vừa làm nhiệm vụ của Controller và View, vì lúc đó chưa giới thiệu cho các bạn về View, nên giờ chúng ta sẽ tiến hành tách VC ra, nghĩa là bây giờ Controller chỉ làm nhiệm vụ của Controller, View sẽ làm nhiệm vụ của View mà. Vì thế trong bài này sẽ hướng dẫn các bạn làm điều này bằng cách chỉnh sử class HelloWorldController bằng View trong Razor để  tạo ra các đoạn mã HTML đến client.

Tạo tập View sử dụng Razor

Bây giờ chúng ta sẽ tiến hành tạo một tập tin View sử dụng Razor. Tập tin View sử dụng Razor sẽ có định dạng cshtml, nó cung cấp một cách đơn giản để có thể tạo ra HTML bằng ngôn ngữ C#. Razor là sự kết hợp giữa C# và HTML nhằm giảm thiểu số lượng các đoạn mã khi thiết kế một View, giúp bạn thiết kế một View nhanh chóng.

Ở bài trước phương thức Index của chúng ta trả về một chuổi với một thông điệp được mã hóa trong lớp Controller. Bây giờ tiến hành thay đổi phương thức Index như đoạn mã bên dưới

Phương thức Index này sử dụng một mẫu View nhằm tạo ra một HTML tương ứng cho trình duyệt. Bây giờ phương thức Index trong Controller lúc này đã trả lại một IActionResult thay cho kiểu dữ liệu đơn giản là chuỗi trước đây. Bây giờ chúng ta tiến hành tạo một mẫu View cho phương thức này như sau:

  • Click chuột phải vào thư mục View và chọn Add > New Folder và đặt tên thư mục là HelloWorld.
  • Trong cửa sổ Add New Item ta tiến hành chọn MVC View Page
  • Trong hộp thoại tên, tiến hành đặt tên là Index.cshtml và chọn Add
Thêm một View trong ứng dụng ASP.NET Core MVC
Thêm một View trong ứng dụng ASP.NET Core MVC

Tiến hành thay thế nội dung trong Views/HelloWorld/Index.cshtml với đoạn mã bên dưới:

Tiến hành điều hướng đến http://localhost:xxxx/HelloWorld. Lúc này phương thức Index trong HelloWordlController lúc này không làm nhiều việc như trước đó. Nó chỉ đơn giản là trả về câu lệnh return View(); trong đó quy định rằng phương thức này sử dụng một View để đáp ứng đến trình duyệt. Bởi vì chúng ta không xác định rõ ràng tên của tập tin View để sử dụng nên MVC lúc này sẽ sử dụng mặc định View Index.cshtml trong thư mục /Views/HelloWorld. Hình ảnh bên dưới hiển thị chuỗi “Hello from our View Template!” khi bạn điều hướng đến đường dẫn trên, đó là những đoạn code trong tập tin View của bạn hồi nãy.

Thêm một View trong ứng dụng ASP.NET Core MVC - Ảnh 2
Thêm một View trong ứng dụng ASP.NET Core MVC – Ảnh 2

Lưu ý: nếu cửa sổ trình duyệt của bạn có kích thước nhỏ (chẳng hạn trên mobile) thì lúc này bạn cần dùng nút chuyển đổi của Bootstrap để điều hướng đến trang Home, About, và Contact như hình bên dưới

Thêm một View trong ứng dụng ASP.NET Core MVC - Ảnh 3
Thêm một View trong ứng dụng ASP.NET Core MVC – Ảnh 3

Thay đổi trang Views và layout

Hãy thử nhấp vào các liên kết menu (MvcMovie, Home, About), bạn sẽ thâý mỗi trang đều có cách bố trí menu tương tự nhau. Nguyên nhân là do có một sự bố trí layout nằm trong file View/Share/_Layout.cshtml. Giờ hãy tiến hành mở tập tin Views/Shared/_Layout.cshtml.

Layout cho phép bạn chỉ định tất cả các đoạn mã bố trí trang của bạn ở một nơi và sau đó áp dụng nó trên nhiều trang trong trang web của bạn. Bạn sẽ thấy trong tập tin layout này dòng @RenderBody(). RenderBody là nơi mà tất cả các View bạn tạo ra sẽ hiện lên, và tất cả các View này sẽ nằm trong trang layout của bạn, hay nói cách khác đó là sẽ kết hợp với nội dung của file layout để hiển thị. Ví dụ, nếu bạn chọn liên kết  đến About, lúc này Views/ Home/About.cshtml sẽ được gọi và nằm trong phương thức RenderBody của tập tin _layout.cshtml.

Thay đổi title và liên kết đến menu trong tập tin layout

Thay đổi nội dung của tiêu đề. Thay đổi anchor text trong layout thành “MVC Movie” và Controller thay đổi từ HomeController thành MoviesController bằng đoạn mã bên dưới:

Vì mình không hightlight được nên nhìn hơi rối, cả đoạn code đó chủ yếu là thay đổi 2 dòng này thôi

Tiến hành lưu lại các thay đổi của bạn và bấm vào About. Bây giờ tất cả các trang đều sẽ hiển thị liên kết đến MVC Movie.

Thêm một View trong ứng dụng ASP.NET Core MVC - Ảnh 6Thêm một View trong ứng dụng ASP.NET Core MVC - Ảnh 6
Thêm một View trong ứng dụng ASP.NET Core MVC – Ảnh 6

Bạn thấy đó, chỉ cần thay đổi một lần trong tập tin layout thì tất cả các trang của bạn đã thay đổi theo với tiêu đề mới và liên kết mới. Việc đó là nhờ đoạn mã nằm trong tập tin Views/_ViewStart.cshtml

Lúc này tập tin Views/_ViewStart.cshtml sẽ sử dụng tập tin Views/Shared/_Layout.cshtml cho mỗi View của bạn. Bạn có thể sử dụng thuộc tính layout để thiết lập đến các layout khác thay cho “_layout” được mặc định, hoặc thiết lập null nếu bạn không muốn sử dụng layout nào.

Bây giờ, thay đổi nội dung của Index. Mở Views/HelloWorld/Index.cshtml. Tiến hành 2 thay đổi sau:

  • Văn bản xuất hiện trong tiêu đề (title) của trình duyệt.
  • Thay đổi  trong Header (sử dụng thêm <h2>)

Bạn sẽ thấy sự khác biệt khi thay đổi chúng với đoạn mã bên dưới đây:

ViewData[“Title”] = “Movie List”; đoạn mã này đã thiết lập tiêu đề (Title) của ViewDataDictionary thành “Movie List”. Thuộc tính Title được sử dụng trong phần tử <title> của HTML được khai báo bằng đoạn mã này của bạn trong tập tin layout

Lưu thay đổi của bạn và tiến hành làm mới lại trang. Nhấn tổ hợp phím Ctrl + F5 trong trình duyệt của bạn để nạp những phản hồi từ máy chủ. Bạn sẽ thấy  tiêu đề mới của trình duyệt đã được tạo ra từ ViewData[“Title”] chúng ta thiết lập trong View Index.cshtml.

Thêm một View trong ứng dụng ASP.NET Core MVC - Ảnh 4
Thêm một View trong ứng dụng ASP.NET Core MVC – Ảnh 4

Nhưng lúc này dòng chữ “Hello from our View Template!”  đã được mã hóa cứng (dễ hiểu hơn là không thay đổi) trong mỗi lần hiển thị, cái chúng ta cần có đó là dữ liệu động, dữ liệu có thể thay đổi, hiện tại trong ứng dụng MVC chúng ta đã có “V” (view)  và một “C” (controller), nhưng không có “M” (model) nào. Ở bài tới, chúng  sẽ hướng dẫn cách để tạo ra một cơ sở dữ liệu và lấy dữ liệu từ model.

Đưa dữ liệu từ Controller đến View

Trước khi mình nói về cơ sở dữ liệu và model, chúng ta hãy nói về vấn đề chuyển thông tin từ Controller đến View. Bạn biết đấy, controller được gọi để đáp ứng với yêu cầu từ URL. Một class Controller là nơi bạn viết mã để xử lý các yêu cầu trình duyệt đến, lấy dữ liệu từ một cơ sở dữ liệu, và cuối cùng quyết định nên phản ứng thế nào để gửi lại cho trình duyệt. View có thể được sử dụng từ một Controller để tạo ra và chuyển mã sang HTML để phản ứng lại cho yêu cầu từ trình duyệt.

Controller có trách nhiệm cung cấp bất cứ dữ liệu hoặc đối tượng được yêu cầu để cho một View nhằm đưa ra một phản ứng cho trình duyệt. Cách tốt nhất: Một View trong MVC không bao giờ được phép thực hiện business logic hoặc tương tác với một cơ sở dữ liệu trực tiếp. Thay vào đó, một View nên chỉ làm việc với các dữ liệu đó là cung cấp cho nó bằng Controller. Cách này giúp tách từng phần ra nhằm giữ mã của bạn sạch sẽ, có thể kiểm chứng và dễ bảo trì hơn.

Hiện nay, phương thức Welcome trong lớp HelloWorldController mất một tham số name và một ID và sau đó tạo ra các giá trị trực tiếp cho trình duyệt. Thay vì có Controller làm cho sinh ra một chuỗi, chúng ta hãy thay đổi mã của Controller để sử dụng một View thay thế. View sẽ tạo ra một đáp ứng động, có nghĩa là bạn cần phải đưa các bit dữ liệu thích hợp từ Controller tới View để tạo ra các phản ứng. Bạn có thể làm điều này bằng cách dùng Controller đưa các dữ liệu động (parameters) mà View cần trong từ điển ViewData để có thể truy cập đến View

Quay trở lại tập tin HelloWorldController.cs và thay đổi phương thức Welcome để thêm một Message và giá trị NumTimes vào ViewData. ViewData là một đối tượng động, có nghĩa là bạn có thể đặt bất cứ điều gì bạn muốn trong nó; các đối tượng ViewData là thuộc tính không được xác định cho đến khi bạn đặt (hay định nghĩa) một cái gì đó bên trong nó. Hệ thống mô hình MVC tự động ánh xạ các tham số namenumTimes từ chuỗi truy vấn vào thanh địa chỉ để tham chiếu đến phương thức của bạn. Tập tin HelloWorldController.cs sẽ được thay đổi như thế này như thế này:

Các đối tượng ViewData chứa dữ liệu đó sẽ được đưa đến View. Tiếp theo, bạn cần một mẫu View có tên là Welcome. Ta tiến hành tạo một View như bình thường:

  • Nhấp chuột phải vào thư mục Views/HelloWorld, và sau đó là Add->New Item.
  • Chọn MVC Name Page
  • Trong hộp Name, nhập Welcome.cshtml
  • Nhấn Add

Bạn sẽ tạo ra một vòng lặp trong tập tin Welcome.cshtml để hiển thị “Hello” NumTimes. Thay thế nội dung của Views / HelloWorld / Welcome.cshtml với những đoạn mã dưới đây:

Lưu các thay đổi của bạn và duyệt đến các URL sau đây:

http://localhost:xxxx/HelloWorld/Welcome?name=NguyenIT&numtimes=4

Dữ liệu được lấy từ các URL và thông qua controller bằng cách sử dụng MVC model binder. Dữ liệu trong Controller được đưa đến một ViewData và dùng nó để hiển thị. Nó sẽ hiển thị dữ liệu dưới dạng đoạn mã HTML cho trình duyệt.

Thêm một View trong ứng dụng ASP.NET Core MVC - Ảnh 5
Thêm một View trong ứng dụng ASP.NET Core MVC – Ảnh 5

Trong ví dụ trên, chúng ta sử dụng ViewData để truyền dữ liệu từ Controller đến View. Phần tiếp theo trong ví dụ này mình sẽ sử dụng view model để đưa dữ liệu từ controller đến view. Cách sử dụng view model để truyền dữ liệu là cách dùng được ưu thích trong ViewData.

Tải về source code: Google Drive
Series Navigation<< Thêm một controller trong ứng dụng ASP.NET Core qua mô hình MVCThêm một Model trong ứng dụng ASP.NET Core qua mô hình MVC >>

Thông tin Nguyễn An Hoàng Nguyên

Đam mê về lập trình, thích viết lách. Có hứng thú với thương mại điện tử và kinh doanh

Check Also

widget trong template này

Generic Repository Pattern là gì ? Cách sử dụng trong ASP.NET Core

Cũng đã gần 3 tháng mình mới viết bài mới. 3 tháng trước mình đã …

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *