by oclockvn at 09:42 PM 12/04/2016

ASP.NET MVC 5 SERIES - P2: Layout, View, Partial View and Razor

Layout

Nếu bạn đã từng làm qua web forms thì layout tương tự như master page

Layout đơn giản chỉ là 1 view, là nơi chứa tất cả những View khác (ngoại trừ partial view), và là kết quả cuối cùng khi render ra browser. Để dễ dàng hình dung, mở lại ứng dụng đang thực hiện và chạy:

Trang chủ: mình tạm thời chia làm 3 phần: header menu (1), body content (2) và footer (3).

index

Giờ thử bấm qua About

about

Chỉ có phần content (2) là thay đổi, thử qua trang Contact xem sao:

contact

Vẫn là phần (2) thay đổi, (1) và (3) vẫn giữ nguyên như các trang khác.

_Layout.cshtml

Vâng, .cshtml tức layout vẫn là 1 view, sử dụng Razor view engine.

layout.cshtml

Shared là 1 thư mục đặc biệt trong MVC, mọi view được đặt trong Shared có thể được truy cập từ bất cứ Controller nào. Do đó, ví dụ view Index của AccountController có thể nằm ở 2 nơi: Views/Account/Index.cshtml hoặc Views/Shared/Index.cshtml.

Mở file _Layout.cshtml ra, bạn có thể thấy tè le thứ mà có thể bạn chưa hiểu được ngay bây giờ. Hãy tạm thời xóa hết và để như dưới đây - 1 cấu trúc html5 document đơn giản:

layout min

...and run /home/about:

Oops!!!

The "RenderBody" method has not been called for layout page ~/Views/Shared/_Layout.cshtml.

RenderBody() là phương thức dùng để render 1 view bất kỳ vào trong layout ( = gộp view vào layout và hiển thị ra browser). Trong view _Layout bắt buộc (và duy nhất) phải có phương thức RenderBody, thêm vào bằng cách sử dụng cú pháp razor:

layout renderbody

...and run:

about no-layout

Bạn thấy đấy, nội dung trong About.cshtml thu gọn lại và được render đúng vị trí mà RenderBody() được gọi

about view

Từ đây, những nội dung động (load dữ liệu từ db), bạn có thể viết trong 1 view riêng (tức là có controller xử lý), những nội dung tĩnh (menu - nếu là menu tĩnh, footer, banner...) thì bạn có thể đặt vào _Layout.

_ViewStart.cshtml

Với cách tổ chức _Layout và View như vậy, trong các view bạn không cần phải lặp lại nguyên cấu trúc của 1 trang web (viết y chang header, copy y chang footer...) mà chỉ cần viết những gì cần viết vào View (như view About.cshtml trên). Tuy nhiên, làm sao 1 View biết được đâu là master layout? Đó là việc của _ViewStart.cshtml:

viewstart

Mở nội dung viewstart ra, bạn chỉ thấy đơn giản:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

Nội dung của _ViewStart là chỉ ra layout mặc định của mỗi View. Tuy nhiên bạn có thể "override" điều này bằng 2 cách:

Cách 1: chỉ ra layout mới trong view

Tạo 1 file layout mới:

spec new layout

Và set nó trong View:

spec new layout

Kết quả:

spec new layout result

Cách 2: Không nhận layout default, sử dụng nguyên set:

set layout null

Mỗi cách đều có 1 ưu - khuyết điểm riêng, tuy thường không dùng nhưng cũng rất hữu dụng trong những trường hợp cụ thể (khi nào bạn cần thì bạn sẽ biết).

partial view

Nếu bạn đã biết web forms, partial view mang ý nghĩa của user control.

Như đã nói ở trên về View, mọi view đều được render đúng vị trí RenderBody được gọi và trả về layout. Còn partial view, nó không sử dụng layout mà trả về đúng những gì nó chứa.

Có nhiều cách để sử dụng partial view, đây là cách đơn giản nhất:

R-click vào Views/Home --> Add View...

add partial view

Partial view không yêu cầu đặt tên theo quy ước (cũng như tất cả các view khác), tuy nhiên sẽ dễ phân biệt hơn nếu bạn đặt tên với dấu _ trước tên.

Lưu ý là mình add partial view trong phạm vi Views/Home nên chỉ sử dụng được trong HomeController. Nhắc lại 1 lần nữa là nếu muốn mọi Controller đều sử dụng được, bạn hãy add trong thư mục Shared

home about partial

Nội dung partial view đơn giản như sau:

partial view about

Và gọi nó bằng cách sau:

partial view using

Kết quả:

partial view result

Razor

razor cho phép bạn trộn c# vào html (.cshtml). Rất đơn giản, bạn chỉ cần viết @ đứng trước one line code, và @{ } nếu muốn sử dụng block code:

Ví dụ nè:

@DateTime.Now.ToString(); // one-line code

@{
    // multiple lines
    var count = 1;
    var name = "kratos";
    var list = new List<string>();
}

<h2>Name: @name - @age years old</h2>

razor example

Kết quả:

razor result

Hãy để ý cách khai báo, gọi sử dụng, cách sử dụng vòng lặp... với cú pháp razor.

Setup layout cho website

Mở trang didongexpress ra và xem xét (ở đây tùy cách chia của mỗi người, bạn có thể chia layout sao để tiện cho mình nhất):

  • (1) header: sử dụng partial view.
  • (2) slider: chỉ có trang home là có, bạn có thể đặt nó là 1 partial view ở trang home.
  • (3) product: load từ db, ở đây là 1 view.
  • (4) guide: partial view.
  • (5) news: partial view.
  • (6) footer: partial view.

didongexpress layout 1 didongexpress layout 1

Và đây là cách mình tổ chức layout:

_Layout.cshtml

didongexpress layout 1

_Header.cshtml và _Footer.cshtml

didongexpress layout 1

Nhắc lại lần cuối: mình đặt _Header và _Footer nằm trong mục Shared là để chia sẻ với mọi controller khác. Nói cách khác, những thứ là của chung thì bỏ vào Shared.

Các partial view còn lại (slider, guide, news...)?

Bạn thử bấm vào chi tiết 1 sản phẩm xem những cái đó còn không?

Đơn giản là thế này: layout của chúng ta chỉ có 3 phần như trên, trong trang chủ thì mình tách ra làm (2) + (3) + (4) + (5) cho đơn giản thôi.

Bắt tay vào làm sẽ rõ nhé!

Phần 2 kết thúc ở đây, nếu bạn có thắc mắc, đừng ngại comment hoặc gửi email cho mình, mình sẽ giải đáp ngay khi có thể.

  • 3
  • 2588
  • 8
relate posts
by {{relate.UpdatedBy}} at 02/21/2018

{{relate.Title}}

  • {{relate.TotalComment}}
  • {{relate.View}}
  • {{relate.AveragePoint}}
[{{postCtrl.comments.length}}] comments
all comments {{ postCtrl.isHiddenComment ? 'show comments' : 'hide comments' }}
what do you want to say?

(*) markdown supported with html disabled