在基於MVC4+EasyUI的Web開發框架裡面，大量採用了Jquery的方法，對資料進行請求或者提交，方便頁面和伺服器後端進行資料的互動處理。本文主要介紹利用Jquery處理資料互動的幾種方式，包括獲取資料並顯示，插入新資料到伺服器，更新資料，刪除資料等操作。

1、利用Jquery獲取資料並顯示

為了順利獲取資料，我們需要保持頁面端呼叫和伺服器端保持一致，並相應的把資料轉換或者封裝為物件實體進行處理。

下面我們以一個簡單的全國省份、全國城市、全國城市行政區的案例進行Demo程式碼的介紹。

總體的操作包括了，分頁查詢，新增資料的儲存，編輯顯示和儲存，檢視資訊的資料顯示等等，而利用Jquery獲取資料並繫結到介面控制元件上的程式碼操作如下所示，主要就是利用getJson方法進行處理。

        //繫結編輯詳細資訊的方法
        function BindEditInfo(ID) {
            //使用同步方式，使得聯動的控制元件正常顯示
            $.ajaxSettings.async = false;
            //首先使用者傳送一個非同步請求去後臺實現方法
            $.getJSON("/Province/FindByID?id=" + ID, function (info) {
            //賦值有幾種方式：.datebox('setValue', info.Birthday);.combobox('setValue', info.Status);.val(info.Name);.combotree('setValue', info.PID);.numberbox('setValue', info.Number);
 

                $("#ID").val(info.ID);
                $("#ProvinceName").val(info.ProvinceName);

                isAddOrEdit = 'edit';//新增對話方塊標識    
            });
        }

        //繫結檢視詳細資訊的方法
        function BindViewInfo(ID) {          
            //傳送請求
            $.getJSON("/Province/FindByID?id=
 
" + ID, function (info) {
                $("#ID2").text(info.ID);
                $("#ProvinceName2").text(info.ProvinceName);
            });
        }

getJson方法主要就是呼叫MVC裡面控制器的方法，獲取資料，並把它轉換為Json的物件實體，這樣我們就能方便獲取到對應的屬性，從而繫結到介面控制元件。而FindByID的介面是控制器裡面的方法定義，我們可以通過下面的控制器基類程式碼瞭解具體的邏輯。

        /// <summary>
        /// 查詢資料庫,檢查是否存在指定ID的物件
        /// </summary>
        /// <param name="id">物件的ID值</param>
        /// <returns>存在則返回指定的物件,否則返回Null</returns>
        public virtual ActionResult FindByID(string id)
        {
            //檢查使用者是否有許可權，否則丟擲MyDenyAccessException異常
            base.CheckAuthorized(AuthorizeKey.ViewKey);

            ActionResult result = Content("");
            T info = baseBLL.FindByID(id);
            if (info != null)
            {
                result = ToJsonContentDate(info);
            }

            return result;
        }

        /// <summary>
        /// 返回處理過的時間的Json字串
        /// </summary>
        /// <param name="date"></param>
        /// <returns></returns>
        public ContentResult ToJsonContentDate(object date)
        {
            var timeConverter = new IsoDateTimeConverter { DateTimeFormat = "yyyy-MM-dd HH:mm:ss" };
            return Content(JsonConvert.SerializeObject(date, Formatting.Indented, timeConverter));
        }

2、利用Jquery儲存資料到伺服器

上面的操作是從服務端獲取資料並顯示在頁面上，下面我們來介紹如何把資料通過通過Jquery呼叫，儲存到伺服器上。

在Web框架裡面，我們把新增資料和編輯資料的介面，共享了一個層的介面程式碼，這樣可以減少主介面檢視Index.cshtml的程式碼數量（因為我們把各種介面的程式碼放在一個檔案裡面，方便操作管理）。

    <!--------------------------新增/修改資訊的彈出層---------------------------->
    <div id="DivAdd" class="easyui-dialog" style="width:680px;height:200px;padding:10px 20px"
            closed="true" resizable="true" modal="true" data-options="iconCls: 'icon-add',buttons: '#dlg-buttons'">
        <form id="ffAdd" method="post" novalidate="novalidate">
            <div id="tabAdd" class="easyui-tabs" >
                <div title="基本資訊" data-options="iconCls:'icon-view'"  style="padding:5px 5px">
                    <table>
                        <tr>
                            <td>                    
                                <table id="tblAdd1" class="view">
                                    <tr> 
                                        <th>
                                            <label for="ProvinceName">省份名稱：</label>
                                        </th>
                                        <td colspan="3">
                                            <input class="easyui-validatebox" type="text" id="ProvinceName" name="ProvinceName" style="width:280px;"  />
                                        </td>
 
                                    </tr>
                                 </table>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div style="text-align:right; padding-top:10px">
                <input type="hidden" id="ID" name="ID" />
                <a href="javascript:void(0)" class="easyui-linkbutton" id="btnAddOK" iconcls="icon-ok" onclick="SaveEntity()">確定</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#DivAdd').dialog('close')">關閉</a>
            </div>
         </form>
    </div>

而資料的儲存，我們也用同一個函式，這樣也很方便，同時減少程式碼數量，儲存操作的javascript指令碼函式如下所示。

        //繫結新增按鈕的事件
        function SaveEntity() {
            //判斷表單的資訊是否通過驗證
            var validate = $("#ffAdd").form('validate');
            if (validate == false) {
                return false;
            }

            var postData = $("#ffAdd").serializeArray();
            $.post(url, postData, function (json) {
                var data = $.parseJSON(json);
                if (data.Success) {
                    //新增成功  1.關閉彈出層，2.重新整理DataGird
                    showTips("儲存成功");
                    $("#DivAdd").dialog("close");
                    $("#grid").datagrid("reload");
                    $("#ffAdd").form("clear");
                }
                else {
                    showError("儲存失敗:" + data.ErrorMessage, 3000);
                }
            }).error(function () {
                $.messager.alert("提示", "您未被授權使用該功能，請聯絡管理員進行處理。", 'warning');
            });
        }

