Bài 1: Giới thiệu về Trình quản lý quảng cáo

🎓 Hướng dẫn tạo form nhập dữ liệu, định nghĩa các trường và xử lý dữ liệu trong ASP.NET Core MVC


1. Giới thiệu

Trong ASP.NET Core MVC, form được dùng để nhập dữ liệu từ người dùng (ví dụ: đăng ký, đăng nhập, thêm sản phẩm...).
Có 2 cách thường dùng:

  • Form thông thường (HTML thuần): không cần Model, dữ liệu lấy trực tiếp từ tham số hoặc Request.Form.

  • Form bằng Model: định nghĩa class, sử dụng Model Binding và Validation.


2. Tạo form thông thường (HTML thuần)

2.1. Tạo Action trong Controller

📂 Admin/Controllers/UserController.cs

using Microsoft.AspNetCore.Mvc;
namespace DemoApp.Controllers
{
    public class UserController : Controller
    {
        [HttpGet]
        public IActionResult RegisterSimple()
        {
            return View();
        }

        [HttpPost]
        public IActionResult RegisterSimple(string Name, string Email, int Age, string Password)
        {
            // Xử lý dữ liệu người dùng nhập
            ViewBag.Message = $"Xin chào {Name}, Email: {Email}, Tuổi: {Age}";
            return View("Success");
        }
    }
}

2.2. Tạo form trong View

📂 /Admin/Views/User/RegisterSimple.cshtml

<h2>Đăng ký (Form HTML thuần)</h2>

<form method="post" action="/User/RegisterSimple">
    <label>Họ tên:</label>
    <input type="text" name="Name" /><br /><br />

    <label>Email:</label>
    <input type="email" name="Email" /><br /><br />

    <label>Tuổi:</label>
    <input type="number" name="Age" /><br /><br />

    <label>Mật khẩu:</label>
    <input type="password" name="Password" /><br /><br />

    <button type="submit">Đăng ký</button>
</form>

👉 CHÚ Ý:

  • name="..." phải trùng với tham số trong Action (Name, Email, Age, Password).

  • Dữ liệu nhập được Controller lấy về qua tham số.


3. Tạo form bằng Model

3.1. Tạo Class Model

📂 /Models/UserModel.cs

using System.ComponentModel.DataAnnotations;

namespace DemoApp.Models
{
    public class UserModel
    {
        [Required(ErrorMessage = "Tên là bắt buộc")]
        public string Name { get; set; }

        [Required(ErrorMessage = "Email là bắt buộc")]
        [EmailAddress(ErrorMessage = "Email không hợp lệ")]
        public string Email { get; set; }

        [Range(18, 60, ErrorMessage = "Tuổi từ 18 đến 60")]
        public int Age { get; set; }

        [Required(ErrorMessage = "Mật khẩu là bắt buộc")]
        [DataType(DataType.Password)]
        public string Password { get; set; }
    }
}

👉 Model này định nghĩa các trường cần nhập + validation.


3.2. Tạo Action trong Controller

📂 Admin/Controllers/UserController.cs

using DemoApp.Models;
using Microsoft.AspNetCore.Mvc;

namespace DemoApp.Controllers
{
    public class UserController : Controller
    {
        [HttpGet]
        public IActionResult Register()
        {
            return View();
        }

        [HttpPost]
        public IActionResult Register(UserModel user)
        {
            if (ModelState.IsValid)
            {
                // Dữ liệu hợp lệ -> xử lý (lưu DB, gửi email...)
                ViewBag.Message = $"Đăng ký thành công! Xin chào {user.Name}";
                return View("Success");
            }
            return View(user); // Nếu lỗi -> trả lại form cùng thông báo
        }
    }
}

3.3. Tạo form trong View (Razor Form)

📂 Admin/Views/User/Register.cshtml

@model DemoApp.Models.UserModel

<h2>Đăng ký (Form dùng Model)</h2>

<form asp-action="Register" method="post">
    <div>
        <label asp-for="Name"></label>
        <input asp-for="Name" />
        <span asp-validation-for="Name" class="text-danger"></span>
    </div>

    <div>
        <label asp-for="Email"></label>
        <input asp-for="Email" />
        <span asp-validation-for="Email" class="text-danger"></span>
    </div>

    <div>
        <label asp-for="Age"></label>
        <input asp-for="Age" />
        <span asp-validation-for="Age" class="text-danger"></span>
    </div>

    <div>
        <label asp-for="Password"></label>
        <input asp-for="Password" type="password" />
        <span asp-validation-for="Password" class="text-danger"></span>
    </div>

    <button type="submit">Đăng ký</button>
</form>

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
}

👉 Ở đây:

  • asp-for="..." tự động liên kết với thuộc tính trong Model.

  • asp-validation-for hiển thị lỗi theo DataAnnotation.

  • Validation chạy cả phía server lẫn client.


✅ Vậy là ta đã có:

  1. Form thông thường (HTML thuần): dễ viết, không cần Model, nhưng phải xử lý thủ công.

  2. Form bằng Model: chuẩn MVC, có validation tự động, dễ bảo trì.

Bài tập số 9: WebDaoTao

Yêu cầu:

  • Thực hành lại form đăng nhập đã học.

  • Tạo thêm form đăng ký gồm các trường:

    • Họ và tên (bắt buộc)

    • Email (bắt buộc, định dạng email)

    • Tên đăng nhập (bắt buộc, không trùng lặp)

    • Mật khẩu (bắt buộc, tối thiểu 6 ký tự)

    • Xác nhận mật khẩu (phải trùng với mật khẩu)

    • Số điện thoại (tùy chọn, định dạng số)

    • Ngày sinh (tùy chọn)

Nộp bài:

  • Nén project đã làm và nộp file.