MVC中的Ajax与增删改查(一)

您所在的位置:网站首页 用ajax删除一条记录 MVC中的Ajax与增删改查(一)

MVC中的Ajax与增删改查(一)

2023-09-21 04:57| 来源: 网络整理| 查看: 265

      自入手新项目以来,一直处于加班状态,博客也有两周没更,刚刚完成项目的两个模组,稍有喘息之机,写写关于项目中 的增删改查,这算是一个老生常谈的问题了,就连基本的教材书上都有。刚看书的时候,以为 没什么可说的,直接 @using (Html.BeginForm....) ,然后在Action中 接受表单提交的参数,进行处理即可,比如说,新增的时候,控制器添加完数据之后,然后弹出 一个文本提示信息。然而,实际项目中,MVC的Action中 是不提倡 直接返回一段 JS 代码的。

     这个时候Ajax 就上场了,相应的与控制器的交互由Ajax 来完成,那么对于新增 来说,大致流程如下:

      视图中新增界面:点击确定--> ajax 提交表单--> Action中处理,并返回bool值--> ajax的回调函数接收--> 弹出对应的消息框-->跳转查询结果页(实时刷新)

1.关于查询条件啊,如果涉及到下拉列表,上一篇博客已经写过,至于普通的文本框,就没必要赘述

2.在ajax提交表单之前,新增的视图界面需调整成 (不指定ActionName、ControllerName)

 

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

 

这样,点击确定按钮,就不会提交到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 的方式作传递

② 查询结果界面传值到 修改界面

@item.ID

如果是这种onclick(this)这种条跳转来传值的话,获取其他栏位值的时候,jquery很方便 //當前連接文本值 var id = $(obj).text(); var id1 =$(obj).parent().prev().prev().text(); var id2 =$(obj).parent().next().text(); ③ 查询结果界面到删除

对应

设置成复选框这种形式来作删除时,

//刪除按鈕 $("#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  paramList 作为参数即可接收需要删除的主键集合,已达到删除单笔或者多笔数据的目的

至于全选、反选 就比较简单了,设置一下 prop 的属性即可

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

 

大概就这么多,

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

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

市人皆大笑 举手揶揄之


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3