由於每個層都定義了Name和ID，因此我們可以很容易通過下面方式獲取到對應的物件資料，方便提交。

var postData = $("#ffAdd").serializeArray();

插入資料的時候，呼叫的路徑如下所示：

url = '/Province/Insert';

更新資料的時候，呼叫的路徑如下數艘：

url = '/Province/Update?ID=' + ID;

插入物件到資料庫裡面的控制器方法，主要還是呼叫BLL層的物件方法進行處理，不過事先會進行一定的許可權控制和資訊補充，如下程式碼所示。

        /// <summary>
        /// 插入指定物件到資料庫中
        /// </summary>
        /// <param name="info">指定的物件</param>
        /// <returns>執行操作是否成功。</returns>
        public virtual ActionResult Insert(T info)
        {
            //檢查使用者是否有許可權，否則丟擲MyDenyAccessException異常
            base.CheckAuthorized(AuthorizeKey.InsertKey);

            CommonResult result = new CommonResult();
            if (info != null)
            {
                try
                {
                    OnBeforeInsert(info);
                    result.Success = baseBLL.Insert(info);
                }
                catch(Exception ex)
                {
                    LogTextHelper.Error(ex);//錯誤記錄
                    result.ErrorMessage = ex.Message;
                }
            }
            return ToJsonContent(result);
        }

我們注意到，插入和更新操作，返回的物件都是 CommonResult  物件，這個物件，包含了一個Success的布林屬性，用來表示是否成功，還有一個ErrorMessage屬性，用來標識錯誤資訊的，所以我們利用Javascript指令碼處理儲存操作的時候，也需要使用這兩個屬性，用來區分和提示資訊的顯示。

                var data = $.parseJSON(json);
                if (data.Success) {
                    //新增成功  1.關閉彈出層，2.重新整理DataGird
                    showTips("儲存成功");
                    $("#DivAdd").dialog("close");
                    $("#grid").datagrid("reload");
                    $("#ffAdd").form("clear");
                }
                else {
                    showError("儲存失敗:" + data.ErrorMessage, 3000);
                }

操作完成後，提示成功的資訊如下所示。

3、利用Jquery刪除列表資料操作

利用Jquery函式，可以POST刪除的請求到伺服器上，在此之前我們需要了解我們需要刪除那些記錄，並確認提示是否刪除，刪除成功後，更新列表，並提示使用者，大致的頁面程式碼函式如下所示。

        //實現刪除資料的方法
        function Delete() {
            //得到使用者選擇的資料的ID
            var rows = $("#grid").datagrid("getSelections");
            if (rows.length >= 1) {
                //遍歷出使用者選擇的資料的資訊，這就是使用者使用者選擇刪除的使用者ID的資訊
                var ids = "";   //1,2,3,4,5
                for (var i = 0; i < rows.length; i++) {
                    ids += rows[i].ID + ",";
                }
                //最後去掉最後的那一個,
                ids = ids.substring(0, ids.length - 1);
                var postData = { Ids: ids };

                //然後確認傳送非同步請求的資訊到後臺刪除資料
                $.messager.confirm("刪除確認", "您確認刪除選定的記錄嗎？", function (action) {
                    if (action) {
                        $.ajax({
                            type: 'POST',
                            url: '/District/DeletebyIds',
                            dataType: 'json',
                            data: postData,
                            success: function (data) {
                                if (data.Success) {
                                    showTips("刪除選定的記錄成功");

                                    $("#grid").datagrid("reload");
                                    //當刪除完成之後，第二次刪除的時候還記得上次的資訊，這樣是不可以的，所以我們需要清除第一次的資訊                                
                                    rows.length = "";//第一種方法                                
                                    $("#grid").datagrid("clearSelections");//第二種方法
                                }
                                else {
                                    showError("操作失敗：" + data.ErrorMessage, 3000);
                                }
                            }
                        });
                    }
                });
            }
            else {
                $.messager.alert("提示", "請選擇你要刪除的資料");
            }
        }

而伺服器的MVC控制器類，我們也只需要呼叫基類控制器方法就可以了，基本上不需要額外的處理程式碼。

MVC控制器基類的方法定義如下所示，注意最後返回的是一個常見類CommonResult ，承載這個是否操作成功和錯誤資訊（如果存在的話）。

        /// <summary>
        /// 刪除多個ID的記錄
        /// </summary>
        /// <param name="ids">多個id組合，逗號分開（1,2,3,4,5）</param>
        /// <returns></returns>
        public virtual ActionResult DeleteByIds(string ids)
        {
            //檢查使用者是否有許可權，否則丟擲MyDenyAccessException異常
            base.CheckAuthorized(AuthorizeKey.DeleteKey);

            CommonResult result = new CommonResult();
            try
            {
                if (!string.IsNullOrEmpty(ids))
                {
                    List<string> idArray = ids.ToDelimitedList<string>(",");
                    foreach (string strId in idArray)
                    {
                        if (!string.IsNullOrEmpty(strId))
                        {
                            baseBLL.Delete(strId);
                        }
                    }
                    result.Success = true;
                }
            }
            catch (Exception ex)
            {
                LogTextHelper.Error(ex);//錯誤記錄
                result.ErrorMessage = ex.Message;
            }
            return ToJsonContent(result);
        } 

城市資訊介面如下所示。

行政區管理介面如下所示。

基於MVC4+EasyUI的Web開發框架的系列文章：