🛠 Bài thực hành: Submit Form Thêm Mới Video (ASP.NET Core MVC)

🎯 Mục tiêu

• Biết cách tạo model dữ liệu cho video.

• Biết cách xây dựng form HTML thuần để nhập dữ liệu.

• Hiểu cơ chế submit POST và lấy dữ liệu từ form.

• Thực hành kiểm tra dữ liệu (validate) bằng code trong controller.

1️⃣ Các bước công việc phải làm

Bước 1: Tạo Model Video

• Tạo class Video chứa các thuộc tính:
  ID, KhoaHoc, TenVideo, MoTa, HinhAnh, FileVideo, ThoiLuong, ThoiGianDang.

• Model này là nơi lưu trữ dữ liệu từ form gửi lên.

Bước 2: Tạo Controller VideoController

• Tạo action ThemMoi (GET) để hiển thị form nhập.

• Tạo action ThemMoi (POST) để nhận dữ liệu từ form.

• Trong action POST:

  • Lấy dữ liệu từ Request.Form.

  • Tự viết code validate (ví dụ: không để trống, thời lượng phải > 0, v.v.).

  • Nếu hợp lệ → xử lý lưu DB (hoặc demo: in ra).

  • Nếu sai → trả lại view + thông báo lỗi.

Bước 3: Tạo View ThemMoi.cshtml

• Tạo form HTML thuần (<form method="post">).

• Có các ô nhập dữ liệu cho: Khóa học, Tên video, Mô tả, Hình ảnh, File video, Thời lượng, Thời gian đăng.

• Thêm nút Submit để gửi form.

Bước 4: Kiểm tra kết quả

• Chạy project → mở /Video/ThemMoi.

• Nhập dữ liệu → Submit.

• Xem controller nhận dữ liệu và hiển thị thông báo.

2️⃣ Code minh họa

🔹 Model: Video.cs

namespace WebDemo.Models
{
    public class Video
    {
        public int ID { get; set; }
        public string KhoaHoc { get; set; }
        public string TenVideo { get; set; }
        public string MoTa { get; set; }
        public string HinhAnh { get; set; }
        public string FileVideo { get; set; }
        public int ThoiLuong { get; set; }
        public DateTime ThoiGianDang { get; set; }
    }
}

🔹 Controller: VideoController.cs

using Microsoft.AspNetCore.Mvc;
using WebDemo.Models;
using System;

namespace WebDemo.Controllers
{
    public class VideoController : Controller
    {
        // Bước 1: Hiển thị form nhập
        public IActionResult ThemMoi()
        {
            return View();
        }

        // Bước 2: Nhận dữ liệu submit
        [HttpPost]
        public IActionResult ThemMoiPost()
        {
            // Lấy dữ liệu từ form
            var khoaHoc = Request.Form["KhoaHoc"].ToString();
            var tenVideo = Request.Form["TenVideo"].ToString();
            var moTa = Request.Form["MoTa"].ToString();
            var hinhAnh = Request.Form["HinhAnh"].ToString();
            var fileVideo = Request.Form["FileVideo"].ToString();
            var thoiLuongStr = Request.Form["ThoiLuong"].ToString();
            var thoiGianDangStr = Request.Form["ThoiGianDang"].ToString();

            // Validate thủ công
            string error = "";
            if (string.IsNullOrEmpty(khoaHoc)) error += "Khóa học không được để trống.<br/>";
            if (string.IsNullOrEmpty(tenVideo)) error += "Tên video không được để trống.<br/>";
            if (!int.TryParse(thoiLuongStr, out int thoiLuong) || thoiLuong <= 0)
                error += "Thời lượng phải là số > 0.<br/>";
            if (!DateTime.TryParse(thoiGianDangStr, out DateTime thoiGianDang))
                error += "Ngày đăng không hợp lệ.<br/>";

            if (!string.IsNullOrEmpty(error))
            {
                ViewBag.Error = error;
                return View("ThemMoi"); // trả lại form
            }

            // Nếu ok thì tạo object Video
            var video = new Video
            {
                KhoaHoc = khoaHoc,
                TenVideo = tenVideo,
                MoTa = moTa,
                HinhAnh = hinhAnh,
                FileVideo = fileVideo,
                ThoiLuong = thoiLuong,
                ThoiGianDang = thoiGianDang
            };

            // Thực tế: lưu DB
            // demo: in ra màn hình
            return Content($"Đã nhận video: {video.TenVideo}, Khóa học: {video.KhoaHoc}, Thời lượng: {video.ThoiLuong} phút");
        }
    }
}

🔹 View: ThemMoi.cshtml

@{
    ViewData["Title"] = "Thêm Mới Video";
}

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

@if (ViewBag.Error != null)
{
    <div style="color:red">@Html.Raw(ViewBag.Error)</div>
}

<form method="post" action="/Video/ThemMoiPost">
    <div>
        <label>Khóa học</label>
        <input type="text" name="KhoaHoc" />
    </div>

    <div>
        <label>Tên video</label>
        <input type="text" name="TenVideo" />
    </div>

    <div>
        <label>Mô tả</label>
        <textarea name="MoTa"></textarea>
    </div>

    <div>
        <label>Hình ảnh</label>
        <input type="text" name="HinhAnh" />
    </div>

    <div>
        <label>File video</label>
        <input type="text" name="FileVideo" />
    </div>

    <div>
        <label>Thời lượng (phút)</label>
        <input type="number" name="ThoiLuong" />
    </div>

    <div>
        <label>Thời gian đăng</label>
        <input type="date" name="ThoiGianDang" />
    </div>

    <button type="submit">Lưu</button>
</form>

Bài tập số 12: WebDaoTao

Áp dụng kiến thức về submit form, model binding và validate bằng code để xây dựng chức năng quản lý học viên.

1. Thêm học viên

• Hiển thị form nhập thông tin học viên với các trường:

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

  • Email (bắt buộc, định dạng hợp lệ)

  • Số điện thoại (tùy chọn, nhưng nếu nhập thì phải đúng 10 số)

  • Ngày sinh (bắt buộc)

  • Khóa học (bắt buộc)

  • Địa chỉ (tùy chọn)

• Khi submit:

  • Kiểm tra dữ liệu đầu vào (validate thủ công trong Controller).

  • Nếu hợp lệ → lưu vào database.

  • Nếu sai → trả lại form và hiển thị thông báo lỗi.

2. Danh sách học viên

• Hiển thị danh sách tất cả học viên đã thêm.

• Mỗi dòng hiển thị: Họ tên, Email, Số điện thoại, Ngày sinh, Khóa học, Địa chỉ.

• Có nút Thêm mới để quay lại form thêm học viên.

Gợi ý Model HocVien

public class HocVien
{
    public int ID { get; set; }
    public string HoTen { get; set; }
    public string Email { get; set; }
    public string SoDienThoai { get; set; }
    public DateTime NgaySinh { get; set; }
    public string KhoaHoc { get; set; }
    public string DiaChi { get; set; }
}

Nộp bài

• Nén toàn bộ project WebDaoTao đã làm.

• Đặt tên file: BaiTap12_WebDaoTao_HocVien.zip.

• Nộp theo hướng dẫn của giảng viên.