Lập trình website với ASP.Net MVC cơ bản

Lập trình website với ASP.Net MVC cơ bản

Tìm hiểu về Layout Page, @RenderBody, @Html.ActionLink và ví dụ minh họa trong ASP.Net Tìm hiểu về Layout Page, @RenderBody, @Html.ActionLink và ví dụ minh họa trong ASP.Net Tìm hiểu về Layout Page, @RenderBody, @Html.ActionLink và ví dụ minh họa trong ASP.Net Tìm hiểu về Layout Page, @RenderBody, @Html.ActionLink và ví dụ minh họa trong ASP.Net Tìm hiểu về Layout Page, @RenderBody, @Html.ActionLink và ví dụ minh họa trong ASP.Net 4.4/5 (27 reviews)

Tìm hiểu về Layout Page, @RenderBody, @Html.ActionLink và ví dụ minh họa trong ASP.Net

Đã đăng 2016-10-16 07:44:58 bởi Trương Tùng Lâm
24 bình luận 19382 lượt xem
Tìm hiểu về Layout Page, @RenderBody, @Html.ActionLink và ví dụ minh họa trong ASP.Net 4.4 /5 stars (6 reviews)
 

Dẫn nhập

Ở bài học trước chúng ta đã tìm hiểu về View, Controller trong ASP.Net MVCcách tạo 1 project ASP.Net MVC đơn giản với ví dụ là xuất câu “Hello Howkteam”. Tuy nhiên trên thực giao diện của 1 website không đơn giản như vậy.

Giao diện bao gồm rất nhiều thứ như màu sắc, bố cục … vậy trong bài học ngày hôm này mình sẽ hướng dẫn các bạn cách thiết kế giao diện cũng như tìm hiểu về 1 đối tượng rất quan trọng trong View đó là Layout Page. Nào! chúng ta cùng đi vào bài học luôn nhé!

Nội dung

Để đọc hiểu bài này tốt nhất các bạn nên có kiến thức cơ bản về các phần:

Trong bài học này, chúng ta sẽ cùng tìm hiểu các vấn đề:

  • Tìm hiều về Layout Page, @RenderBody(), @Html.ActionLink()
  • Ví dụ demo.

Tìm hiểu về Layout Page

Trong một website các bạn sẽ thấy một page lúc nào cũng có đủ các thành phần bao gồm: header, footer, body ... Nếu các bạn để ý sẽ thấy phần header và phần footer của các page thuộc cùng website đều giống nhau.

Tuy nhiên theo cách thiết kế thông thường, cứ mỗi khi tạo ra một page mới chúng ta phải tạo lại phần header, footer. Mà 2 phần này thì nội dung giống nhau ở tất cả các page, do đó sẽ làm mất rất nhiều thời gian cho người thiết kế.

Vì vậy để giải quyết tình trạng trên ASP.Net MVC đã cho ra đời 1 khái niệm là Layout Page, với việc sử dụng Layout Page chúng ta chỉ cần tạo nội dung cho header và footer một lần, nếu một page bất kì muốn sử dụng thì chỉ cần thừa kế từ Layout Page chứa header và footer. Để hiểu rõ hơn thì chúng ta cùng đi qua ví dụ sau nhé!

Đầu tiên các bạn tạo 1 project ASP.Net MVC có tên là MusicStore.

kteam

  • Các bạn chọn File > New > Project

kteam

  • Tại khung Name để tên project là MusicStore, sau đó chọn Browse.. đề chọn nơi lưu trữ project sau đó các bạn nhấn OK.
  • Sau thao tác trên, giao diện dưới hiện ra các bạn chọn MVC rồi nhấn OK tiếp là xong bước tạo project.

kteam

Chúng ta cùng xem thừa kế lại giao diện phần header và footer là sao nhé!

  • Sau khi tạo project thành công, các bạn chạy Project lên, sau đó các bạn lần lượt truy cập vào 2 trang là AboutContact

kteam

  • Các bạn chú ý sẽ thấy 2 trang này có phần footerheader giống nhau

kteam

                                     Giao diện trang About

