CRUD編輯畫面

建立一個 CRUD 編輯畫面

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

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

在建立這樣的功能時,程式員需要處理的工作與相關檔案的對應關係如下:
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")

 

維護多個資料表

以 [資料表維護] 的編輯畫面為例,它的編輯畫面如下圖,上方是 Table 欄位,下方是多筆的 Column 欄位:
 

在實作上,它有3個地方與 [欄位維護] 不同:

1.Services/TableEdit.cs 設定多個資料表的欄位,如下:
 

2.Views/Table/Edit.cshtml 加入第2個要維護的資料表欄位,如下:
 

3.wwwroot/js/Table.js 初始化時加上第2個資料表:
 

以上實作步驟,包含大部分 CRUD 清單畫面和維護畫面的實際狀況,這表示一個管理系統大部分的功能,你已經可以透過這種方式來完成。