Aspx.net / MVC — August 5, 2016 at 1:44 am

Hướng dẫn xây dựng web bán hàng bằng MVC- Chương 3 Bố cục layout (p1)

by

Như các bạn đã biết đối với việc lập trình, người lập trình viên phải biết bố cục layout vì chúng có thể làm người nhìn cảm thấy hấp dẫn hơn. Trong web cũng vậy những layout sẽ giúp tốt hơn về sự phân bố trang web cũng như tạo cái nhìn thân thiện hơn cho người nhìn và người xem. Do việc phân bố layout hơi khó học nên chúng tôi đã chia thành 3 phần chính để bạn có thể học tốt hơn về layout cùng tham khảo phần đầu tiên nhé!

1 Giới thiệu về layout

– Chúng ta thiết kế layout để có được giao diện như hình sau :

– Chúng ta cần có các kiến thức về HTML , CSS để định dạng Layout

– Trong các tài liệu về HTML , CSS của chúng tôi , chúng tôi đã hướng dẫn chi tiết cách bố cục layout .

– Trong tài liệu này chúng ta bố cục layout dùng các thẻ HTML 5 có giao diện như hình sau :

image-1

2 Khảo sát mã Layout VS tự động tạo ra

– Trang Index của ProductController có kế thừa từ 1 trang layout mẫu mà VS tạo sẵn trong thư mục :

View/Shared/_Layout.cshtml

Code file _Layout như sau :

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″ />

<meta name=”viewport” content=”width=device-width” />

<title>@ViewBag.Title</title>

@Styles.Render(“~/Content/css”)

@Scripts.Render(“~/bundles/modernizr”)

</head>

<body>

@RenderBody()

@Scripts.Render(“~/bundles/jquery”)

@RenderSection(“scripts”, required: false)

</body>

</html>

– Trong 1 ứng dụng lớn chúng ta thường tạo một vài file layout khác nhau phục vụ các yêu cầu về giao diện khác nhau .

– Với File layout mẫu tạo ra có một vài tính năng và thư viện của MVC ( không phải thuần html ) như là :

Khai báo các thư viện :

+) Thư viện khai báo file CSS , và script fix html5 – css3

@Styles.Render(“~/Content/css”)

@Scripts.Render(“~/bundles/modernizr”)

+) thư viện jQuery :

@Scripts.Render(“~/bundles/jquery”)

– Các thư viện này được dùng tình năng bundled của MVC4 để zip các file css , .js và được khai báo trong file App_Start/BundleConfig.cs như sau :

bundles.Add(new ScriptBundle(“~/bundles/jquery”).Include(

“~/Scripts/jquery-{version}.js”));

 

bundles.Add(new ScriptBundle(“~/bundles/jqueryval”).Include(

“~/Scripts/jquery.unobtrusive*”,

“~/Scripts/jquery.validate*”));

 

bundles.Add(new ScriptBundle(“~/bundles/modernizr”).Include(

“~/Scripts/modernizr-*”));

– Các file script có đường dẫn vật lý được lưu trong thư mục : Scripts

– Các file css được luu trong thư mục Content

– Ta có thể khai báo trực tiếp các file này như trong MVC 3 như sau :

<link href=”~/Content/Site.css” rel=”stylesheet” />

<script src=”~/Scripts/jquery-1.7.1.js”></script>

Khai báo kế thừa nội dung :

– Khai báo mã Script cho các trang kế thừa , chúng ta dùng tính năng RenderSection của MVC .Các bạn có thể tìm hiểu tính năng này của MVC trong tài liệu về lập trình MVC của chúng tôi .Mã khai báo như sau :

@RenderSection(“scripts”, required: false)

– Khai báo nội dung cho các trang khác kế thừa bằng mã :

@RenderBody()

– Điều này có nghĩa là nội dung các trang kế thừa sẽ thay thế vị trí đặt  @RenderBody()

3 Xây dựng Layout HTML

image-2

– Phần tiêu đề đầu trang , cuối trang thường ghi thông tin về website , logo , thông tin liên hệ …Các thông tin này có thể được lấy từ CSDL .

– Website của chúng ta không xây dựng chức năng đăng nhập cho người dùng ( chỉ đăng nhập cho admin ) .Trường hợp đăng nhập cho người dùng thì nội dung đăng nhập cũng trong phần header

– Để tạo giao diện như hình , ta xây dựng mã html như sau :

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″ />

<meta name=”viewport” content=”width=device-width” />

<title>@ViewBag.Title</title>

@Styles.Render(“~/Content/css”)

@Scripts.Render(“~/bundles/modernizr”)

@Scripts.Render(“~/bundles/jquery”)

</head>

<body>

<header>

<div>Tiêu đề website</div>

<nav>Menu website</nav>

</header>

<div>

<article>

@RenderBody()

</article>

<aside>

@*Sản phẩm nổi bật*@

</aside>

</div>

<footer>

Chân trang website

</footer>

@RenderSection(“scripts”, required: false)

</body>

</html>

// ta không quan tâm tới các khai báo thư viện và Section :

@Scripts.Render(“~/bundles/jquery”)

@RenderSection(“scripts”, required: false)