kteam

                                     Giao diện trang Contact

  • Vì vậy, nếu mà khi tạo trang About hay trang Contact chúng ta tạo lại 2 phần header và footer thì sẽ mất thời gian, vì vậy Layout Page đã giúp chúng ta làm điều đó. Để hiểu rõ cơ chế sử dụng lại như thế nào thì các bạn mở folder View > Shared rồi mở nội dung file _Layout.cshtml lên.

kteam

  •  Phần nội dung nằm trong thẻ sau chính là giao diện của phần header

<div class="navbar navbar-inverse navbar-fixed-top">…</div>

kteam

  • Còn phần nội dung nằm trong thẻ <footer></footer> chính là nội dung của phần footer

kteam

Vậy hai trang About Contact là hai page khác biệt sẽ sử dụng chung hai phần footer và header trong _Layout.cshtml. Khi các page được tạo ra mà có sử dụng footer và header giống nhau thì _Layout.cshtml sẽ cung cấp cho các page đó.

Cách làm như thế nào thì tí nữa mình sẽ đi vào ví dụ cụ thể nhé!

Tìm hiểu @RenderBody()

 Trong _Layout.cshtml các bạn sẽ thấy 1 thuộc tính đó là @RenderBody().

kteam

Tuy hai trang About Contact có header và footer giống nhau, nhưng nội dung của hai trang này lại hoàn toàn khác nhau, vì vậy Layout Page cung cấp cho chúng ta 1 thuộc tính @RenderBody(),

Với thuộc tính này khi các bạn muốn hiển thị View nào lên thì @RenderBody() sẽ trả về nội dung đúng với View đó, tức là chúng ta muốn hiển thị trang About lên thì @RenderBody() sẽ trả về nội dung đúng với trang About và tương tự đối với trang Contact

kteam

 Nội dung trang About

kteam

Nội dung trang Contact

Qua hai kết quả trên thì @RenderBody() đã giúp cho hai trang About Contact trả về nội dung mong muốn của các page.

Tìm hiểu về @Html.ActionLink

Các bạn thấy trong _Layout.cshtml có 1 phương thức @Html.ActionLink, phương thức này là một trong các phương thức thuộc HTML Helper trong ASP.Net MVC.

Trong phạm vi bài này mình chỉ giới thiệu @Html.ActionLink còn các phương thức còn lại trong HTML Helper thì khi nào gặp cái nào, mình sẽ giới thiệu cái đó.

@Html.ActionLink là cách chúng ta tạo kết tới action trong 1 controller bất kì và thực thi action đó. Cụ thể như sau:

kteam

  • Khi các bạn click vào About thì kết quả trả về là 1 trang hiện thị nội dung của Page About. Vậy có bạn nào đang thắc mắc là tại sao khi click vào chữ About nó lại chuyển qua trang About không? Sau đây mình sẽ giải thích lý do nhé.

kteam

  • Khi các bạn click vào chữ About, thì action About của controller Home sẽ được thực thi thông qua phương thức @Html.ActionLink. Mà action About trong controller Home lại trả về View() About.

kteam

  • Qua đó chúng ta đã có thể trả lời được lý do tại sao khi click vào About là sẽ có 1 giao diện trang About hiển thị lên.
  • Khi chúng ta thực thi phương thức @Html.ActionLink thì các bạn lưu ý phải truyền đủ 3 tham số cho phương thức nhé.

kteam

Mình sẽ lấy ví dụ của About:

  • Tham số thứ nhất: About chính là tên hiển thị trên page
  • Tham số thứ 2: About chính là tên của action mà mình muốn thực thi
  • Tham số thứ 3: Home chình là controller chứa action ở mà tham số thứ 2 chúng ta khai báo

Ví dụ demo

Phần đầu mình đã cùng các bạn tìm hiều về Layout Page, trong nội dung này chúng ta sẽ cùng nhau đi làm ví dụ về Layout Page nhé! Qua ví dụ này, các bạn sẽ sẽ hiểu rõ cách áp dụng Layout Page vào cho từng View hiển thị, biết cách nhúng CSS bên ngoài vào trong giao diện.

Ở phần trên chúng ta đã tạo thành công 1 project có có tên là MusicStore. Để tạo demo cho riêng mình thì các bạn nên xóa 1 vài thư mục có sẵn trong Project.

kteam

  • Đầu tiên, các bạn xóa cho mình folder Home trong Views

Sau đó các bạn xóa tiếp cho mình folder _Layout.cshtml trong thư mục Shared

kteam

Lý do mà mình nói các bạn xóa đi là vì chúng ta sẽ tạo ra Layout Page theo ý của chúng ta, kể cả các trang thừa kề từ Layout Page thì mình cũng muốn làm khác đi theo cách riêng của mình.

Để tạo mới 1 Layout Page thì chúng ta vào folder Shared trong phần Views, sau đó các bạn làm theo như mô tả hình dưới đây.

kteam

  • Các bạn click phải chuột vào folder Shared > Add > MVC 5 Layout Page (Razor)

kteam

  • Kết thúc bước chọn MVC 5 Layout Page (Razor) sẽ có 1 giao diện hiển thị như hình trên, ngay tại ô Item name các bạn thay đổi tên thành _Layout nhé rồi nhấn OK để kết thúc.

Sau khi tạo xong được Layout Page thì chúng ta chưa tạo giao diện cho Layout Page vội, mà các bạn cần chuẩn bị cho mình 1 số file cần thiết như sau:

kteam

Download file MvcMusicStore-Assets.zip thành công, các bạn giải nén file đó ra. Trong file giải nén các bạn sẽ thấy có 3 folder và 1 file txt thì các bạn truy cập vào folder có tên là Content cho mình nhé.

kteam

Lý do mà mình nói các bạn download file nén này về là vì chúng ta sẽ không sử dụng giao diện mặc định của ASP.Net MVC nữa mà chúng ta sẽ sử dụng 1 giao diện có sẵn khác với CSS riêng.

Sau khi truy cập vào folder Content các bạn copy tất các thư mục trong đó và bỏ vào thư mục Content trong project MusicStore của mình nhé.

kteam

  • Khi bạn Paste vào thư mục Content trong project thì sẽ có 1 bảng hội thoại xuất hiện lên như sau:

kteam

  • Thông báo của bảng hội thoại này là bạn có muốn ghi đè file có tên Site.css đã có sẵn trong thực mục Content không? Thì các bạn chọn Yes cho mình nhé.

Vậy là các bạn đã chuẩn bị xong các tài nguyên cần thiết, bây giờ chúng ta bắt đầu vào sử dụng nó nhé.

  • Trước tiên các bạn cần tạo lại cho mình tầng View cho Action Index thuộc Controller Home

kteam

  • Sau đó các bạn nhấp phải chuột tại Index > chọn Add View

kteam

  • Các bạn làm theo thứ tự mà mình đánh số nhé

kteam

Sau khi nhấn OK thì các bạn chọn Add. Tại trang Index vừa tạo, các bạn chuyển chữ Index trong thẻ <h2> thành This is my home page  nhé!

kteam

  • Vậy là các bạn đã tạo thành công View cho Action Index rồi, bây giờ các bạn quay trở lại thư mục _Layout.cshtml và chỉnh sửa 1 vài cái nhé.
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>

    <link href="/redirect?Id=LnRQ7pJ8KNXxXrMnBPvG1g%3d%3d"~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" 
            type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")"
           type="text/javascript"></script>
</head>
<body>
    <div>

        <div id="header">
            <h1>
                ASP.NET MVC MUSIC STORE
            </h1>
            <ul id="navlist">
                <li class="first"><a href="/redirect?Id=Q%2fqjAzdLo8VFFKeFdWbiAA%3d%3d" id="current">Home</a></li>
                <li><a href="/redirect?Id=0htwlDSmnekWTM6XP0g0Qg%3d%3d">Store</a></li>
            </ul>
        </div>

        @RenderBody()
    </div>
</body>
</html>

Trong đoạn code trên, các bạn copy những phần sau vào trong bài của các bạn. Phần này nằm trong thẻ <head></head>.

    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"

            type="text/javascript"></script>

    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")"

           type="text/javascript"></script>

        <div id="header">

            <h1>

                ASP.NET MVC MUSIC STORE

            </h1>

            <ul id="navlist">

                <li class="first"><a href="/" id="current">Home</a></li>

                <li><a href="/Store/">Store</a></li>

            </ul>

        </div>

