Mô hình MVC được xây dựng dựa trên 3 thành phần cơ bản: Model – View – Controller

Model

Hiểu một cách đơn giản, model là nơi đại diện cho dữ liệu, giúp kết nối với database, bao gồm những class mà ta cần thao tác, xử lý.

View

Là nơi hiển thị và biểu diễn thông tin. View nhận dữ liệu từ Model và xử lý từ Controller, sau đó hiển thị lên cho người dùng thông qua các trang web.

Controller

Sau khi người dùng thao tác trên View, các yêu cầu được gửi đến cho Controller xử lý. Controller dùng dữ liệu từ Model, tiến hành tính toán, lưu trữ, sau đó đẩy kết quả về cho View.

Trong bài hướng dẫn này chúng ta sẽ tạo một project MVC đơn giản với Visual Studio 2013.

Đầu tiên, chọn File > New > Project:

Chọn Web > ASP.NET Web Application:

  • Name: tên project
  • Location: chọn thư mục sẽ chứa project
  • Solution: tên solution, thông thường, tên solution sẽ đặt trùng với tên project.

Capture

Chọn MVC, sau đó nhấn OK:

Capture

Sau khi project tạo thành công sẽ xuất hiện khung Solution Explorer. Các bạn sẽ thấy các folder Controllers, ModelsViews:

Capture

Phải chuột vào Project, chọn View > View in Browser:

Capture

Đây là giao diện trang web được tạo sẵn mặc định:

Capture

Vậy trang này là trang nào?

Trước hết, quy tắc mặc định đường dẫn đến 1 trang như sau: http://localhost:[số port]/tênController/tênMethod

Các bạn để ý đường dẫn của trang vừa rồi nhé, đường dẫn sẽ có dạng http://localhost:[số port]/ tức là không có tên controller và tên method, vậy làm sao server biết bạn muốn gọi đến trang nào?

Bây giờ các bạn vào folder App_Start, mở RouteConfig.cs và để ý đoạn code sau:

Capture

Ở đây, default là controller có tên Home, với method là Index, điều này có nghĩa là khi trên đường dẫn không chỉ định rõ tên controller hoặc tên method thì sẽ dùng giá trị mặc định được quy định ở đây.

VD:

  • http://localhost:xxxx/ = http://localhost:xxxx/home = http://localhost:xxxx/home/index
  • http://localhost:xxxx/MyController = http://localhost:xxxx/MyController/index

Trong folder Controllers có các controller được tạo sẵn, các bạn mở HomeController.cs sẽ thấy các method:

Capture

Các bạn vào folder Views > Home, để ý thấy với mỗi method trong controller sẽ có 1 view tương ứng là About, ContactIndex, hay nói cách khác, với mỗi view được tạo ra, cần có 1 method ứng với nó để trỏ tới nó.

Các bạn có thể vào http://localhost:xxxx/home/about hoặc http://localhost:xxxx/home/contact để xem các trang tương ứng.

Lưu ý, tên method không nhất thiết phải trùng với tên view. Ở đây do tên method và tên view giống nhau nên chỉ cần gọi return View(), còn nếu khác tên thì cần đổi lại thành return View(“tênView”).

VD: trong method About, đổi lại thành return View(“Index”), sau đó phải chuột vào project, chọn View in Browser rồi vào trang http://localhost:xxxx/home/about, lúc này trang được hiển thị không còn là About nữa mà đã được thay bằng trang Index.

Vậy là các bạn đã nắm được cơ bản về cách tạo và nguyên tắc hoạt động của một trang web mvc. Ở các bài sau, chúng ta sẽ đi sâu hơn vào việc hiện thực một website hoàn chỉnh, bao gồm cả database.

Post Views: 900

Share this:

Related

ĐỂ LẠI PHẢN HỒI CỦA BẠN TẠI ĐÂY

Phản hồi về bài viết này

NO COMMENTS

LEAVE A REPLY


*