Mà chỉ quan tâm tới mã html

Chạy lại ứng dụng ta được kết quả như hình sau

image-3

– Chúng ta chưa định dạng CSS ( do chưa đủ nội dung) nên giao diện chưa được như hình vẽ

– Các nội dung về tiêu đề , chân trang , menu , tin nổi bật thường nhiều , có trường hợp lấy nội dung dưới CSDL nên để đơn giản code .Chúng ta sẽ gọi các nội dung này từ các PartialView .Các PartialView này được dùng nhiều trong các Project khác nhau , nên chúng ta dễ dàng sao chép vào dùng lại .Đây cũng là 1 kỹ thuật mà các bạn nên dùng để code layout trở nên đơn giản dễ đọc và có tính kế thừa cao

Tạo HeaderPartial ( tiêu đề website) :

Tạo 1 PartialView để trong thư mục Shared như hình sau :

image-4

Đặt tên và các thông số như hình sau:

image-5

Code file HeaderPartial.cshtml như sau :

 

@* Có thể thêm logo là 1 file ảnh hay flash tại đây *@

<div style=”font-size:30px; font-weight:bold; margin:10px;”>Tiêu đề website</div>

– Chúng tôi định dạng CSS luôn cho tiêu đề ( vì các định dạng này không dùng định dạng ở đâu nữa )

Tương tự ta tạo các PartialView : FooterPartial ( chân trang website) , MenuPartial ( menu website), tin nổi bật ( SidebarPartial)

Code FooterPartial :

<pre style=”font-family:Arial; font-size:16px; font-weight:bold;”>

Công ty phần mềm và giải pháp đo lường VinaDevelop

Địa chỉ : 112/129 Trương Định – Hà Nội

Điện thoại : 0985359218

Email : billsangvn@gmail.com

</pre>

– Ở đây ta dùng thẻ <pre> của html để nội dung được xuống dòng như trong code .Các bạn có thể ghi bất kỳ nội dung nào ở đây .

Code MenuPartial

<a href=”@Url.Action(“Index”,”Product”)”>Trang Chủ</a>

<a href=”#”>Giới Thiệu</a>

<a href=”#”>Tin Tức</a>

<a href=”#”>Liên Hệ</a>

– Ở đây tạm thời ta dùng menu tĩnh ( có sẵn ) để định dạng layout , đối với headerPartial , FooterPartial,MenuPartial , SidebarPartial đều có thể lấy nội dung động từ CSDL.Chúng ta sẽ trở lại việc xây dựng menu động load từ CSDL tại phần lập trình CSDL

Code SidebarPartial

<div class=”header1″>

Sản Phẩm Nổi Bật

</div>

<ul>

<li><a href=”#”>Sản Phẩm Nổi bật 1</a></li>

<li><a href=”#”>Sản Phẩm Nổi bật 2 </a></li>

<li><a href=”#”>Sản Phẩm Nổi bật 3</a></li>

<li><a href=”#”>Sản Phẩm Nổi bật 4</a></li>

<li><a href=”#”>Sản Phẩm Nổi bật 5</a></li>

<li><a href=”#”>Sản Phẩm Nổi bật 6 </a></li>

<li><a href=”#”>Sản Phẩm Nổi bật 7</a></li>

<li><a href=”#”>Sản Phẩm Nổi bật 8</a></li>

</ul>

– Trường hợp xây dựng menu đa cấp cũng rất đơn giản và chúng tôi sẽ giới thiệu riêng .Vì nó là kiến thức về html , CSS .Cái mấu chốt là chúng ta hiểu được cách thức bố cục ứng dụng .Sau đó tận dụng các kỹ thuật riêng lẻ lại để đặt vào những vị trí của ứng dụng .

Gọi các PartialView trong Layout :

Chỉnh lại mã Layout như sau :

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″ />

<meta name=”viewport” content=”width=device-width” />

<title>@ViewBag.Title</title>

@Styles.Render(“~/Content/css”)

@Scripts.Render(“~/bundles/modernizr”)

@Scripts.Render(“~/bundles/jquery”)

</head>

<body>

<header>

<div>@Html.Partial(“HeaderPartial”)</div>

<nav>@Html.Partial(“MenuPartial”)</nav>

</header>

<div>

<article>

@RenderBody()

</article>

<aside>

@Html.Partial(“SidebarPartial”)

</aside>

</div>

<footer>

@Html.Partial(“FooterPartial”)

</footer>

@RenderSection(“scripts”, required: false)

</body>

</html>

Chạy lại ứng dụng ( hoặc refresh lại trình duyệt ) ta được kết quả như hình sau :

image-6

– Ta thấy code Layout đã rất gọn gàng và dễ đọc , mối lần muốn thay đổi nội dung , mã nguồn của layout ta chỉ cần vào các mục tương ứng ( header , footer , menu sidebar) để hiệu chỉnh code .Ngoài ra các PartialView này còn có thể được kế thừa trong các Projeect khác .

– Các bạn cần đặc biệt chú ý kỹ thuật này

Nguồn: laptrinhvien.net

Leave a Comment

Your email address will not be published. Required fields are marked *