[ASP.NET] Nhận dữ liệu từ HTML Page và hiện thị dạng bảng

Đăng vào Tác giả Nguyễn Tiến Trường

Tạo web form cho phép nhập thông tin nhân viên truyền đến Xuly.aspx. Thực hiện nhận dữ liệu từ HTML Page và hiển thị ra danh sách dạng bảng (hàng x cột) asp net.

Yêu cầu

Trong VS.Net, tạo Web Site/Web Application project đặt tại D:\Web11. Trong Web Site trên:

  1. Thêm class Nhanvien (Hoten, Namsinh & các phương thức cần thiết)
  2. Thêm Global.axax; trong Session_Start khởi tạo 1 biến Session[“danhsach”]
  3. Thêm 1 HTML Page: MyForm.htm cho phép nhập thông tin Nhanvien để gửi đến Xuly.aspx.
  4. Thêm 1 Web Form (Xuly.aspx):
    • a. Nhận dữ liệu do MyForm gửi lên
    • b. Tạo mới 1 đối tượng Nhanvien, thêm vào danh sách
    • c. Hiện toàn bộ danh sách nhân viên ra dạng bảng (hàng x cột)

Form HTML Page nhập thông tin nhân viên ASP.net

Hiện thị danh sách nhân viên dạng bảng asp.net

Hướng dẫn thực hiện

1. Thêm class NhanVien

  • Tạo 1 file NhanVien.cs.
  • File này có các phương thức truy cập get và set để đọc và ghi dữ liệu. Từ đó có thể truy cập thông tin liên quan đến nhân viên trong một đối tượng của lớp “NhanVien”.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Web11
{
    public class NhanVien
    {
        string id;
        string tenNV;
        string namSinh;
        string luong;

        public string Id { get => id; set => id = value; }
        public string TenNV { get => tenNV; set => tenNV = value; }
        public string NamSinh { get => namSinh; set => namSinh = value; }
        public string Luong { get => luong; set => luong = value; }
    }
}

2. Thêm Global.axax

  • Tạo lớp Global.
  • Session_Start: Sự kiện này xảy ra khi một phiên (session) mới được bắt đầu. Trong sự kiện này, một biến Session có tên “danhsach” được khởi tạo dưới dạng một danh sách (List) trống của đối tượng “NhanVien”. Điều này cho phép lưu trữ danh sách nhân viên trong phiên làm việc của người dùng.
namespace Web11
{
    public class Global : System.Web.HttpApplication
    {

        protected void Application_Start(object sender, EventArgs e)
        {

        }

        protected void Session_Start(object sender, EventArgs e)
        {
            Session["danhsach"] = new List<NhanVien>();
            
        }
        ...
}

3. Thêm 1 HTML Page

Tạo MyForm.htm cho phép nhập thông tin Nhanvien để gửi đến Xuly.aspx.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link href="style.css" rel="stylesheet" />
    <title>Nhân Viên</title>
</head>
<body>
    <form action="XuLy.aspx" method="post" onsubmit="return check()">
        <table border="1" style="margin:0 auto; border-collapse:collapse;" >
            <tr>
                <td class="form">
                    <div class="form-row">
                        <label class="form-label" for="id">ID:</label>
                        <input class="form-input" type="text" name="id" id="input-id" value="" />

                    </div>
                    <div class="err" id="err_id"></div>

                    <div class="form-row">
                        <label class="form-label" for="input-tennv">Tên nhân viên:</label>
                        <input class="form-input" type="text" name="tennv" id="input-tennv" value="" />

                    </div>
                    <div class="err" id="err_tennv"></div>

                    <div class="form-row">
                        <label class="form-label" for="input-namsin">Năm sinh:</label>
                        <input class="form-input" type="text" name="namsinh" id="input-namsinh" value="" />

                    </div>
                    <div class="err" id="err_namsinh"></div>

                    <div class="form-row">
                        <label class="form-label" for="input-luong">Lương:</label>
                        <input class="form-input" type="number" name="luong" id="input-luong" value="" />

                    </div>
                    <div class="err" id="err_luong"></div>

