Kết hợp Controller, View và Model trong ASP.NET MVC

Chúng ta đã tạo StudentController, ModelView trong các phần trước, nhưng chúng ta chưa tích hợp tất cả các thành phần này để chạy nó.

Trong hướng dẫn này chúng ta sẽ tìm hiểu cách kết hợp Controller, View và Model để tạo ra các chức năng hoàn chỉnh trong ASP.NET MVC.

Các thành phần Controller, View và Model

Các đoạn mã dưới đây là của chức năng xem danh sách sinh viên được tạo trong các phần trước cho Controller, View và Model của Student.

Controller StudentController:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVC_BasicTutorials.Models;

namespace MVC_BasicTutorials.Controllers
{
    public class StudentController : Controller
    {
        // GET: Student
        public ActionResult Index()
        {
            return View();
        }
    }
}

Model Student:

namespace MVC_BasicTutorials.Models
{
    public class Student
    {
        public int StudentId { get; set; }
        public string StudentName { get; set; }
        public int Age { get; set; }
    }
}

View Index.cshtml:

@model IEnumerable<MVC_BasicTutorials.Models.Student>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.StudentName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Age)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.StudentName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Age)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.StudentId }) |
            @Html.ActionLink("Details", "Details", new { id=item.StudentId  }) |
            @Html.ActionLink("Delete", "Delete", new { id = item.StudentId })
        </td>
    </tr>
}

</table>

Kết hợp Controller, Model và View

Bây giờ, để chức năng xem danh sách sinh viên hoạt động, chúng ta cần truyền một đối tượng Model từ Controller sang View Index.cshtml.

Như bạn có thể thấy trong View Index.cshtml khai báo một đối tượng @model có kiểu dữ liệu là IEnumerable<Student> như sau:

@model IEnumerable<MVC_BasicTutorials.Models.Student>

Điều đó có nghĩa là View Index.cshtml chấp nhận một đối tượng Model có kiểu dữ liệu là IEnumerable<Student>.

Vì vậy, trong phương thức hành động Index của lớp StudentController, chúng ta cần truyền một đối tượng Model kiểu IEnumerable<Student> tới View Index.cshtml như dưới đây.

public class StudentController : Controller
{
    // GET: Student
    public ActionResult Index()
    {
        var studentList = new List<Student>
        { 
            new Student() { StudentId = 1, StudentName = "John", Age = 18 },
            new Student() { StudentId = 2, StudentName = "Steve", Age = 21 },
            new Student() { StudentId = 3, StudentName = "Bill", Age = 25 },
            new Student() { StudentId = 4, StudentName = "Ram", Age = 20 },
            new Student() { StudentId = 5, StudentName = "Ron", Age = 31 },
            new Student() { StudentId = 4, StudentName = "Chris", Age = 17 },
            new Student() { StudentId = 4, StudentName = "Rob", Age = 19 } 
        };
        
        // Get the students from the database in the real application

        return View(studentList);
    }
}

Như bạn có thể thấy trong đoạn mã trên, chúng tôi đã tạo một danh sách các đối tượng sinh viên studentList cho mục đích ví dụ (trong ứng dụng thực tế, bạn có thể lấy nó từ cơ sở dữ liệu).

Sau đó chúng tôi truyền đối tượng danh sách sinh viên này làm tham số trong phương thức View().

Phương thức View() được định nghĩa trong lớp Controller cơ sở, nó tự động liên kết đối tượng Model với View.

Bây giờ, bạn có thể chạy dự án ASP.NET MVC bằng cách nhấn phím F5 và truy cập đến địa chỉ http://localhost/student. Bạn sẽ thấy màn hình sau trong trình duyệt.

ASP.NET MVC
Bài Viết Liên Quan:
Lớp HtmlHelper trong ASP.NET MVC
Trung Nguyen 28/05/2020
Lớp HtmlHelper trong ASP.NET MVC

Lớp HtmlHelper trong ASP.NET MVC là gì? Cách sử dụng HtmlHelper để tạo ra các phần tử HTML trong Razor View.

Cú pháp Razor trong ASP.NET MVC
Trung Nguyen 27/05/2020
Cú pháp Razor trong ASP.NET MVC

Cách sử dụng cú pháp Razor để viết mã C# hoặc VB.NET trong Razor View trong ASP.NET MVC.

Tạo View cập nhật trong ASP.NET MVC
Trung Nguyen 27/05/2020
Tạo View cập nhật trong ASP.NET MVC

Tìm hiểu cách tạo view cho chức năng chỉnh sửa thông tin sinh viên trong ASP.NET MVC.

Model Binding trong ASP.NET MVC
Trung Nguyen 26/05/2020
Model Binding trong ASP.NET MVC

Tìm hiểu về Model Binding trong ASP.NET MVC. Tự động nạp các tham số của phương thức hành động.