CRUD編輯畫面

2021-03-09

811
0
軟體積木
2021-03-20

建立一個 CRUD 編輯畫面

延續在 [CRUD 清單畫面] 的說明，在這裡我們要繼續介紹如何來建立一個 CRUD 編輯畫面。這裡面 [欄位維護] 的編輯畫面用來維護 Column 這一個資料表，相對簡單許多；除此之外，我們也會介紹 [資料表維護] 的編輯畫面，它會同時維護 Table、Column ２個資料表，在應用上有比較大的彈性。

資料庫文件系統裡面的 [欄位維護] 的編輯畫面如下：

在建立這樣的功能時，程式員需要處理的工作與相關檔案的對應關係如下：
Controllers/ColumnController.cs：controller
Services/ColumnEdit.cs：設定要維護的欄位清單
Views/Column/Edit.cshtml：編輯畫面UI

ColumnController.cs

以下是編輯畫面需要用到的功能：

//顯示編輯畫面
public ActionResult Edit()
{
    return View();
}

//傳回一筆資料
public ContentResult GetJson(string key)
{
    return Content(new ColumnEdit().GetJson(key).ToString(), _Web.AppJson, Encoding.UTF8);
}

//儲存新增的資料
public JsonResult Create(string json)
{
    return Json(new ColumnEdit().Create(_Json.StrToJson(json)));
}

//儲存修改的資料
public JsonResult Update(string key, string json)
{
    return Json(new ColumnEdit().Update(key, _Json.StrToJson(json)));
}

//刪除一筆資料
public JsonResult Delete(string key)
{
    return Json(new ColumnEdit().Delete(key));
}

ColumnEdit.cs

以下是這個檔案主要的程式碼，其中 GetDto 用來設定編輯欄位清單和屬性，GetJson 用來傳回一筆待編輯的資料：

        //設定編輯欄位
        private EditDto GetDto()
        {
            return new EditDto()
            {                
                Table = "dbo.[Column]",
                PkeyFid = "Id",   //primary key 欄位id
                Col4 = null,
                Items = new EitemDto[] {
                    new EitemDto() { Fid = "Id" },
                    new EitemDto() { Fid = "Code" },
                    new EitemDto() { Fid = "Name" },
                    new EitemDto() { Fid = "Status" },
                    new EitemDto() { Fid = "Note" },
                },
            };
        }

        //傳回一筆資料
        public JObject GetJson(string key)
        {
            return _Db.GetJson(@"
Select 
    p.Code as ProjectCode, t.Code as TableCode,
    c.*
From dbo.[Column] c
inner join dbo.[Table] t on t.Id=c.TableId
inner join dbo.Project p on p.Id=t.ProjectId
where c.Id=@Id
", new List<object>() { "Id", key });
        }

Edit.cshtml

以下是編輯畫面的欄位清單，如同清單畫面，這裡使用了 .Net Core View Component：

<form id='eform' class='xg-form'>
    @await Component.InvokeAsync("XiHide", new { fid = "Id" })
    @await Component.InvokeAsync("XiRead", new { title = "專案代碼", fid = "ProjectCode" })
    @await Component.InvokeAsync("XiRead", new { title = "資料表", fid = "TableCode" })
    @await Component.InvokeAsync("XiRead", new { title = "欄位", fid = "Code" })
    @await Component.InvokeAsync("XiText", new { title = "欄位名稱", fid = "Name", maxLen = 30, required = true })
    @await Component.InvokeAsync("XiRead", new { title = "資料型態", fid = "DataType" })
    @await Component.InvokeAsync("XiCheck", new { title = "資料狀態", fid = "Status", isCheck = true, value = "1", label = "啟用" })
    @await Component.InvokeAsync("XiText", new { title = "說明", fid = "Note", maxLen = 30 })
</form>
@await Component.InvokeAsync("XgSaveBack")