MVC中的Ajax与增删改查（一）

自入手新项目以来，一直处于加班状态，博客也有两周没更，刚刚完成项目的两个模组，稍有喘息之机，写写关于项目中的增删改查，这算是一个老生常谈的问题了，就连基本的教材书上都有。刚看书的时候，以为没什么可说的，直接 @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: , pageSize:  },

            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 > ) {

                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)

            }

        })

大概就这么多，

作为MVC的小白，要走的路还很长

同样作为前端的小白，越来越觉得锋利的Jquery 这本书应该熟读三遍

市人皆大笑 举手揶揄之

巴特西

MVC中的Ajax与增删改查（一）

最新文章

热门文章