.net5 core Razor項目實戰系列之六：部門管理功能的實現（新增和修改功能）

本篇實現新增和修改的功能。

在部門列表頁增加一個新增按鈕，用戶點擊后彈出一個新增部門的頁面 DeptEdit.cshtml，

考慮到修改部門信息的時候可以復用此頁面，故在新增的時候傳遞一個參數 deptid=0，

在列表頁每行的末尾增加一個修改按鈕，點擊的時候調用 DeptEdit.cshtml 頁面並傳值 deptid=xxx，

這樣在DeptEdit.cshtml 頁可以通過判斷是否 deptid>0 來決定頁面是做新增還是修改的操作，列表頁的效果如下：

 

DeptList.cshtml頁面代碼如下（見紅色部分）：

@page
@model AuthManagement.Pages.Auth.DeptListModel
@using AuthManagement.DbUtil.Entity
@{
    ViewData["Title"] = "部門管理";
}

<table border="1" width="60%">
    <tr style="background-color:antiquewhite;height:40px;">
        <td>編號</td>
        <td>名稱</td>
        <td>創建時間</td>
        <td><a href="/Auth/DeptEdit?deptid=0" target="_blank">新增部門</a></td>
    </tr>
    @foreach (TDept item in Model.DeptList) //遍歷輸出部門信息
    {
    <tr style="height:30px;">
        <td>@item.DeptId</td>
        <td>@item.DeptName</td>
        <td>@item.CreateTime</td>
        <td>
            <a href="/Auth/DeptEdit?deptid=@item.DeptId" target="_blank">修改</a>&nbsp;&nbsp;&nbsp; <a href="/Auth/DeptList?deptid=@item.DeptId" target="_self" onclick="return confirm('確定要作廢嗎？');">作廢</a>        
        </td>
    </tr>
    }
    @if (Model.DeptList.Count == 0)
    {
        <tr style="height:30px;">
            <td colspan="4" align="center">沒有查詢到部門數據！</td>
        </tr>
    }
</table>

 

在Auth文件夾下新增 DeptEdit.cshtml 文件，代碼如下：

@page
@model AuthManagement.Pages.Auth.DeptEditModel
@{
    Layout = null; //本頁面不需要使用布局頁，設為null就可以了
}

<form method="post"> <!--這里不用加 action 屬性，因為按 Razor 的規則，以Post方式提交的表單，自動匹配到.cs文件中的OnPost()方法-->

    <table style="width:400px;border-collapse: collapse;border: solid 1px #c0c0c0;">
        <tr style="background-color:antiquewhite;height:40px;">
            <td>&nbsp; @Model.SubjectName</td>
        </tr>
        <tr style="height:30px;border:solid 1px #c0c0c0;"> 
            <td style="font-size:15px;">
                &nbsp;&nbsp;&nbsp; 部門名稱：
                <input type="text" style="font-size:15px;" size="25" maxlength="10" name="deptname" value="@Model.DeptName" />
            </td>
        </tr>
        <tr style="height:30px;border:solid 1px #c0c0c0;">
            <td align="center">
                <button type="submit">保存</button>&nbsp;&nbsp;&nbsp;
                <button onclick="javascript: window.close();">關閉</button>
            </td>
        </tr>
    </table>

</form>

 

DeptEdit.cshtml.cs中的編碼如下：

namespace AuthManagement.Pages.Auth
{
    public class DeptEditModel : PageModel
    {
        private readonly AuthDbContext _context;

        //構造函數中對AuthDbContext做依賴注入
        public DeptEditModel(AuthDbContext context)
        {
            _context = context;
        }

        public string SubjectName { get; set; } // 將主題信息傳遞到頁面中，賦值在OnGet()完成 public string DeptName { get; set; } //將部門信息傳遞到頁面中，主要用於修改的時候將部門名稱初始化到輸入框 public void OnGet()
        {
            SubjectName = "新增部門";
            DeptName = "";
            string deptId = Request.Query["deptid"];
            if (int.TryParse(deptId, out int did))
            {
                if (did > 0) 
                { 
                    SubjectName = "修改部門";
                    //如果是點修改進來的就根據部門編號到數據庫拿到部門信息后初始化部門名稱
                    TDept dept = _context.TDepts.Find(did);
                    DeptName = dept.DeptName;                
                }
            }
        }
    }
}

 

運行頁面，點新增時畫面如下：

點修改時畫面如下：

 

當用戶輸入部門名稱后點"保存"按鈕，代碼如下：

　　　　 public void OnPost()
        {
            string deptName = Request.Form["deptname"];
            string deptId = Request.Query["deptid"];
            if (int.TryParse(deptId, out int did))
            {
                if (did > 0) //傳遞過來的deptid值 >0 則修改，否則新增。
                {
                    ModifyDept(did, deptName);
                }
                else
                {
                    int newDeptId = AddDept(deptName);
                    deptId = newDeptId.ToString();
                }
            }
            //執行完之后讓頁面重新加載一下避免用戶刷新的時候數據再次回傳
            Response.Redirect("/Auth/DeptEdit?deptid="+ deptId);
        }

　　　　 //新增部門 private int AddDept(string deptName)
        {
            TDept dept = new TDept
            {
                DeptName = deptName,
                IsValid = 1,
                CreateTime = DateTime.Now
            };
            _context.TDepts.Add(dept);
            _context.SaveChanges();            

　　　　　　 return dept.DeptId; //返回部門編號以便OnPost()中刷新頁面的時候顯示剛新增的這個部門名稱
        }

　　　　 //修改部門 private void ModifyDept(int deptId, string deptName)
        {
            //設置序列化時的對中文的編碼方式
            JsonSerializerOptions options = new JsonSerializerOptions
            {
                Encoder = JavaScriptEncoder.Create(UnicodeRanges.All),
            };

            List<TLog> logList = GenerateLog(); //初始化包含2條日志信息的列表

            //先找出要更改的實體
            TDept dept = _context.TDepts.Find(deptId);

            //將更改前的數據序列化成json后記錄下來
            logList[0].TableData = JsonSerializer.Serialize<TDept>(dept, options);

            //給要更改的屬性賦值
            dept.DeptName = deptName;
            dept.ModifyTime = DateTime.Now;

            //將更改后的數據序列化成json后記錄下來
            logList[1].TableData = JsonSerializer.Serialize<TDept>(dept, options);

　　　　　　  //保存數據到t_log表
            _context.TLogs.AddRange(logList);

            //將更改保存到數據庫
            _context.SaveChanges();
        }


        /// <summary>
        /// 將更改前和更改后的數據保存到t_log表
        /// </summary>
        /// <returns></returns>
        private List<TLog> GenerateLog()
        {
            string batchNo = Guid.NewGuid().ToString();
            TLog beforeLog = new TLog
            {
                UserId = 6,//因為沒有做登錄功能無法獲取 UserID 和 UserName，先寫死，后續增加登錄功能后再修改這里。
                UserName = "趙六",
                BatchNo = batchNo,
                TableName = "t_dept",
                TableData = "",
                LogTime = DateTime.Now
            };
            TLog afterLog = new TLog
            {
                UserId = 6,
                UserName = "趙六",
                BatchNo = batchNo,
                TableName = "t_dept",
                TableData = "",
                LogTime = DateTime.Now
            };

            List<TLog> logList = new List<TLog>();
            logList.Add(beforeLog);
            logList.Add(afterLog);

            return logList;
        }