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

時間 2019-11-13

標籤基於 mvc4+easyui mvc easyui web 開發框架經驗總結利用 jquery 處理數據交互幾種方式欄目 HTML 简体版

原文原文鏈接

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

一、利用Jquery獲取數據並顯示

爲了順利獲取數據，咱們須要保持頁面端調用和服務器端保持一致，並相應的把數據轉換或者封裝爲對象實體進行處理。html

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

整體的操做包括了，分頁查詢，添加數據的保存，編輯顯示和保存，查看信息的數據顯示等等，而利用Jquery獲取數據並綁定到界面控件上的代碼操做以下所示，主要就是利用getJson方法進行處理。ajax

        //綁定編輯詳細信息的方法
        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));
        }

二、利用Jquery保存數據到服務器

上面的操做是從服務端獲取數據並顯示在頁面上，下面咱們來介紹如何把數據經過經過Jquery調用，保存到服務器上。json

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

操做完成後，提示成功的信息以下所示。

三、利用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);
        }