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

📘 Bài giảng: Submit Form trong ASP.NET Core

1. Cơ chế submit trong ASP.NET Core

1.1. Giới thiệu

Form trong web là cách gửi dữ liệu từ client (trình duyệt) lên server.
Trong ASP.NET Core MVC, khi submit, dữ liệu từ <input> được đưa lên server → ASP.NET Core Model Binding sẽ tự động ánh xạ (mapping) dữ liệu này vào tham số hoặc model trong Action.
Cơ chế này giúp ta không cần viết code đọc Request.Form thủ công.

1.2. Code ví dụ

View (ThemMoi.cshtml):

@model WebDemo.Models.TaiKhoanModel

<form asp-action="ThemMoi" method="post">
    <div class="form-group">
        <label asp-for="Username"></label>
        <input asp-for="Username" class="form-control" />
    </div>
    <div class="form-group">
        <label asp-for="Password"></label>
        <input asp-for="Password" class="form-control" type="password" />
    </div>
    <button type="submit" class="btn btn-primary">Đăng ký</button>
</form>

Controller:

public class TaiKhoanController : Controller
{
    [HttpPost]
    public IActionResult ThemMoi(TaiKhoanModel model)
    {
        if (ModelState.IsValid)
        {
            // Xử lý lưu database
            return RedirectToAction("Index");
        }
        return View(model); // Trả lại view nếu có lỗi
    }
}

Model:

public class TaiKhoanModel
{
    public string Username { get; set; }
    public string Password { get; set; }
}

👉 Khi submit, ASP.NET Core tự động bind dữ liệu từ form vào object TaiKhoanModel.

2. Binding dữ liệu

Binding (ràng buộc dữ liệu) có nhiều cách:

2.1. Nhận dữ liệu qua tham số (property đơn lẻ)

[HttpPost]
public IActionResult Save(string username, string password)
{
    // username và password được bind từ input name="username", name="password"
    return Content($"User: {username}, Pass: {password}");
}

2.2. Nhận dữ liệu qua Model

[HttpPost]
public IActionResult Save(TaiKhoanModel model)
{
    return Content($"User: {model.Username}, Pass: {model.Password}");
}

👉 Cách dùng Model được khuyến khích vì:

Gọn code, dễ validate.
Hỗ trợ annotation [Required], [StringLength], [DataType]…

2.3. Lấy dữ liệu trực tiếp từ Request

[HttpPost]
public IActionResult Save()
{
    var username = Request.Form["username"];
    var password = Request.Form["password"];
    return Content($"User: {username}, Pass: {password}");
}

👉 Cách này ít dùng, chỉ khi form động hoặc input không cố định.

3. Các kiến thức quan trọng khi submit form

3.1. Method (GET vs POST)

GET: gửi dữ liệu qua query string (URL). Không an toàn, phù hợp tìm kiếm.
POST: gửi dữ liệu qua body request. An toàn hơn, dùng cho form thêm/sửa dữ liệu.

Ví dụ:

<form asp-action="Save" method="post">

3.2. Action

asp-action="Save": chỉ định action method sẽ xử lý submit.
Có thể chỉ rõ controller, area:

<form asp-action="Save" asp-controller="TaiKhoan" asp-area="Admin">

3.3. Validation (Server)

Dùng annotation để kiểm tra dữ liệu:

public class TaiKhoanModel
{
    [Required(ErrorMessage = "Tên đăng nhập bắt buộc")]
    public string Username { get; set; }

    [Required]
    [StringLength(20, MinimumLength = 6, ErrorMessage = "Mật khẩu 6-20 ký tự")]
    public string Password { get; set; }
}

Trong Controller:

if (!ModelState.IsValid)
{
    return View(model); // Nếu sai, trả lại view kèm lỗi
}

3.4. Anti-Forgery Token (CSRF Protection)

CSRF = Cross-Site Request Forgery → hacker giả form để gửi request trái phép.
ASP.NET Core bảo vệ mặc định bằng AntiForgeryToken.
Trong view, thêm:

<form asp-action="Save" method="post">
    @Html.AntiForgeryToken()
    ...
</form>

Trong action:

[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Save(TaiKhoanModel model) { ... }

👉 Nếu thiếu token → request POST sẽ bị từ chối (400 Bad Request).

3.5. Cho phép nhập HTML trong form (ValidateInput)

Mặc định ASP.NET Core sẽ ngăn chặn HTML/script trong input để chống XSS.
Nếu bạn muốn nhận HTML (ví dụ nhập nội dung bài viết), dùng [AllowHtml] (ASP.NET MVC cũ) hoặc trong ASP.NET Core là:

[AllowAnonymous]
public class BaiVietModel
{
    [BindProperty]
    [ValidateNever] // Bỏ qua validation mặc định
    public string NoiDung { get; set; }
}

Hoặc trong Razor:

<textarea asp-for="NoiDung"></textarea>

🎯 Tóm tắt

Submit form trong ASP.NET Core dựa trên Model Binding.
Có 3 cách nhận dữ liệu: tham số, model, request form.
Các kiến thức quan trọng: method, action, ModelState, validation, CSRF token, và cho phép/không cho phép HTML input.

Checklist các mục cần chuẩn bị PDF · 1.2MB

Tải xuống
Tài nguyên chính thức của Facebook Link ngoài

Mở link

Bài tập số 10: WebDaoTao

Yêu cầu:

Thực hành lại form đăng ký, bao gồm:
- Hiển thị form đăng ký với 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)

Xử lý dữ liệu sau khi submit:

Nhận dữ liệu từ form gửi lên (POST request).
Kiểm tra tính hợp lệ của dữ liệu:
- Các trường bắt buộc không được để trống.
- Email phải đúng định dạng.
- Tên đăng nhập không được trùng với tài khoản đã có.
- Mật khẩu phải có ít nhất 6 ký tự.
- Xác nhận mật khẩu phải trùng với mật khẩu.
Xử lý khi dữ liệu không hợp lệ:
- Hiển thị lại form với thông báo lỗi cụ thể.
- Giữ nguyên dữ liệu đã nhập để người dùng không phải nhập lại.
Phản hồi sau khi đăng ký thành công: Hiển thị thông báo đăng ký thành công.

Nộp bài:

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