Từ khóa @Url.Content dùng để trỏ tới các thư mục css hoặc js hay bất kì file nào mà chúng ta muốn sử dụng. Phía trên mình có nói các bạn copy file Images Site.css vào trong thư mục Content, để có thể sử dụng Site.css bạn chỉ cần viết theo cú pháp trong khung đỏ như hình dưới.
Cũng như vậy,
khung màu xanh các bạn cũng làm tương tự để chúng ta có thể sử dụng các file js (chú ý: file js ở đây là được cung cấp sẵn).

kteam

  • File css: giúp chúng ta phối màu, tạo hoa văn cũng như làm cho website thêm sinh động.
  • File js: giúp chúng ta tạo ra các hiệu cho website như tạo slider … nói chung các hiệu ứng động trong website.

Cuối cùng các bạn chạy project mình lên để kiểm tra sự thay đổi nhé

kteam

Sau khi chạy project, nếu bạn nào có màn hình chạy lên giống màn hình sau thì coi như các bạn đã hoàn thành bài hướng dẫn.

kteam

Nhìn vào kết quả đạt được, các bạn thấy sự khác biệt giữa file mặc định và file mà chúng ta tạo ra rồi nhé.

Kết luận

Qua bài học ngày hôm này, mình đã giúp các bạn hiểu rõ về LayoutPage, RenderBody, Html.ActionLink cũng như cách các bạn sử dụng giao diện bên ngoài.

Bài sau chúng ta sẽ đi vào Tìm hiểu về PartialView, Model trong MVC, tham số và cách truyền tham số tới View sử dụng Model

Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận hoặc góp ý của mình để phát triển bài viết tốt hơn. Đừng quên “Luyện tập – Thử thách – Không ngại khó”.

Chia sẻ:
Thảo luận Hỏi và đáp Báo lỗi bài viết
Hủy bỏ   hoặc  
Tìm hiểu về Layout Page, @RenderBody, @Html.ActionLink và ví dụ minh họa trong ASP.Net
Kter 2018-10-23 10:37:22

Khá là hay!

 

 
0 bình chọn
Reply
Tìm hiểu về Layout Page, @RenderBody, @Html.ActionLink và ví dụ minh họa trong ASP.Net
QuangNguyễn 2018-10-18 21:46:19

Tiếp đi ad ới

0 bình chọn
Reply
Tìm hiểu về Layout Page, @RenderBody, @Html.ActionLink và ví dụ minh họa trong ASP.Net
phutungototoanquoc 2018-05-30 18:48:34

Anh ơi sao không ra tiếp video nữa hả anh ơi! anh ra video mới cho bọn học tiếp đi ạ

dầu nhớt idemitsu

0 bình chọn
Reply
Tìm hiểu về Layout Page, @RenderBody, @Html.ActionLink và ví dụ minh họa trong ASP.Net
trần nhựt anh 2018-01-23 12:34:53

ad ỏi cho em hỏi: Sao mà lúc em build lên Coccoc thì nó báo lổi này lên. 

Bị gì vậy Ad. Em dùng visual 2017

Server Error in '/' Application.


The resource cannot be found.

Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable.  Please review the following URL and make sure that it is spelled correctly. 

Requested URL: /
 


Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.7.2556.0

0 bình chọn
Reply
Tìm hiểu về Layout Page, @RenderBody, @Html.ActionLink và ví dụ minh họa trong ASP.Net
Tiến Dũng 2018-01-13 21:07:50

Bạn nên sau mỗi bài thì thêm phần bài tập luyện thêm thì nó sẽ hiệu quả hơn

0 bình chọn
Reply
Tìm hiểu về Layout Page, @RenderBody, @Html.ActionLink và ví dụ minh họa trong ASP.Net
south.32.1995 2018-01-05 14:46:35

khi nào có bài moi vay Kteam

1 bình chọn
Reply
Tìm hiểu về Layout Page, @RenderBody, @Html.ActionLink và ví dụ minh họa trong ASP.Net
Duy Thành 2017-12-22 10:41:36

Like luôn

 

0 bình chọn
Reply
Tìm hiểu về Layout Page, @RenderBody, @Html.ActionLink và ví dụ minh họa trong ASP.Net
gentobi 2017-12-11 22:44:53

Khi nào mới ra phần tiếp theo vậy Kteam ?