                    <div class="form-btn">
                        <button class="btn" onclick="huy()" type="button">Huỷ</button>
                        <input class="btn" type="submit" name="save" id="save" value="Gửi" />
                    </div>
                </td>
            </tr>
        </table>
    </form>
    <script src="main.js"></script>
</body>
</html>

4. Tạo file main.js bắt lỗi sự kiện

function check() {
    var id = document.getElementById('input-id').value;
    var tenNV = document.getElementById('input-tennv').value;
    var namSinh = document.getElementById('input-namsinh').value;
    var luong = document.getElementById('input-luong').value;

    var err_id = document.getElementById('err_id');
    var err_tennv = document.getElementById('err_tennv');
    var err_namsinh = document.getElementById('err_namsinh');
    var err_luong = document.getElementById('err_luong');

    // Kiểm tra trùng lặp ID
    var check_id = document.getElementsByClassName('check_id');
    for (var i = 0; i < check_id.length; i++) {
        if (check_id[i].innerHTML === id) {
            err_id.innerHTML = "Nhân viên đã tồn tại!";
            return false; // Dừng việc gửi form
        }
    }

    if (id === '') {
        err_id.innerHTML = "Không được để trống";
    } else {
        err_id.innerHTML = "";
    }

    if (tenNV === '') {
        err_tennv.innerHTML = "Không được để trống";
    } else {
        err_tennv.innerHTML = "";
    }

    if (namSinh === '') {
        err_namsinh.innerHTML = "Không được để trống";
    } else if (isNaN(parseInt(namSinh))) {
        err_namsinh.innerHTML = "Sai định dạng năm sinh";
    } else {
        err_namsinh.innerHTML = "";
    }

    if (luong === '') {
        err_luong.innerHTML = "Không được để trống";
    } else if (isNaN(parseInt(luong))) {
        err_luong.innerHTML = "Sai định dạng lương";
    } else {
        err_luong.innerHTML = "";
    }

    if (err_id.innerHTML.trim() === '' && err_tennv.innerHTML.trim() === '' && err_namsinh.innerHTML.trim() === '' && err_luong.innerHTML.trim() === '') {
        return true;
    }

    return false;
}

function huy() {
    document.getElementById('input-id').value = '';
    document.getElementById('input-tennv').value = '';
    document.getElementById('input-namsinh').value = '';
    document.getElementById('input-luong').value = '';

    var err_id = document.getElementById('err_id');
    var err_tennv = document.getElementById('err_tennv');
    var err_namsinh = document.getElementById('err_namsinh');
    var err_luong = document.getElementById('err_luong');

    err_id.innerHTML = '';
    err_tennv.innerHTML = '';
    err_namsinh.innerHTML = '';
    err_luong.innerHTML = '';
}

5. File style.css

.form{
    padding: 24px;
}

.form-row{
    padding: 8px 0px;
    display: flex;
}

.form-label{
    min-width: 120px;
}

.form-input{
    min-width:200px;
    height: 20px;
    border: 1px solid #000;
    outline:none;
}

.form-btn{
    float:right;
    padding-top: 12px;
}

.form-btn .btn{
    height: 25px;
    outline:none;
    border: 1px solid #000;
    background: #000;
    color: #fff;
    margin-left: 12px;
    min-width: 60px;
}

    .form-btn .btn:hover{
        background-color: #fff;
        color:#000;
    }

form table tr td.form .err{
    color:red;
    padding-left:120px;
}

6. Thêm 1 Web Form (Xuly.aspx):

6.1 Nhận dữ liệu do MyForm gửi lên

  • File Xuly.aspx
  • Trang “XuLy.aspx” này sẽ được xử lý ở phía máy chủ và có chức năng hiển thị thông báo lỗi, liên kết “Trở lại” và bảng dữ liệu trong phần thân của trang.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="XuLy.aspx.cs" Inherits="Web11.XuLy" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div id="err" name="err" runat="server">

         </div>
        <p><a href="../MyForm.html">Trở lại</a></p>

        <div id="bang" name="bang" runat="server">
            
        </div>
    </form>
</body>
</html>

6.2 Tạo mới NHanVien, thêm vào danh sách và Hiện toàn bộ danh sách nhân viên ra dạng bảng (hàng x cột)

