Aspx.net / MVC — August 5, 2016 at 2:10 am

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

by

Sau khi đã hoàn thành xong 2 phần hôm trước học hôm nay chính là bước hoàn thành tất cả để tạo nên cấu tạo hoàn thiện layout. Qua bài viết dưới đây sẽ giúp bạn tổng kết layout cũng như rút ra được kinh nghiệm khi thiết kế web khi có một mã nguồn hoàn chỉnh chúc các bạn thành công nhé!

Tổng kết về layout và mã nguồn hoàn chỉnh

1. Tổng kết :

– Chúng tôi đã hướng dân từng bước và giải thích rất cặn kẽ về CSS để định dạng Layout cho các bạn mới bắt đầu lập đầu trình web hay mới chuyển sang lập trình Asp.net MVC mà chưa có nhiều kinh nghiệm về cắt CSS và HTML

– Các bạn cần chú ý tới 2 kỹ thuật sử dụng RenderPartial sinh mã html trong mvc và tạo các lớp CSS sử dụng chúng trong các file html của Project hiện tại và kế thừa trong các Project khác .Đây có thể là các đơn giản nhất để các bạn có thể quản lý mã CSS , layout khi cần phát triển và bảo  trì giao diện

– Dĩ nhiên các kỹ thuật có thể vẫn chưa tối ưu , những sẽ hữu ích với các bạn mới học về cách quản lý và phát triển ứng dụng .Đồng thời kích thích khả năng phát triển các kỹ thuật để phát triển web được đơn giản hơn .

– Đồng thời các bạn thấy được tầm quan trọng của kỹ thuật lập trình , tối ưu mã nguồn sẽ tốt hơn thế nào nếu chúng ta code theo cách thông thường

image9

– Các bạn cũng có thể thấy việc thiết kế giao diện trong MVC cũng tương tự như xây dựng mã HTML thông thường , điều mã trước đó asp.net webform không làm được .Tuy nhiên đây cũng là một vướng mắc đối với các bạn lập trình webform quen với kéo thả khi chuyển sang lập trình MVC .

– Một điều mà các bạn lập trình webform mắc phải đó là đỡ tốn thời gian học html , css do chú yếu là kéo thả và để VS tự động sinh mã aspx, mã aspx lại không giống mã html lắm.Tuy nhiên khi phát triên các ứng dụng đòi hỏi giao diện phức tạp , hoặc tương tác người dùng cao ( dùng javascript ) thì cần học thêm rất nhiều về aspx .

– Còn với lập trình MVC các bạn có thể phải học nhiều hơn ( html , css , jQuery ( javascript)) để xây dựng 1 ứng dụng nhỏ .Tuy nhiên với các ứng dụng lớn cũng phát triển hoàn toàn tương tự .

2. Mã nguồn Layout và Html hoàn chỉnh

Layout :

<!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 class=”mainMenu”>@Html.Partial(“MenuPartial”)</nav>

</header>

<div class=”body”>

<article class=”inline-block main”>

@RenderBody()

</article>

<aside class=”inline-block sidebar”>

@Html.Partial(“SidebarPartial”)

</aside>

</div>

<footer>

@Html.Partial(“FooterPartial”)

</footer>

@RenderSection(“scripts”, required: false)

</body>

</html>

LayoutStyle.css

 

/*#region Layout */

 

/*body chứa phần nội dung*/

body {

margin: 0 auto;

width: 98%;

min-width: 960px;

background: #e2e2e2;

}

 

.body {

background: #fff;

}

/*Dùng Inline-Block cần chỉ định rõ width cụ thể các đối tượng*/

.main {

margin: 10px;

width: 74%;

}

 

.sidebar {

margin-top: 10px;

width: 23%;

}

/*#endregion */

BasicStyle.css

.inline-block {

display: inline-block;

vertical-align: top;

}

SiteStyle.css

.mainMenu {

background: #4f86f8;

border-radius: 10px;

padding: 10px;

}

 

.mainMenu a {

font-size: 16px;

color: #FFFFFF;

font-weight: bold;

padding: 10px;

border-right: 1px solid #fff;

}

Nguồn: laptrinhvien.net

Leave a Comment

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