MVC là viết tắt của model – view – controller. MVC là một mô hình để phát triển các ứng dụng, nó có kiến trúc tốt, dễ kiểm thử và dễ bảo trì. Các ứng dụng dựa trên mô hình MVC có các thành phần sau:
Models: Bao gồm các lớp đại diện cho dữ liệu của ứng dụng và các luật để kiểm tra tính hợp lệ của dữ liệu.
Views: Là các file “Template” mà ứng dụng của bạn sử dụng để tự động sinh ra mã HTML.
Controllers: Đây là thành phần đảm nhận việc xử lý các yêu cầu từ phía trình duyệt. Lấy dữ liệu, sau đó xác định các “view” sẽ trả kết quả về cho trình duyệt.
Chúng ta sẽ lần lượt tìm hiểu những khái niệm trên và cách sử dụng chúng để xây dựng một ứng dụng ASP.NET MVC.
Chú ý: Ở bước trước, template mặc định của một ứng dụng MVC đã được chọn, nó đã tự động sinh ra Home Controller, Account Controller, và Manage Controller.
Bây giờ, chúng ta sẽ đi tạo mới một Controller. Trong “Solution Explorer”, chuột phải vào thư mục Controllers, sau đó nhấn Add ->Controller…
Trong hộp thoại “Add Scaffold”, chọn “MVC 5 Controller – Empty”, sau đó nhấn “Add”:
Đặt tên cho Controller là “HelloWorldController” và nhấn “Add”:
Bạn sẽ thấy một file mới có tên “HelloWorldController.cs” được tạo ra trong thư mục Controllers và một thư mục mới có tên “HelloWorld” được tạo ra trong thư mục Views. File “HelloWorldController.cs” sẽ có dạng:
Thay thế nội dung của file “HelloWorldController.cs” như sau:
[sourcecode language=”csharp”]
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MvcMovie.Controllers
{
public class HelloWorldController : Controller
{
//
// GET: /HelloWorld/
public string Index()
{
return "This is my <b>default</b> action…";
}
//
// GET: /HelloWorld/Welcome/
public string Welcome()
{
return "This is the Welcome action method…";
}
}
}
[/sourcecode]
Trong ví dụ trên, các phương thức của lớp “HelloWorldController” sẽ trả về một chuỗi HTML. Bây giờ, ta sẽ gọi phương thức “Index” từ trình duyệt. Bạn nhấn phím “F5” để chạy ứng dụng. Trên trình duyệt, bạn thêm “HelloWorld” vào đường dẫn trong thanh địa chỉ (Ví dụ:”http://localhost:1234/HelloWorld”). Trang trong trình duyệt sẽ giống như ảnh chụp màn hình dưới đây. Phương thức “Index” trả về một chuỗi. Bạn đã nói với hệ thống chỉ cần trả lại HTML, và nó đã làm như vậy:
ASP.NET MVC gọi các Controller khác nhau (và các phương thức khác nhau trong mỗi Controller). Điều này tùy thuộc vào đường dẫn URL. URL mặc định được sử dụng bởi ASP.NET MVC sử dụng định dạng như sau để xác định đoạn mã nào được gọi:
/[Controller]/[ActionName]/[Parameters]
Bạn thiết lập định dạng cho việc định tuyến trong file App_Start/RouteConfig.cs:
[sourcecode language=”csharp”]
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
}
[/sourcecode]
Khi bạn chạy ứng dụng mà không cung cấp bất kì một thành phần nào của URL thì mặc định hệ thống sẽ điều hướng đến Controller “Home” và Action “Index” như đoạn mã trong hình trên. Phần đầu tiên của URL (Controller) sẽ xác định Controller, vì vậy “/HelloWorld” sẽ ánh xạ đến lớp HelloWorldController. Phần thứ 2 của URL(ActionName) xác định Action, vì vậy “/HelloWorld/Index” sẽ gọi đến phương thức “Index” của lớp HelloWorldController. Lưu ý rằng chúng ta chỉ cần điều hướng đến “/HelloWorld”, phương thức “Index” trong “HelloWorldController” sẽ mặc định được gọi. Điều này là bởi vì phương thức có tên “Index” là phương thức mặc định được gọi trên một Controller nếu “ActionName” trong URL không được quy định rõ ràng . Phần thứ ba của URL (Parameters) sử dụng để định tuyến dữ liệu.
Duyệt tới “http://localhost:xxxx/HelloWorld/Welcome”. Phương thức “Welcome” sẽ được gọi và trả về chuỗi “This is the Welcome action method…”. Với URL này, Controller là “HelloWorld” và ActionName là “Welcome”. Bạn chưa sử dụng phần “Parameters” của URL.
Hãy sửa đổi ví dụ một chút để bạn có thể truyền một vài tham số tới Controller (Ví dụ: /HelloWorld/Welcome?name=Scott&numtimes=4). Thay đổi phương thức “Welcome” để thêm vào hai tham số. Tham số “numTimes” sẽ mặc định là “1” nếu không có giá trị được truyền vào.
[sourcecode language=”csharp”]
public string Welcome(string name, int numTimes = 1)
{
return HttpUtility.HtmlEncode("Hello " + name + ", NumTimes is: " + numTimes);
}
[/sourcecode]
Lưu ý: Đoạn mã ở trên sử dụng HttpUtility.HtmlEncode để bảo vệ ứng dụng khỏi dữ liệu đầu vào nguy hiểm (cụ thể là JavaScript). Bây giờ bạn nhấn phím F5 để chạy ứng dụng và duyệt tới URL(http://localhost:xxxx/HelloWorld/Welcome?name=Scott&numtimes=4). Bạn có thể thử các giá trị khác nhau cho “name” và “numtimes” trong URL. ASP.NET MVC sẽ tự động ánh xạ các tham số trong thanh địa chỉ đến các tham số trong phương thức của bạn.
Trong ví dụ ở trên, “Parameters” trong URL không được sử dụng. Các tham số “name” và “numTimes” đã được truyền như chuỗi truy vấn (query strings). Dấu chấm hỏi (?) trong URL ở trên là dấu phân tách, theo sau nó là chuỗi truy vấn. Dấu (&) dùng để phân cách các tham số trong chuỗi truy vấn.
Thay thế phương thức Welcome với đoạn mã sau đây:
[sourcecode language=”csharp”]
public string Welcome(string name, int ID = 1)
{
return HttpUtility.HtmlEncode("Hello " + name + ", ID: " + ID);
}
[/sourcecode]
Chạy ứng dụng và nhập URL như sau: http://localhost:xxx/HelloWorld/Welcome/1?name=Scott.
Lần này phần thứ ba của URL khớp với tham số ID. Phương thức “Welcome” chứa một tham số (ID) khớp với đặc tả URL trong phương thức RegisterRoutes.
[sourcecode language=”csharp”]
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
}
[/sourcecode]
Bạn cũng có thể thêm một Route để truyền cả hai tham số “name” và “id” trong URL. Trong file App_Start\RouteConfig.cs thêm route “Hello”:
[sourcecode language=”csharp”]
routes.MapRoute(
name: "Hello",
url: "{controller}/{action}/{name}/{id}"
);
[/sourcecode]
Chạy ứng dụng và duyệt tới : http://localhost:xxx/HelloWorld/Welcome/Scott/3.
Đối với nhiều ứng dụng ASP.NET MVC, route mặc định hoạt động tốt. Ở những bài sau, bạn sẽ học cách truyền dữ liệu sử dụng “model binder” và bạn sẽ không phải sửa đổi route mặc định.
Trong những ví dụ trên, Controller đã làm phần “VC” của mô hình MVC. Có nghĩa là Controller đang trả về HTML trực tiếp. Thông thường, chúng ta sẽ không trả về HTML trực tiếp trong Controller. Thay vào đó chúng ta sẽ sử dụng file template để sinh ra mã HTML. Chúng ta sẽ tìm hiểu điều này ở bài viết tiếp theo.
