Bước 1: Lấy Layout từ các trang web chia sẽ layout miễn phí trên mạng, ví dụ https://w3layouts.com/
Trong Project này, chúng ta sẽ download Template này về để thực hành https://w3layouts.com/template/new-store-a-flat-ecommerce-bootstrap-responsive-web-template/
Bước 2: Mở Project, tạo thư mục Layout trong thư mục Views. Trong thư mục Layout tạo 1 Layout Page đặt tên là HomeLayout.cshtml.
View Page: là một trang bình thường khi tạo View.
View page with Layout: là một trang được kế thừa từ một Layout nào đó, có nội dung chúng ta có thể định nghĩa lại.
Bước 3: Chúng ta tiến hành copy lyaout từ template.
- Copy toàn bộ nội dung của thẻ <body> và thẻ <head>.
Bước 4: Tạo 1 HomeController, sau đó tạo một View đặt tên là Index(Index.chtml) cho kế thừa từ Layout vừa tạo kiểm tra kết quả.
Bước 5: Tìm đến phần content(nội dung) cho các trang kế thừa có thể chỉnh sửa, thêm vào cú pháp @RenderBody().
Bước 6:
- Tiến hành copy những thư mục chưa file css và javascript liên quan vào thư mục Content.
- Chỉnh sửa lại đường dẫn đến các file thư mục css, js và hình ảnh.
Không có nhận xét nào:
Đăng nhận xét