by oclockvn at 12:16 AM 11/18/2016

ASP.NET MVC 5 series - p1: setup and structure

Tạo ứng dụng và hiểu về cấu trúc 1 project (proj) ASP.NET MVC (5)

Đối với VS 2013 trở lên, khi tạo 1 project MVC thì bạn đang tạo MVC 5 (nếu chọn default). Hãy cố gắng setup để được MVC 5 nhé, vì v5 cũng có cải tiến khá nhiều so với các version trước đó.

Tạo project

Đây chắc chắn là bước dễ nhất rồi :v

Nếu bạn dùng VS 2015, hãy chắc rằng mình chọn 4.5.2 (có thể đổi framework sau này)

Chọn các options theo đánh dấu đỏ như hình dưới:

Nếu bạn chọn Template MVC, một số thư mục theo quy ước và các references cần thiết sẽ được cài đặt sẵn. Sau này nếu không sử dụng bạn có thể gỡ bỏ ra.

Solution Explorer

Đây là cấu trúc thư mục cơ bản của 1 proj MVC

Có rất nhiều thứ để bạn quan tâm, nhưng bây giờ, bạn chưa cần quan tâm gì vội cả. Hãy thử build và chạy xem kết quả thế nào đã.

Start Without Debugging giúp bạn dễ dàng refresh lại trình duyệt mỗi khi có chỉnh sửa trong code.

Nếu kết quả ra như thế này, và tất nhiên nó sẽ ra như vậy rồi, thì bạn đã xong bước đầu rồi đấy :)))

packages.config và Nuget Package Manager

Packages.config là file tổng hợp các references được sử dụng trong project theo dạng xml. Bạn có thể xem được tên của package và version hiện tại của package đó.

Nuget là extension được tích hợp vào VS dùng để quản lý các packages. Bạn có thể dùng GUI (Package Manager Settings) hoặc dòng lệnh (Package Manager Console) để cập nhật các packages có trong proj.

Việc mình thường xuyên làm nhất sau khi tạo proj là update jquery và bootstrap lên version mới nhất, điều đó dễ thực hiện bằng cách sử dụng nuget package

Cài đặt package bằng câu lệnh

install-package {package-name} (-version xxx)

Lưu ý:

1. Nếu solution có nhiều proj, hãy chọn proj bạn muốn cài đặt package trong phần (1)
2. Nếu không chỉ ra tham số version (2), nuget sẽ lấy version mới nhất (3) để cài đặt.

Model - View - Controller

Để hiểu cách làm việc của mô hình MVC, hãy làm theo ví dụ sau:

Khoan hẵng thắc mắc nó là gì nhé, bạn cứ bắt tay vào làm rồi sẽ biết

Tạo 1 Controller

Controller là gì ấy nhỉ? Ái chà, đã bảo cứ làm theo đi rồi tính sau mà :v

R-click vào folder Controllers > Add > Controller...

Chọn Empty Controller

Quy ước đặt tên: Tên controller được đặt theo quy ước NameOf + Controller, nếu bạn đặt khác quy ước này, bạn sẽ gặp rắc rối đấy.

Khi sử dụng 1 controller, bạn chỉ sử dụng phần NameOf, không viết thêm chữ Controller vào nhé.

Sau khi add xong controller, bạn sẽ thấy như thế này:

Bên trái là nội dung của 1 controller, hiện tại thì bạn thấy đấy:

1. Controller là 1 class (.cs) kế thừa từ abstract class Controller
2. 1 phương thức được tạo sẵn có tên là Index, kiểu trả về là ActionResult
3. 1 thư mục có tên là Test (ứng với tên TestController) được tạo ra nằm trong thư mục Views

Vậy thì bạn ghi nhớ trong đầu những quy ước của MVC framework nhé:

