Trang chủ / ASP.NET Core / Thêm một controller trong ứng dụng ASP.NET Core qua mô hình MVC

Thêm một controller trong ứng dụng ASP.NET Core qua mô hình MVC

Thêm một controller trong ứng dụng ASP.NET Core MVC. Cái này có lẽ không còn lạ với nhiều bạn lập trình asp.net nhưng mình vẫn sẽ nhắc lại và cung cấp một số kiến thức mới hơn. Nhưng trước khi bắt đầu thêm một controller mình sẽ bàn lại một chút xíu về mô hình MVC trong asp.net core dù đã nói ở bài trước nhưng nhắc lại để giúp cho các bạn nắm rõ hơn về mô hình này.

1. Nhắc lại về Mô hình MVC trong ASP.NET

Model-View-Controller (MVC) mô hình kiến trúc tách ứng dụng thành 3 thành phần chính: Model, View, và Controller. Mô hình MVC giúp bạn tạo ra các ứng dụng có thể kiểm chứng và dễ dàng hơn để bảo trì và cập nhật hơn so với các ứng dụng truyền thống. Mô hình MVC bao gồm:

  • Models: Các lớp đại diện cho các dữ liệu của các ứng dụng và sử dụng logic xác nhận để thực thi các quy tắc nghiệp vụ cho dữ liệu đó. Thông thường, đối tượgn Model lấy và lưu trữ Model trong một cơ sở dữ liệu. Trong hướng dẫn này, một mô Model “Movie” sẽ lấy dữ liệu phim từ một cơ sở dữ liệu, và được cung cấp để View hoặc cập nhật nó. Cập nhật dữ liệu được ghi vào một cơ sở dữ liệu SQL Sever database.
  • Views: Views là thành phần để hiển thị giao diện người dùng của ứng dụng (UI). Nhìn chung, giao diện người dùng này sẽ hiển thị các dữ liệu theo Model của chúng ta.
  • Controllers: Các lớp có thể xử lý yêu cầu trình duyệt, lấy dữ liệu dưa theo model, và sau đó xác định xem View nào sẽ được trả lại trong trình duyệt. Trong một ứng ụng MVC, view chỉ hiện thị thông tin, controller xử lý và phản ứng với đầu vào của người dùng và tương tác. Ví dụ, Controller xử lý dữ liệu định tuyến (route data) và các truy vấn chuỗi sau đó đưa những giá trị này tới model. Model này có thể sử dụng những quá trị này để truy vấn cơ sở dữ liệu.

