ASP.NET MVC tutorials (part 1)

Trong phần đầu tiên này, mình sẽ bắt đầu bằng việc tạo project, giải thích một số "khái niệm" và layout cơ bản cho phần menu. Sẽ đơn giản thôi, có clip full HD không che kèm theo, tuy nhiên do không có nhiều "kinh nghiệm quay phát" nên mong các bạn thông cảm.

Tạo project

Phần dễ dàng nhất trong mọi project =]. Ở đây mình sẽ tạo project ASP.NET MVC 5.
Việc đầu tiên khi tạo xong project - cập nhật jquery và bootstrap lên phiên bản mới nhất. Điều này dễ dàng thực hiện bằng cách sử dụng Nuget Package Manager Console.

Mặc định khi update sẽ cài đặt phiên bản mới nhất, ở đây mình chỉ muốn jquery cập nhật phiên bản 1x.

Thêm tham số -version [version number] để update đúng version mong muốn.

Layout

Trong (ASP.NET) MVC, phần nội dung sẽ được thay thế vào Helper @RenderBody(), phần còn lại giống nhau cho tất cả các trang (mặc định nếu sử dụng chung layout). Đó là ý nghĩa của Layout.

Mình sẽ dựa vào prototype ở bài giới thiệu để làm layout. Có thể thấy nó không có chút gì giống layout mặc định của bootstrap cung cấp, cho nên mình xóa toàn bộ và thay thế bằng layout như sau:

Vậy thì, với 1 view có nội dung...

...thì kết quả sẽ là

View đã thế chỗ vào helper @RenderBody() bằng cách nào? Đó là nội dung của _ViewStart.cshtml

Từ đây, để hủy layout hoặc sử dụng 1 layout khác, bạn chỉ cần set Layout mới cho view

Bundles

Bunbles là nơi resource (css/js) được đóng thành các gói đễ dễ quản lý. Bạn có thể dễ dàng thêm 1 file css vào bundles bằng cách thêm đường dẫn đến file css đó vào bundle có sẵn hoặc tạo mới bằng lệnh bundles.Add();

Việc sử dụng bundles cũng khá đơn giản, với mỗi css bundle hoặc js bundle, bạn có 1 cách import bằng Styles.Render hoặc Scripts.Render tương ứng

Mình đã thêm styles.css và app.js cho project, đồng thời xóa luôn style mặc định của file Site.css

Footer css

Footer được đặt cố định dưới đáy bằng fixed position, css đơn giản như sau:

Header css

Phần header tương đối không đơn giản đối với những bạn chưa rành về css. Bạn có thể xem trong video để rõ hơn. Mình sẽ giải thích về logo như sau:
Để logo nằm ở vị trí lệch so với nav, có rất nhiều cách. Ở đây mình sử dụng position.

Khi đặt logo có position là absolute, nó sẽ lấy cha gần nhất có position relative làm mốc (nếu không có thì sẽ lấy trình duyệt), cho nên mình set position của nav là relative. Nếu sử dụng position (relative) mà không set top, right, bottom, left thì phần tử không có gì thay đổi, do đó nav vẫn giữ nguyên.

Để làm responsive menu như bootstrap, mình sẽ hướng dẫn ở 1 bài không xa trong phần jquery. Bây giờ cứ tạm chấp nhận trang web sẽ 1/2 responsive =))

HTML Helper và Url Helper

HTML Helper: Supports the rendering of HTML controls in a view. URL Helper: Contains methods to build URLs for ASP.NET MVC within an application.

Trong phần logo, mình đã sử dụng 1 Url Helper đó là @Url.Content("~/path/to/image"). Phương thức này sẽ chuyển từ đường dẫn tương đối truyền vào thành đường dẫn tuyệt đối. Và trong (đa số) các trường hợp, kết quả không có gì khác:

Vậy tại sao lại cần sử dụng helper?

Để hiểu rõ hơn, mình sẽ sử dụng HTML helper làm ví dụ. HTML helper sẽ giúp bạn render html từ các tham số truyền vào:

Đây là cách viết 3 thẻ a bằng html thuần, url helper và html helper. Mọi việc sẽ chẳng có gì để nói nếu như bạn host website ở 1 sub domain. Khi đó, kết quả sẽ là

Và bạn thấy đấy, link đầu tiên sẽ vô tác dụng vì nó không gọi được action nào cả. 2 cách còn lại, bạn chỉ cần quan tâm tới action nào và controller nào, mọi việc còn lại đã có engine của mvc lo liệu.

Cách 1 vẫn có thể sử dụng được nếu bạn biết sub domain, ví dụ như sub/controller/action

Mình thường sử dụng cách 2, bạn sẽ tiện hơn khi thêm các custom attribute của html5.

Video

Chỉnh tốc độ 2.0 xem cho phiêu !!!

Source

mvc-tutorials

Kết

Bài đầu tiên chỉ nhẹ nhàng thế này thôi. Hy vọng các bạn sẽ nắm được một số nội dung:

Cách cập nhập package bằng Package Manager

Cách sử dụng bundles

Cách sử dụng Layout và Layout riêng cho từng trang

Hiểu về Url Helper và HTML Helper

Một chút kỹ thuật sử dụng css