1. Controller được tên theo quy tắc XXXController, và nằm trong thư mục Controllers.
2. View được đặt tên theo quy tắc tương ứng của controller, được đặt trong thư mục Views.
3. Và chỉ có 2 thằng này là bắt buộc phải tuân theo quy ước đặt tên, còn lại bạn muốn đặt sao thì đặt (vẫn còn 1 vài thằng nữa theo quy ước nhưng không quan trọng).

Tạo 1 View

Tương tự như ở trên, hãy khoan thắc mắc view là gì, mà cứ làm trước đã (nếu không biết thì cũng có thể hình dung view = hiển thị)

Cách đơn giản nhất để tạo 1 View là:

1. Đặt con trỏ chuột trong phạm vi hàm Index

2. R-click và chọn Add View...

Hãy để mọi thứ mặc định, bấm Add

Và bạn sẽ được 1 thứ...like this:

Run

Để xem mình vừa làm những gì, trong view vừa tạo, R-click và chọn View in browser...

...hoặc gõ trực tiếp trên thanh địa chỉ /Test/Index (Test = TestController, như đã nói ở trên thì mình chỉ sử dụng cái tên, không dùng chữ Controller trong đó, nhớ nhóe :))

Và nếu bạn ra kết quả như thế này thì xin chúc mừng bạn :))

Giải thích tí nè

1. Sau khi gõ /Test/Index và bấm enter (tương tự việc View in browser) thì bạn đã gửi đi 1 request (get request) đến địa chỉ: số nhà Index, đường Test, và chính xác hơn, bạn đã gọi đến Action Index nằm trong TestController (từ đây không gọi là phương thức nữa mà gọi là Action nhé)
2. Bằng 1 cách thần kỳ nào đó (à, nó gọi là Route :v), thì request ấy đến được với TestController và được xử lý bằng Action Index. Action này cuối cùng bắt buộc phải return về 1 cái gì đó có kiểu là ActionResult, cụ thể ở đây là nó return View(), hay còn gọi là ViewResult
3. Do viết 1 cách ngầm định, MVC sẽ tự động tìm kiếm 1 View (giao diện) có cùng tên với tên của Action, ở đây bạn có thể viết:

// return View();
// or
return View("Index");

Và theo quy ước đặt tên, MVC sẽ lại tìm kiếm View Index nằm trong thư mục ứng với tên của Controller Test, yeah, Views > Test > Index.cshtml có nghĩa như vậy.

1 View không chỉ được nằm trong thư mục cùng tên với Controller nhé, nó còn có thể nằm ở 1 nơi đặc biệt khác, bạn đoán thử xem! (cái này tính sau nhé)

Nếu bạn chưa hình dung ra cách thức làm việc của MVC, không sao cả, nhưng hãy nhớ:

1. Quy ước đặt tên Controller và View
2. Action là nơi tiếp nhận request, Controller là nơi chứa Action.
3. View dùng để hiển thị giao diện (á à, từ đây thì mọi thứ liên quan đến giao diện được viết trong View nhé)
4. Khi 1 request được gửi tới Action, nó (Action đó) sẽ thực hiện những việc cần làm và trả kết quả về cho View tương ứng để hiển thị ra cho người dùng.

Model, where are you?

Nãy giờ mình mới nhắc tới V (View) + C (Controller), chắc model buồn lắm :v. Kệ cha nó đi, model sẽ được nhắc tới sau, bây giờ tạm thời quan tâm V và C đã.

.cshtml, WTF?

Vầng, nó gọi là Razor view, 1 sự kết hợp giữa c# và html -> cshtml. Bằng razor engine, bạn có thể kết hợp code C# vào html, nghe có vẻ thú vị hen. Mình sẽ tìm hiểu về cú pháp razor ở bài sau.

1 chút test nho nhỏ nhé, hãy thử đổi tên view Index.cshtml -> Index2.cshtml và refrest trình duyệt, và...

Thông báo rất có giá trị đấy, bạn phân tích được những gì trong đó???

Xem bài tiếp theo để biết được nhé :v

• #asp.net mvc

• 2
• 148
• 10

1 2 3 4 5 6 7 8 9 10

10