ASP.NET MVC4 + EF5 + EasyUI + Unity2.x 後台管理系統實戰（九）：實現增刪改查與工具列優化

前言

在前一講中，我們已經完成了 EasyUI DataGrid 的分頁功能。本講將重點放在如何結合 MVC 與 EasyUI 實現完整的增刪改查（CRUD）操作，並優化工具列以利後續權限控管擴充。

工具列 HTML 結構

雖然 EasyUI DataGrid 內建工具列設定，但為了未來權限控制的靈活性，我們將工具列獨立提取。以下是調整後的工具列 HTML，包含查詢、新增、編輯、詳細、刪除、導出與重新整理按鈕：

<div class="mvctool">
  <input id="txtQuery" type="text" class="searchText">
  <a id="btnQuery" style="float: left;" class="l-btn l-btn-plain"><span class="l-btn-left"><span class="l-btn-text icon-search" style="padding-left: 20px;">查詢</span></span></a>
  <div class="datagrid-btn-separator"></div>
  <a id="btnCreate" style="float: left;" class="l-btn l-btn-plain"><span class="l-btn-left"><span class="l-btn-text icon-add" style="padding-left: 20px;">新增</span></span></a>
  <div class="datagrid-btn-separator"></div>
  <a id="btnEdit" style="float: left;" class="l-btn l-btn-plain"><span class="l-btn-left"><span class="l-btn-text icon-edit" style="padding-left: 20px;">編輯</span></span></a>
  <div class="datagrid-btn-separator"></div>
  <a id="btnDetails" style="float: left;" class="l-btn l-btn-plain"><span class="l-btn-left"><span class="l-btn-text icon-details" style="padding-left: 20px;">詳細</span></span></a>
  <div class="datagrid-btn-separator"></div>
  <a id="btnDelete" style="float: left;" class="l-btn l-btn-plain"><span class="l-btn-left"><span class="l-btn-text icon-remove" style="padding-left: 20px;">刪除</span></span></a>
  <div class="datagrid-btn-separator"></div>
  <a id="btnExport" style="float: left;" class="l-btn l-btn-plain"><span class="l-btn-left"><span class="l-btn-text icon-export" style="padding-left: 20px;">導出</span></span></a>
  <a id="btnReload" style="float: left;" class="l-btn l-btn-plain"><span class="l-btn-left"><span class="l-btn-text icon-reload" style="padding-left: 20px;">刷新</span></span></a>
</div>

樣式已包含於附件代碼中，有能力的開發者可進一步優化視覺風格。

jQuery 事件綁定與 CRUD 邏輯

透過 jQuery 為各按鈕綁定點擊事件，實現新增、編輯、詳細、查詢與刪除功能。導出與重新整理按鈕暫不實作。以下為核心 JavaScript 代碼：

<script type="text/javascript">
// iframe 關閉回呼
function frameReturnByClose() {
  $("#modalwindow").window('close');
}
// iframe 關閉並重新載入資料
function frameReturnByReload(flag) {
  if (flag) $("#List").datagrid('load');
  else $("#List").datagrid('reload');
}
// 顯示訊息提示
function frameReturnByMes(mes) {
  $.messageBox5s('提示', mes);
}

$(function () {
  // 新增按鈕
  $("#btnCreate").click(function () {
    $("#modalwindow").html("<iframe width='100%' height='98%' scrolling='no' frameborder='0' src='/SysSample/Create'></iframe>");
    $("#modalwindow").window({ title: '新增', width: 700, height: 400, iconCls: 'icon-add' }).window('open');
  });

  // 編輯按鈕
  $("#btnEdit").click(function () {
    var row = $('#List').datagrid('getSelected');
    if (row != null) {
      $("#modalwindow").html("<iframe width='100%' height='99%' frameborder='0' src='/SysSample/Edit?id=" + row.Id + "&Ieguid=" + GetGuid() + "'></iframe>");
      $("#modalwindow").window({ title: '編輯', width: 700, height: 430, iconCls: 'icon-edit' }).window('open');
    } else {
      $.messageBox5s('提示', '請選擇要操作的記錄');
    }
  });

  // 詳細按鈕
  $("#btnDetails").click(function () {
    var row = $('#List').datagrid('getSelected');
    if (row != null) {
      $("#modalwindow").html("<iframe width='100%' height='98%' scrolling='no' frameborder='0' src='/SysSample/Details?id=" + row.Id + "&Ieguid=" + GetGuid() + "'></iframe>");
      $("#modalwindow").window({ title: '詳細', width: 500, height: 300, iconCls: 'icon-details' }).window('open');
    } else {
      $.messageBox5s('提示', '請選擇要操作的記錄');
    }
  });

  // 查詢按鈕
  $("#btnQuery").click(function () {
    var queryStr = $("#txtQuery").val();
    if (queryStr == null) queryStr = "%";
    $('#List').datagrid({ url: '/SysSample/GetList?queryStr=' + encodeURI(queryStr) });
  });

  // 刪除按鈕
  $("#btnDelete").click(function () {
    var row = $('#List').datagrid('getSelected');
    if (row != null) {
      $.messager.confirm('提示', '確定刪除', function (r) {
        if (r) {
          $.post("/SysSample/Delete?id=" + row.Id, function (data) {
            if (data.type == 1) $("#List").datagrid('load');
            $.messageBox5s('提示', data.message);
          }, "json");
        }
      });
    } else {
      $.messageBox5s('提示', '請選擇要操作的記錄');
    }
  });
});
</script>

總結

本講完成了前端工具列的建構與 CRUD 事件綁定，奠定了後台管理系統核心操作介面的基礎。下一步將著手實作後端 Controller 與 Service 層的業務邏輯，並整合 Unity 依賴注入以達成鬆耦合架構。