Lab02 - TRUYỀN NHẬN DỮ LIỆU GIỮA CONTROLLER/ACTION VỚI VIEW

Bài tập 1: Máy tính cá nhân

Bước 1: Tạo mới Controller có tên CalculatorController

public class CalculatorController : Controller

{

    public IActionResult Index()

    {

        return View();

    }

}

Bước 2: Tạo View ứng với Action Index()

Tạo mới view Index() empty và thiết kế giao diện tùy thích nhưng có 2 số hạng, 1 toán tử, 1 nút = để tính kết quả và hiển thị kết quả. 

Kết quả chạy action Index: [host]/Calculator hay [host]/Calculator/Index như sau:

Bước 3: Tạo action Calculate() nhận giá trị từ View chuyển qua

public IActionResult Calculate(double SoHang01, double SoHang02, string operation)

{

    return View("Index");

}

Bước 4: Xử lý tính toán trong action Calculate(), sau đó truyền kết quả qua view Index()

Dùng ViewBag để truyền dữ liệu sang View

Bước 5: Hiển thị dữ liệu trên view Index()

Thử chạy, chỉnh sửa và quan sát kết quả

Bài tập 2: Quản lý Sản phẩm đơn giản (Product Management) 

🎯 Mục tiêu bài học

• Hiểu và phân biệt cách dùng ViewData, ViewBag, TempData.

• Biết cách truyền một Model dữ liệu phức tạp (Object/List) sang View dưới dạng Strongly Typed View.

• Biết cách gửi dữ liệu từ View (Form HTML) ngược lại Controller thông qua Model Binding.

🔨 Hướng dẫn từng bước

Bước 1: Tạo Model dữ liệu

Tạo một class Product.cs trong thư mục Models:

public class Product {

 public int Id { get; set; }

 public string Name { get; set; }

 public decimal Price { get; set; }

 public string Category { get; set; }

} 

Bước 2: Viết Controller ProductController.cs 

Tạo một Controller mới và áp dụng các cơ chế truyền dữ liệu:

public class ProductController : Controller

{

    // Danh sách dữ liệu dùng Strongly Typed Model

    var products = new List<Product>

    {

        new Product { Id = 1, Name = "Laptop Dell XPS", Price = 1500, Category = "Laptop" },

        new Product { Id = 2, Name = "iPhone 15 Pro", Price = 1200, Category = "Điện thoại" },

        new Product { Id = 3, Name = "Chuột Logitech MX Master 3", Price = 100, Category = "Phụ kiện" }

    };

    // 1. Action hiển thị danh sách sản phẩm (Truyền từ Controller -> View)

    public IActionResult Index()

    {

        // Tiêu đề trang dùng ViewData

        ViewData["PageTitle"] = "Danh Sách Sản Phẩm";

        return View(products);

    }

    // 2. Action hiển thị Form thêm mới sản phẩm

    [HttpGet]

    public IActionResult Create()

    {

        return View();

    }

    // 3. Action xử lý dữ liệu Form gửi lên (Từ View -> Controller) và dùng TempData

    [HttpPost]

    public IActionResult Create(Product newProduct)

    {

        if (ModelState.IsValid)

        {

            // xử lý và lưu vào Database (tương lai)

            // ...

            // Dùng TempData để giữ tin nhắn thông báo sau khi Redirect

            TempData["SuccessMessage"] = $"Thêm sản phẩm '{newProduct.Name}' thành công!";

            return RedirectToAction("Index");

        }

        return View(newProduct);

    }

}

Bước 3: Tạo giao diện View

🔹 Giao diện hiển thị danh sách (Index.cshtml)

Tạo file Index.cshtml trong thư mục Views/Product/:

@model IEnumerable<WebApplication1.Models.Product>

@{

    // Nhận dữ liệu từ ViewData

    ViewBag.Title = ViewData["PageTitle"];

}

<h2>@ViewData["PageTitle"]</h2>

@if (TempData["SuccessMessage"] != null)

{

    <div class="alert alert-success">

        @TempData["SuccessMessage"]

    </div>

}

<p>Tổng số sản phẩm hiện có: <strong>@ViewBag.TotalProducts</strong></p>

<a asp-action="Create" class="btn btn-primary mb-3">Thêm sản phẩm mới</a>

<table class="table table-bordered">

    <thead>

        <tr>

            <th>ID</th>

            <th>Tên sản phẩm</th>

            <th>Giá ($)</th>

            <th>Danh mục</th>

        </tr>

    </thead>

    <tbody>

        @foreach (var item in Model)

        {

            <tr>

                <td>@item.Id</td>

                <td>@item.Name</td>

                <td>@item.Price.ToString("C")</td>

                <td>@item.Category</td>

            </tr>

        }

    </tbody>

</table>

Giao diện Form thêm mới (Create.cshtml) 

Tạo file Create.cshtml trong thư mục Views/Product/:

@model Product

<h2>Thêm Sản Phẩm Mới</h2>

<form asp-action="Create" method="post" class="col-md-6">

    <div class="mb-3">

        <label asp-for="Id" class="form-label">Mã sản phẩm (ID)</label>

        <input asp-for="Id" class="form-control" type="number" />

    </div>

    <div class="mb-3">

        <label asp-for="Name" class="form-label">Tên sản phẩm</label>

        <input asp-for="Name" class="form-control" />

    </div>

    <div class="mb-3">

        <label asp-for="Price" class="form-label">Giá</label>

        <input asp-for="Price" class="form-control" type="text" />

    </div>

    <div class="mb-3">

        <label asp-for="Category" class="form-label">Danh mục</label>

        <input asp-for="Category" class="form-control" />

    </div>

    <button type="submit" class="btn btn-success">Lưu lại</button>

    <a asp-action="Index" class="btn btn-secondary">Quay lại</a>

</form>

Tương tự xử lý cho:

1. Nút Edit và Delete. Trường hợp Delete nhớ dùng SweetAlert2 để xác nhận người dùng trước khi xóa.

2. Nút "Tìm": thêm một ô Input tìm kiếm theo Tên sản phẩm ở trang Index.cshtml bà hiển thị kết quả tìm kiếm