Lab01 XayDungLayout

Lab 01: DỰNG LAYOUT TRANG CHỦ WEBSITE SACHONLINE
A. MỤC TIÊU
- Dựng Layout ở chế độ người dùng.
- Thiết kế các PartialView cho layout: Phần điều hướng (Navbar), Slider, Danh sách
chủ đề, Danh mục Nhà xuất bản.
B. CÔNG TÁC CHUẨN BỊ
- Thư viện Bootstrap.
- Nguồn cho website (Hình ảnh, CSDL)
C. NỘI DUNG:
1. Tạo 1 Project website asp.net MVC:
- Tạo project với tên: SachOnline
- Tạo trong project này thư mục Images và chép toàn bộ hình ảnh trong thư mục
images dán vào thư mục này
1
2. Tạo LayoutUser (giao diện người dùng)
- Từ thư mục Shared (trong thư mục Views)  Phải chuột  Add  Layout 
MVC 5 Layout Page (Razor)
- Đặt tên cho Layout là _LayoutUser
2
- Từ file Layout.html cho sẵn:
Chép thẻ <meta> và thay thế thẻ meta trong _LayoutUser
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
Chèn thư viện bootstrap vào Layout:

C1: Định nghĩa gói tài nguyên trong file BundleConfig.CS
Chèn vào layout:
C2: Chèn trực tiếp bằng thẻ:

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
Thêm định dạng css vào phần head:

<style type="text/css">
.imgbook{
transition:all 1s ease-in;
width:400px;
}
.imgbook:hover{ transform:scal
e(0.9); cursor:pointer;
}
.imgsachbannhieu{ width:100px
;
}
</style>
Chép toàn bộ code phần <body></body> vào trang _LayoutUser

Xóa nội dung phần sách mới (nội dung trong thẻ: <div class="col-lg-9 col-md-9 col-sm-
3
9 col-xs-12">) rồi thêm vào lệnh @RenderBody() trong thẻ này:
3. Tạo Controller điều khiển trang chủ

- Từ thư mục controller  Add controller (SachOnlineController)
- Code trong controller:
4. Tạo View Index.cshtml sử dụng layout _LayoutUser

- Phải chuột vào ActionResult Index (trong SachOnlineController)  Chọn Add
View
- Chọn layout (_LayoutUser) cho view
4
- Chép toàn bộ code trong phần <div class="col-lg-9 col-md-9 col-sm-9 col-xs-
12"> ở layout.html và dán vào thay thế thẻ h2 của view Index
<h2 class="text-center">SÁCH MỚI</h2>

<hr>
<div class="row text-center">
<div class="col-sm-4 col-md-4 col-lg-4 col-xs-6">
<div class="thumbnail"> <img src="Images/130499.jpg" alt="Thumbnail Image 1"
class="img-responsive img-rounded imgbook ">
<div class="caption">
<h3>Sản phẩm</h3>
<p>Mô tả tóm tắt sản phẩm</p>
<p><a href="#" class="btn btn-warning" role="button"><span class="glyphicon
glyphicon-shopping-cart" aria-hidden="true"></span> Add to Cart</a></p>
</div>
</div>
</div>
<div class="thumbnail"> <img src="Images/130318.jpg" alt="Thumbnail Image 1"
class="img-responsive img-rounded imgbook">
<h3>Sản phẩm </h3>
<p><a href="#" class="btn btn-danger" role="button"><span class="glyphicon
glyphicon-shopping-cart" aria-hidden="true"></span> Add to Cart</a> </p>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-4 col-xs-6 hidden-xs">
<div class="thumbnail"> <img src="Images/KT0001.jpg" alt="Thumbnail Image 1"
5
<p><a href="#" class="btn btn-primary" role="button"><span class="glyphicon
</div>
</div>
</div>

</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-4 col-xs-6 hidden-xs">
</div>
</div>
</div>
</div>
<nav class="text-center">

<ul class="pagination">
<li> <a href="#" aria-label="Previous"> <span aria-
hidden="true">«</span> </a> </li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li class="disabled"><a href="#">5</a></li>
<li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span>
</a> </li>
</ul>
6
</nav>
- Chạy view Index.cshtml và xem kết quả:
- Sửa lại đường dẫn cho hình: Sửa lại đường dẫn cho hình từ Images/ thành
src="~/Images/ ở _LayoutUser và view Index
- Chạy lại view để xem kết quả:
7
8
5. Tạo các Partial View (NavPartial, SliderPartial, ChuDePartial,
NhaXuatBanPartial, SachBanNhieuPartial, FooterPartial)
- Trong SachOnlineController bổ sung Action sau:
/// <summary>
/// GetChuDe
/// </summary>
/// <returns>ReturnChuDe</returns>
public ActionResult ChuDePartial()
{
return PartialView();
}
- Tạo View Chude dạng Partial View: Click phải vào Action chọn Add/View
- Đặt tên View và chọn Create as a parial view
- Code cho View ChudePartial: Chép phần code sau từ trang _LayoutUser vào view:
<ul class="list-group">
<li class="list-group-item active" style="font-weight:bold; text-
align:center">SÁCH THEO CHỦ ĐỀ</li>
<a href="#" class="list-group-item">Ngoại ngữ</a>
<a href="#" class="list-group-item">Công nghệ thông tin</a>
<a href="#" class="list-group-item">Luật</a>
9
<a href="#" class="list-group-item">Văn học</a>
<a href="#" class="list-group-item">Khoa học kỹ thuật</a>
<a href="#" class="list-group-item">Nông nghiệp</a>
<a href="#" class="list-group-item">Lịch sử, địa lý</a>
<a href="#" class="list-group-item">Kinh tế</a>
<a href="#" class="list-group-item">Nghệ thuật sống</a>
</ul>
- Liên kết partial View Chude vào _LayoutUser, tạo hàng code sau và thay thấy phần
code đã chép ở trên trong _LayoutUser:
@Html.Action("ChuDePartial", "SachOnline")
Lưu ý: Phần SachBanNhieuPartial sẽ chỉ cho hiển thị trên trang chủ (View Index), các
trang còn lại không hiển thị nên khi họi partial này sẽ thực hiện như sau:
Tại layout:
@RenderSection("SachBanNhieu", required: false)
Tại view Index:

@section SachBanNhieu{
@Html.Action("SachBanNhieuPartial", "SachOnline")
}
- Kết quả phần Sách theo chủ đề đã hiển thị ở trang Index:
Thực hiện tương tự để tạo các PartialView còn lại.
Hết
10

Lab01 XayDungLayout

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lab01 XayDungLayout

Uploaded by

Copyright:

Available Formats

Lab 01: DỰNG LAYOUT TRANG CHỦ WEBSITE SACHONLINE

- Đặt tên cho Layout là _LayoutUser

Chèn thư viện bootstrap vào Layout:

Chèn vào layout:

C2: Chèn trực tiếp bằng thẻ:

Thêm định dạng css vào phần head:

Chép toàn bộ code phần <body></body> vào trang _LayoutUser

3. Tạo Controller điều khiển trang chủ

- Code trong controller:

4. Tạo View Index.cshtml sử dụng layout _LayoutUser

- Chọn layout (_LayoutUser) cho view

<h2 class="text-center">SÁCH MỚI</h2>

<div class="col-sm-4 col-md-4 col-lg-4 col-xs-6">

- Chạy view Index.cshtml và xem kết quả:

- Đặt tên View và chọn Create as a parial view

Tại view Index:

Thực hiện tương tự để tạo các PartialView còn lại.

You might also like