Bài trước:
Mục tiêu:
- Thiết kế bố cục trang web với ứng dụng web
- Tìm hiểu thiết kế Layout cho Web Page bằng thẻ Table hay thẻ Div
- Tìm hiểu Layout Page và View Page.
- Tìm hiểu khai báo View Page và Section
- Tìm hiểu khái niệm Layout Page và Render Section
- Tìm hiểu Partial Page và Layout Page
- Page/Layout MVC Razor và MVC ASPX
- So sánh giữa cách lập trình bằng mã Razor và ASPX, thiết kế Template
Layout Web Page
- Sử dụng thẻ Table, tr, td => Chuyên nghiệp =>div.
- Tải trang Web sẽ tải hết thẻ Table thì mới hiển thị, còn thẻ DIV thì tải từng phần DIV rồi mới tải hết, nên sẽ nhanh hơn. Trong thực tế người ta sử dụng thẻ DIV.
- Main Layout: DIV
- Vùng web thì có thể sử dụng Table.
- DIV thì khó để phân vùng Layout, bù lại thì site load sẽ nhanh hơn.
* Ngày nay, web browser đã tốt hơn, tốc độ internet cũng được cải thiện hơn nên Table cũng không hạn chế nhiều. Có điều nếu tổng hết website thì không nên sử dụng thẻ Table.
Master page
- ASP.NET 2.0 giới thiệu Master Page trong Visual Studio 2005, được sử dụng để thiết kế mẫu giao diện chuẩn- sử dụng trình bày nội dung ở nhiều nơi.
- Trong ASP.NET MVC, hỗ trợ hai loại mã là Razor và ASPX
Làm ví dụ:
- Tạo thư mục MasterPages trong thư mục View
- Tiếp theo tạo HomePage.Master trong thư mục MasterPages mới tạo.
Giao diện sẽ như hình
- Tiếp tục, tạo trang dotnetpage.aspx trong thư mục Home thừa kế MASTERPAGE
- Thêm một số code sau vào Master Page
TOP<br />
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
<br />
BOTTOM
- Thay một số code sau trong dotnetpage.aspx
<%@ Page Language="C#" MasterPageFile="~/Views/MasterPages/HomePage.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Welcome to DOTNET GROUP
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
You are learning ASP.NET MVC 4.0
</asp:Content>- Chạy chương trình:
View User Control
- Cho phép người lập trình tạo ra nội dung có thể sử dụng lại trong View Content Page hoặc Master Page
- Để khai báo View User Control thì phải sử dụng Html.RenderPartial
- Vd: Html.RenderPartial("UserControl.ascx")
Làm ví dụ:
- Tạo thư mục UserControls trong thư mục View
- Tạo tệp tin MVC 4 View User Control trong thư mục UserControls với tên là khaosat
- Copy code sau vào trang khaosat.ascx
Bạn có muốn học khóa học tại DOTNET GROUP không?<br />
<%= Html.RadioButton("survey","Rất muốn đăng ký học") %>Rất muốn đăng ký học<br />
<%= Html.RadioButton("survey","Đã đăng ký học") %>Đã đăng ký học<br />
<%= Html.RadioButton("survey","Sẽ đăng ký học") %>Sẽ đăng ký học<br />
<%= Html.RadioButton("survey","Chưa") %>Chưa<br />
<input id="Submit1" type="submit" value="Bình chọn" />
- Trong trang dotnetpage.aspx, chèn đoạn code sau vào vị trí cần hiển thị
<% Html.RenderPartial("~/Views/UserControls/khaosat.ascx"); %>Ở đây nó sẽ hiện nội dung trang khaosat.ascx mà chúng ta đã xây dựng ở trên
Bạn có thể tải Mock Project ở trên về để thực hành. Đã được đính kèm
Bài tiếp theo: Chia sẻ dữ liệu giữa Controllers và Views Components