Trong một website các bạn sẽ thấy một page lúc nào cũng có đủ các thành phần bao gồm: header, footer, body ... Nếu các bạn để ý sẽ thấy phần header và phần footer của các page thuộc cùng website đều giống nhau. Tuy nhiên theo cách thiết kế thông thường, cứ mỗi khi tạo ra một page mới chúng ta phải tạo lại phần header, footer. Mà 2 phần này thì nội dung giống nhau ở tất cả các page, do đó sẽ làm mất rất nhiều thời gian cho người thiết kế. Vì vậy để giải quyết tình trạng trên ASP.Net MVC đã cho ra đời 1 khái niệm làLayout Page, với việc sử dụng Layout Page chúng ta chỉ cần tạo nội dung cho header và footer một lần, nếu một page bất kì muốn sử dụng thì chỉ cần thừa kế từLayout Page chứa header và footer. Để hiểu rõ hơn thì chúng ta cùng đi qua ví dụ sau nhé! Đầu tiên các bạn tạo 1 project ASP.Net MVC có tên làMusicStore.
Chúng ta cùng xem thừa kế lại giao diện phần header và footer là sao nhé!
Giao diện trang About Giao diện trang Contact
Vậy hai trang About và Contact là hai page khác biệt sẽ sử dụng chung hai phần footer và header trong_Layout.cshtml. Khi các page được tạo ra mà có sử dụng footer và header giống nhau thì_Layout.cshtml sẽ cung cấp cho các page đó. Cách làm như thế nào thì tí nữa mình sẽ đi vào ví dụ cụ thể nhé! Tìm hiểu @RenderBody()Trong _Layout.cshtmlcác bạn sẽ thấy 1 thuộc tính đó là @RenderBody(). Tuy hai trang About và Contact có header và footer giống nhau, nhưng nội dung của hai trang này lại hoàn toàn khác nhau, vì vậyLayout Page cung cấp cho chúng ta 1 thuộc tính@RenderBody(), Với thuộc tính này khi các bạn muốn hiển thị View nào lên thì@RenderBody() sẽ trả về nội dung đúng với View đó, tức là chúng ta muốn hiển thị trangAbout lên thì @RenderBody() sẽ trả về nội dung đúng với trangAbout và tương tự đối với trangContact Nội dung trang About Nội dung trang Contact Qua hai kết quả trên thì @RenderBody() đã giúp cho hai trang Aboutvà Contact trả về nội dung mong muốn của các page. Tìm hiểu về @Html.ActionLinkCác bạn thấy trong _Layout.cshtmlcó 1 phương thức @Html.ActionLink, phương thức này là một trong các phương thức thuộc HTML Helper trong ASP.Net MVC. Trong phạm vi bài này mình chỉ giới thiệu @Html.ActionLink còn các phương thức còn lại trong HTML Helper thì khi nào gặp cái nào, mình sẽ giới thiệu cái đó. @Html.ActionLink là cách chúng ta tạo kết tới action trong 1 controller bất kì và thực thi action đó. Cụ thể như sau:
Mình sẽ lấy ví dụ của About:
Ví dụ demo Phần đầu mình đã cùng các bạn tìm hiều về Layout Page, trong nội dung này chúng ta sẽ cùng nhau đi làm ví dụ vềLayout Page nhé! Qua ví dụ này, các bạn sẽ sẽ hiểu rõ cách áp dụng Layout Page vào cho từng View hiển thị, biết cách nhúng CSS bên ngoài vào trong giao diện. Ở phần trên chúng ta đã tạo thành công 1 project có có tên làMusicStore. Để tạo demo cho riêng mình thì các bạn nên xóa 1 vài thư mục có sẵn trong Project.
Sau đó các bạn xóa tiếp cho mình folder _Layout.cshtml trong thư mục Shared Lý do mà mình nói các bạn xóa đi là vì chúng ta sẽ tạo raLayout Page theo ý của chúng ta, kể cả các trang thừa kề từ Layout Page thì mình cũng muốn làm khác đi theo cách riêng của mình. Để tạo mới 1 Layout Page thì chúng ta vào folder Shared trong phần Views, sau đó các bạn làm theo như mô tả hình dưới đây.
Sau khi tạo xong được Layout Page thì chúng ta chưa tạo giao diện cho Layout Page vội, mà các bạn cần chuẩn bị cho mình 1 số file cần thiết như sau:
Download file MvcMusicStore-Assets.zip thành công, các bạn giải nén file đó ra. Trong file giải nén các bạn sẽ thấy có 3 folder và 1 file txt thì các bạn truy cập vào folder có tên làContent cho mình nhé. Lý do mà mình nói các bạn download file nén này về là vì chúng ta sẽ không sử dụng giao diện mặc định củaASP.Net MVC nữa mà chúng ta sẽ sử dụng 1 giao diện có sẵn khác với CSS riêng. Sau khi truy cập vào folder Content các bạn copy tất cácthư mục trong đó và bỏ vào thư mục Content trong projectMusicStore của mình nhé.
Vậy là các bạn đã chuẩn bị xong các tài nguyên cần thiết, bây giờ chúng ta bắt đầu vào sử dụng nó nhé.
Sau khi nhấn OK thì các bạn chọn Add. Tại trang Index vừa tạo, các bạn chuyển chữ Index trong thẻ<h2> thành This is my home page nhé!
Trong đoạn code trên, các bạn copy những phần sau vào trong bài của các bạn. Phần này nằm trong thẻ<head\></head\>. <link href\="@Url.Content("~/Content/Site.css")" rel\="stylesheet" type\="text/css" /> <div id\="header"> Từ khóa @Url.Content dùng để trỏ tới các thư mục css hoặc js hay bất kì file nào mà chúng ta muốn sử dụng. Phía trên mình có nói các bạn copy fileImages và Site.css vào trong thư mụcContent, để có thể sử dụngSite.css bạn chỉ cần viết theo cú pháp trongkhung đỏ như hình dưới. Cũng như vậy, khung màu xanh các bạn cũng làm tương tự để chúng ta có thể sử dụng các file js (chú ý: file js ở đây là được cung cấp sẵn).
Cuối cùng các bạn chạy project mình lên để kiểm tra sự thay đổi nhé Sau khi chạy project, nếu bạn nào có màn hình chạy lên giống màn hình sau thì coi như các bạn đã hoàn thành bài hướng dẫn. Nhìn vào kết quả đạt được, các bạn thấy sự khác biệt giữa file mặc định và file mà chúng ta tạo ra rồi nhé. Kết luậnQua bài học ngày hôm này, mình đã giúp các bạn hiểu rõ về LayoutPage, RenderBody, Html.ActionLink cũng như cách các bạn sử dụng giao diện bên ngoài. Bài sau chúng ta sẽ đi vào Tìm hiểu về PartialView, Model trong MVC, tham số và cách truyền tham số tới View sử dụng Model Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận hoặc góp ý của mình để phát triển bài viết tốt hơn. Đừng quên “Luyện tập – Thử thách – Không ngại khó”. Tải xuốngTài liệuNhằm phục vụ mục đích học tập Offline của cộng đồng, Kteam hỗ trợ tính năng lưu trữ nội dung bài học Tìm hiểu về Layout Page, @RenderBody, @Html.ActionLink và ví dụ minh họa trong ASP.Net dưới dạng file PDF trong link bên dưới. Ngoài ra, bạn cũng có thể tìm thấy các tài liệu được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com Đừng quên like và share để ủng hộ Kteam và tác giả nhé! Thảo luậnNếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng. |