1 bình chọn
Reply
Tìm hiểu về Layout Page, @RenderBody, @Html.ActionLink và ví dụ minh họa trong ASP.Net
Đỗ Trí Nhân 2017-12-10 09:14:52

Không biết các bước em làm có gì sai không nhưng khi em sử dụng ActionLink thì nó có trả về 1 trang nhưng lại bị mất layout hết ạ

0 bình chọn
Reply
Tìm hiểu về Layout Page, @RenderBody, @Html.ActionLink và ví dụ minh họa trong ASP.Net
Tín Trần 2017-09-08 14:45:26

Anh tiếp tục làm những video Asp.net MVC nữa đi ạ

0 bình chọn
Reply
Tìm hiểu về Layout Page, @RenderBody, @Html.ActionLink và ví dụ minh họa trong ASP.Net
cuboy 2017-09-08 09:30:20

Thêm video đi a ơi!! bài rất dễ hiểu và thú vị ạ

0 bình chọn
Reply
Tìm hiểu về Layout Page, @RenderBody, @Html.ActionLink và ví dụ minh họa trong ASP.Net
xuantiep2310 2017-08-10 10:38:03

a ra video mới đi a :(

 

0 bình chọn
Reply
Tìm hiểu về Layout Page, @RenderBody, @Html.ActionLink và ví dụ minh họa trong ASP.Net
dthuc 2017-02-20 18:34:35
khi nào có next lesson mới ạ ???
1 bình chọn
Reply
Tìm hiểu về Layout Page, @RenderBody, @Html.ActionLink và ví dụ minh họa trong ASP.Net
ngdminh93 2016-12-25 20:43:17
khi nào có cờ nhíp mới ạ?
0 bình chọn
Reply
View all 3 comments
Kteam - Howkteam Free Education
K9 2016-12-25 21:12:57
CTV mới học xong. tháng 1 mới quay lại làm được nhé bạn
0 bình chọn
Reply
Kteam - Howkteam Free Education
ngdminh93 2016-12-25 21:21:52
Cám ơn a nhé, muốn donate cho HowKTeam mà nghèo quá, e donate cạc đt đc ko ạ T.T
0 bình chọn
Reply
Kteam - Howkteam Free Education
Kteam 2016-12-25 22:33:57
Được e, vào trang donate có đó e. Card bao nhiêu thì tùy lòng hảo tâm của e. :)
0 bình chọn
Reply
Tìm hiểu về Layout Page, @RenderBody, @Html.ActionLink và ví dụ minh họa trong ASP.Net
Thuan 2016-12-21 07:16:24
Bài hướng dẫn chi tiết và dễ hiểu. Mong sớm ra thêm nhiều nữa. Cảm ơn HowKteam.
0 bình chọn
Reply
Tìm hiểu về Layout Page, @RenderBody, @Html.ActionLink và ví dụ minh họa trong ASP.Net
Kter 2016-12-15 16:05:04
chả hiểu sao không copy từ web được :-?
0 bình chọn
Reply
Tìm hiểu về Layout Page, @RenderBody, @Html.ActionLink và ví dụ minh họa trong ASP.Net
quachhoainam1996 2016-11-10 21:24:35
khi nào có clip mới vậy anh
0 bình chọn
Reply
View all 1 comments
Kteam - Howkteam Free Education
K9 2016-11-10 23:20:45
có vẻ sẽ ra chậm. a đang tìm CTV mới để viết tiếp serial này
0 bình chọn
Reply
Tìm hiểu về Layout Page, @RenderBody, @Html.ActionLink và ví dụ minh họa trong ASP.Net
phanminhhan 2016-10-27 14:09:45
Mình làm đươc rồi kaka
1 bình chọn
Reply
View all 2 comments
Kteam - Howkteam Free Education
Kteam 2016-11-17 16:23:34
Đừng quên Luyện tập - Thử thách - Không ngại khó!
0 bình chọn
Reply
Kteam - Howkteam Free Education
Kteam 2016-11-17 16:27:41
Đừng quên "Luyện tập - Thử Thách - Không ngại khó"
0 bình chọn
Reply
Hủy bỏ   hoặc  
Hủy bỏ   hoặc  

Chiến dịch

Kteam - Howkteam Free Education