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

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

Chúng ta đã tạo StudentController, Model và View 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.

Trả lời

Email 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 *