基於MVC4+EasyUI的Web開發框架經驗總結（12）--利用Jquery處理數據交互的幾種方式

本文轉載自查看原文 2014-11-09 18:35 26723 Web開發框架

在基於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);
        }