  • File Xuly.aspx.cs
  • Quản lý việc thêm và hiển thị danh sách nhân viên trong trang “XuLy.aspx” của ứng dụng web ASP.NET.
  • Phương thức IsDuplicateNhanVien: Đây là một phương thức riêng tư (private) để kiểm tra xem có sự trùng lặp ID của nhân viên trong danh sách “ds” hay không. Nếu có, phương thức trả về true, ngược lại trả về false.
  • Phương thức Page_Load: Đây là phương thức xử lý sự kiện Page_Load, tức là khi trang “XuLy.aspx” được tải. Trong phương thức này:
    • Kiểm tra xem biến Session “danhsach” đã được khởi tạo chưa. Nếu chưa, nó sẽ được khởi tạo dưới dạng một danh sách trống của đối tượng “NhanVien”.
    • Thu thập dữ liệu về nhân viên từ yêu cầu gửi lên bằng phương thức POST, bao gồm ID, tên nhân viên, năm sinh và lương.
    • Tạo một đối tượng “NhanVien” mới và gán các thông tin được thu thập từ yêu cầu vào đối tượng này.
    • Lấy danh sách nhân viên từ biến Session “danhsach”.
    • Kiểm tra xem có trùng lặp ID của nhân viên trong danh sách hay không bằng phương thức IsDuplicateNhanVien. Nếu có, sẽ hiển thị thông báo lỗi và thoát khỏi phương thức.
    • Nếu không trùng lặp, đối tượng “NhanVien” sẽ được thêm vào danh sách, và danh sách sẽ được cập nhật trong biến Session “danhsach”.
    • Tạo chuỗi HTML để hiển thị danh sách nhân viên dưới dạng bảng và gán nó vào phần tử có id là “bang” để hiển thị trên trang.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Web11
{
    public partial class XuLy : System.Web.UI.Page
    {
        private bool IsDuplicateNhanVien(string id, List<NhanVien> ds)
        {
            foreach (NhanVien nv in ds)
            {
                if (nv.Id == id)
                {
                    return true; // Trùng ID
                }
            }
            return false; // Không trùng ID
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            if (Session["danhsach"] == null)
            {
                Session["danhsach"] = new List<NhanVien>();
            }

            string id = Request.Form["id"];
            string tennv = Request.Form["tennv"];
            string namSinh = Request.Form["namsinh"];
            string luong = Request.Form["luong"];

            NhanVien nv = new NhanVien();
            nv.Id = id;
            nv.TenNV = tennv;
            nv.NamSinh = namSinh;
            nv.Luong = luong;

            List<NhanVien> ds = (List<NhanVien>)Session["danhsach"];

            if (IsDuplicateNhanVien(id, ds))
            {
                string loi = "<p>Nhân viên đã tồn tại!</p>";
                err.InnerHtml = loi;
                return;
            }


            ds.Add(nv);
            Session["danhsach"] = ds;

            string chuoi = "<table border='1' style='margin: 0 auto;border-collapse: collapse; width: 60%;'>";
            chuoi += "<tr>";
            chuoi += "<td>STT</td>";
            chuoi += "<td>ID</td>";
            chuoi += "<td>Tên nhân viên</td>";
            chuoi += "<td>Năm sinh</td>";
            chuoi += "<td>Lương</td>";
            chuoi += "</tr>";
            int i = 1;

            foreach (NhanVien nhanVien in ds)
            {
                chuoi += "<tr>";
                chuoi += "<td>" + (i++) + "</td>";
                chuoi += "<td>" + nhanVien.Id + "</td>";
                chuoi += "<td>" + nhanVien.TenNV + "</td>";
                chuoi += "<td>" + nhanVien.NamSinh + "</td>";
                chuoi += "<td>" + nhanVien.Luong + "</td>";
                chuoi += "</tr>";
            }

            chuoi += "</table>";
            bang.InnerHtml = chuoi;
        }
    }
}

Đây là hướng dẫn tạo một ứng dụng web ASP.NET để quản lý thông tin nhân viên. Trang web cung cấp một giao diện cho phép người dùng nhập thông tin nhân viên và hiển thị danh sách nhân viên dưới dạng bảng trên màn hình. Chương trình thuộc chuỗi bài tập thực hành môn lập trình web. Cảm ơn các bạn đã tham khảo trên ttnguyen.net.

Nguyễn Tiến Trường

Mình viết về những điều nhỏ nhặt trong cuộc sống, Viết về câu chuyện những ngày không có em