MVC中的Ajax與增刪改查（一） - Sientuo－IT工程師數位筆記本

文章出處

自入手新項目以來，一直處于加班狀態，博客也有兩周沒更，剛剛完成項目的兩個模組，稍有喘息之機，寫寫關于項目中的增刪改查，這算是一個老生常談的問題了，就連基本的教材書上都有。剛看書的時候，以為沒什么可說的，直接 @using (Html.BeginForm....），然后在Action中接受表單提交的參數，進行處理即可，比如說，新增的時候，控制器添加完數據之后，然后彈出一個文本提示信息。然而，實際項目中，MVC的Action中是不提倡直接返回一段 JS 代碼的。

這個時候Ajax 就上場了，相應的與控制器的交互由Ajax 來完成，那么對于新增來說，大致流程如下：

視圖中新增界面：點擊確定--> ajax 提交表單--> Action中處理，并返回bool值--> ajax的回調函數接收--> 彈出對應的消息框-->跳轉查詢結果頁（實時刷新）

1.關于查詢條件啊，如果涉及到下拉列表，上一篇博客已經寫過，至于普通的文本框，就沒必要贅述

2.在ajax提交表單之前，新增的視圖界面需調整成（不指定ActionName、ControllerName）

@using (Html.BeginForm("", "",...))
{ 
  ... 

}
  <input type="button"  id="btnaddSave" value="確定"/>  
  <input type="button" id="btnCel" value="取消">

這樣，點擊確定按鈕，就不會提交到action中
用ajax來指定跳轉的action，根據 serializeArray 的方法提交form 表單值

        //新增按鈕保存
        $("#btnaddSave").click(function () {         
                $.ajax({
                    type: "POST",
                    url: '@Url.Action("Add")',
                    data: $("form").serializeArray(),
                    datatype: 'json',
                    success: function (msg) {
                        if (msg == true) {
                            alert("新增成功");                            
                           //跳轉到查詢結果界面
                            Toquery("add")   
                        }
                        else if (msg == "no") {
                            alert("該數據已存在")
                            $("#btnret").trigger("click")
                        }
                        else {
                            alert("新增失敗")
                            Toquery("add")
                        }
                       
                    }
                })
            }
        })

這樣一來，表單所填寫的值就通過ajax 的方式，以 serializeArray 方法傳遞到Action中，我是將新增的數據封裝到一個類中，然后在控制器用該類作為參數來接收，如果新增數據的欄位比較少，就沒又此必要，直接用參數來接受即可。后臺完成后，返回一布爾值 return Json(bool, JsonRequestBehavior.AllowGet);

3 跳轉查詢界面

寫到這里，大致基本明了，至于 Toquery("add") 方法，是將其返回到查詢結果界面，當然還是通過ajax 來發送請求，查詢結果的生成依賴查詢條件的不同，這里為了達到實時刷新數據的效果，需要兩個處理

① 發出請求，設置查詢條件為空來得到所有數據

② 屏蔽（清空）當前界面的div，將請求后得到查詢結果加載到界面對應的div中（通過時間倒序來排列更直觀）

    //返回查詢結果界面
    function Toquery(page) {
        $.ajax({
            type: "POST",
            traditional: true,
            url: '@Url.Action("_QueryResult")',
            async: true,
            data: { pageNum: 1, pageSize: 10 },
            success: function (data) {
                HideLoad('body');
                $("#result").html(data);
            },
            error: function (xhr) {
                HideLoad('body');
                displayError(xhr);
            }
        });
        if (page = "add") {
            var insert = $("#insert");
            insert.css("display", "none");
        }
        if (page = "update") {
            var modify = $("#modify")
            modify.css("display", "none");
        }
        var query = $("#search");
        query.css("display", "block");
        var result = $("#result");
        result.css("display", "block");

    }

寫到這里，新增的主線代碼已經完成，至于一些表單驗證之類的問題，全憑個人愛好設置不同的樣式，這里不再班門弄釜

關于修改 + 刪除 這里僅記錄一下 要點

①：第一次跳轉修改界面的action中 如果傳遞的封裝的實體類 和 修改提交的action的接受參數的名字 相同的話，修改值無法被獲取，這么說可能很拗口，簡單來說,如下

第一次跳轉修改界面：
   
public ActionResult Update(A a)
{
   B.x1 = a.x1;
   B.x2 = b.x2;
   return view(B);
}

修改界面提交

public ActionResult Update(B b)
{
   
}

假設，修改界面中B.1 的值被修改為 X ，那么提交后，接收b.x1 的值仍為 a.x1 
我所做處理是，第一次跳轉到修改的action時，參數用(var a,var b)來接收，用Viewbage 的方式作傳遞

② 查詢結果界面傳值到 修改界面


<td><a href="#" onclick="SortClick(this);" sortexpression="ID">@item.ID</a></td>

如果是這種onclick（this）這種條跳轉來傳值的話，獲取其他欄位值的時候，jquery很方便

 //當前連接文本值
 var id = $(obj).text();
 var id1 =$(obj).parent().prev().prev().text();
 var id2 =$(obj).parent().next().text();

③ 查詢結果界面到刪除  

<th style="width: 5%;"><input type="checkbox" id="SelectAll" value="" /></th>  對應

<td id="ch1"><input type="checkbox" name="r1"/></td> 

設置成復選框這種形式來作刪除時，

        //刪除按鈕
        $("#btnDel").click(function () {
            var paramList = [];
            $('input[name="r1"]:checked').each(function () {
                var id= $(this).parent().next().text();
                var id1= $(this).parent().next().next().text();
                var itemParam = id1+ "," + id2 ;
                //拼接刪除的主鍵欄位
                paramList.push(itemParam);
            });
            if (paramList.length > 0) {
                if (confirm("@Lang.ach_del_confirm")) {
                    $.ajax({
                        url: '@Url.Action("Delete")',
                        data: { "paramList": paramList },
                        dataType: "json",
                        type: "POST",
                        traditional: true,
                        success: function (data) {
                            if (data==true) {
                                alert("刪除成功");                               
                            }
                            else {
                                alert("刪除失敗");
                            }
                            Toquery("")
                        }
                    });
                }
            }
            else {
                alert("請選擇一筆數據");
            }
        })

這里，刪除功能的思路是：通過 each（）方法遍歷所勾選的數據，在將主鍵進行拼接，最后將拼接后的字符串集合的形式傳遞到控制器，該action對應的Delete 中用

List<string> paramList 作為參數即可接收需要刪除的主鍵集合，已達到刪除單筆或者多筆數據的目的

至于全選、反選就比較簡單了，設置一下 prop 的屬性即可

        //全選/反選
        $("#SelectAll").click(function () {
            if ($("#SelectAll").is(":checked")) {
                $("[name=r1]:checkbox").prop("checked", true)

            } else {
                $("[name=r1]:checkbox").prop("checked", false)
            }
        })