Mô hình MVC giúp bạn tạo ra các ứng dụng được tách thành các thành phần khác nhau (input logic, business logic, và UI logic), và cung cấp một các kết nối đơn giản giữa các thành phần này. Mô hình này quy định cụ thể mỗi loại logic nên được đặt trong ứng dụng như thế nào. Các logic UI nằm trong View. Input logic nằm trong Controller. Business logic nằm trong Model. Sự tách biệt này giúp bạn có thể quản lý các phức tạp xảy ra trong khi xây dựng ứng dụng, bởi vì việc này giúp bạn làm việc tại một thời điểm mà không ảnh hưởng đến mã (code) của người khác. Ví dụ bạn có thể tiế`n hành code trên View mà không ảnh hướng đến code ở business logic

2. Thêm một controller trong ứng dụng ASP.NET Core MVC

Ở loại bài này mình sẽ bao gồm tất cả khái niệm này và giúp bạn thấy làm thế nào để sử dụng chúng trong một ứng dụng Movie đơn giản. Còn bây giờ bạn hãy tạo một project MVC ASP.NET Core để thấy các thư mục  Vỉews, Controllers trong các thư mục dự án MVC (thiếu folder Models).

Thêm một controller trong ứng dụng ASP.NET Core MVC
Thêm một controller trong ứng dụng ASP.NET Core MVC

Trong Solution Explorer, click phải vào Controllers -> Add -> New item

Thêm một controller trong ứng dụng ASP.NET Core MVC - Ảnh 2
Thêm một controller trong ứng dụng ASP.NET Core MVC – Ảnh 2

và chọn MVC Controller Class và đặt tên là “HelloWorldController

Thêm một controller trong ứng dụng ASP.NET Core MVC - Ảnh 3
Thêm một controller trong ứng dụng ASP.NET Core MVC – Ảnh 3

Thay thế nội dung hoặc tắt phương thức cũ của Controllers/HelloWorldController.cs và thêm đoạn code sau:

 

như hình:

Thêm một controller trong ứng dụng ASP.NET Core MVC - Ảnh 4
Thêm một controller trong ứng dụng ASP.NET Core MVC – Ảnh 4

Bạn có thể thấy, mỗi phuơng thức “public” trong một controller có thể được gọi là điểm cuối trong HTTP. Trong ví dụ trên, cả hai phương thức đểu trả về  một chuỗi. Lưu ý các ghi chú trong mỗi phương thức trên.

Ghi chú thứ nhất là ghi chú nói về phương thức HTTP GET được gọi bằng cách sử dụng đường dẫn URL cơ sở tức là “/HelloWorld/” (hay dễ hiểu hơn đó là “/HelloWorld/” sẽ bằng với “/HelloWorld/index” (cái này là mặc định hay là chuẩn chung của lập trình hiện tại rồi và bạn có thể thay đổi nó trong Startup.cs). Ghi chú thứ hai nói về phương thức HTTP GET được gọi bằng cách thêm “/HelloWorld/Welcome/” vào URL.

Để dễ hiểu hơn bây giờ bạn hãy chạy ứng dụng ở chế độ trong debug (nhấn Ctrl + F) và gõ “HelloWorld” vào đường dẫn trong thanh địa chỉ. (Trong hình của mình sử dụng địa chỉ. http://localhost:54790/HelloWorld còn của bạn khi chạy sẽ có một số khác 54790 hoặc trùng nhưng hiếm khi xảy ra, số đó tương ướng với số cổng của ứng dụng của bạn. Lúc này bạn sẽ thấy phương thức Index điều trả về một chuỗi có định dạng HTML như trong phương thức Index trong HelloWorldController 

Thêm một controller trong ứng dụng ASP.NET Core MVC - Ảnh 5
Thêm một controller trong ứng dụng ASP.NET Core MVC – Ảnh 5

MVC gọi các class Controller và các phương thức hành động (action) tùy thuộc vào đia chỉ URL. Mặc định bộ định tuyến URL (URL routing logic) được sử dụng bởi MVC sử dụng một định dạng như thế này để xác định những mã được gọi.

Bạn có thể thiết lập định tuyến trong tập tin Startup.cs. Bây giờ hãy tiến hành mở tập tin Startup.cs ra xem thử

Khi bạn chạy các ứng dụng và không cung cấp bất kỳ URL nào, nó sẽ mặc định “Home” là Controller và “Index” là phương thức được sử dụng như trên.

Dựa vào URL sẽ giúp xác định controller nào để chạy. Cho nên khi bạn nhập trên trình duyệt localhost:xxxx/HellowWorld/Index sẽ gọi phương thức Index của class HelloWorldController để chạy. Xin nhắc lại lần nữa chúng ta chỉ phải duyệt đến locahost:xxxx/HelloWord thay vì locahost:xxxx/HelloWord/Index vì phướng thức Index lúc này sẽ được gọi mặc định. Điều này là do Index là phương thức mặc định sẽ được gọi trên Controller nếu có một phương thức nào đó không được xác định rõ ràng. Phần thứ 3 của URL là “id” là cho dữ liệu route. Chúng ta sẽ thấy dữ liệu định hướng (route data) ở hướng dẫn bên dưới

Bây giờ tiến hành duyệt đến http://locahost:xxxx/HelloWorld/Welcome. Lúc này phương thức Welcome trong Controller HelloWorld được gọi và trả về chuỗi “Chào mừng bạn đến với ví dụ này…..

Thêm một controller trong ứng dụng ASP.NET Core MVC - Ảnh 6
Thêm một controller trong ứng dụng ASP.NET Core MVC – Ảnh 6

Bây giờ hãy sửa đổi các ứng dụng để bạn có thể có các tham sốURL khác từ Controller để điều khiển (Ví dụ, /HelloWorld/Welcome ?name=Nguyen&numtimes=4). Thay đổi phương thức Welcome bao gồm 2 thông số như hình dưới đây. Lưu ý rằng trong ví dụ này ngôn ngữ C# cho phép tham số numTimes mặc định là 1 nếu không có giá trị nào truyền cho tham số này.

Bây giờ tiến hành nhập vào địa chỉ http://localhost:xxxx/HelloWorld/Welcome?name=NguyenIT&numtimes=4 trong trình duyệt, bạn sẽ thấy

Thêm một controller trong ứng dụng ASP.NET Core MVC - Ảnh 7
Thêm một controller trong ứng dụng ASP.NET Core MVC – Ảnh 7

(Nhớ thay thế xxxx bằng port của bạn). Bạn có thể thay đổi giá trị name và numtimes trong URL tùy thích. Hệ thống trong Mô hình MVC sẽ tự động ánh xạ các tham số được đặt tên từ chuỗi truy vấn vào thanh địa chỉ nhờ vào phương thức của bạn.

Trong ví dụ trên, Parameters không được sử dụng, name và numTimes được như là chuổi truy vấn. Dấu ? (chấm hỏi) trong URL ở trên là một dấu phân tách ngăn cách các chuổi truy vấn theo sau. Ký tự & là ký tự ngăn cách.

Thay thế phương thức Welcome bằng đoạn mã dưới đây:

Chạy ứng dụng và nhập vào địa chỉ URL: http://localhost:xxx/HelloWorld/Welcome/3?name=NguyenIT

Thêm một controller trong ứng dụng ASP.NET Core MVC - Ảnh 7
Thêm một controller trong ứng dụng ASP.NET Core MVC – Ảnh 8

Lần này đoạn URL thứ ba xuất hiện các thông số tuyến đường (route) id. Phương thức Welcome chứa một tham số id lần đầu xuất hiện đúng như URL trong phương thức MapRoute. Các dấu ? (Trong id?) chỉ ra các tham số id là tùy chọn. Bạn hãy xem lại đoạn mã mặc định dưới đây để hiểu rõ hơn

Trong những ví dụ trên, controller đã làm luôn :VC” hay dễ hiểu luôn là kiêm vai trò của view và controller. Controller đã trả về HTMl trực tiếp. Tuy nhiên vì đây là ví dụ nhằm giúp bạn hiểu rõ vấn đề nên mới làm như thế, bạn không nên để controller trả về HTML trực tiếp, nó sẽ khiến cho các đoạn code rấ cồng kềnh và khó bảo trì. Thay vào đó bạn sẽ sử dụng Razor để giúp bạn tạo ra các HTML nhưng mình sẽ hướng dẫn ở những bài sau bạn nhé.

Tải về source code: Google Drive
Series NavigationThêm một View trong ứng dụng ASP.NET Core qua mô hình MVC >>

Thông tin Nguyễn An Hoàng Nguyên

Đam mê về lập trình, thích viết lách. Có hứng thú với thương mại điện tử và kinh doanh

Check Also

widget trong template này

Generic Repository Pattern là gì ? Cách sử dụng trong ASP.NET Core

Cũng đã gần 3 tháng mình mới viết bài mới. 3 tháng trước mình đã …

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *