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

  1. MVC中的Ajax与增删改查

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

  2. MVC中的Ajax与增删改查(二)

    上一篇记录的是前台操作,下面写一下后台 ,本来自认为是没有必要做补充,毕竟思路啥的都有,实际上在做删除操作的时候,折腾了一天,还是自己太嫩,逻辑不够严谨,这里作下记录. 关于表结构这里再作下说明: ① ...

  3. 在ASP.NET MVC4中实现同页面增删改查,无弹出框02,增删改查界面设计

    在上一篇"在ASP.NET MVC4中实现同页面增删改查,无弹出框01,Repository的搭建"中,已经搭建好了Repository层,本篇就剩下增删改查的界面了......今 ...

  4. vue实战(一):利用vue与ajax实现增删改查

    vue实战(一):利用vue与ajax实现增删改查: <%@ page pageEncoding="UTF-8" language="java" %> ...

  5. ajax参考增删改查

    AJAX做增删改查详细!   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  6. 用CI框架向数据库中实现简单的增删改查

    以下代码基于CodeIgniter_2.1.3版 用PHP向数据库中实现简单的增删改查(纯代码)请戳 http://www.cnblogs.com/corvoh/p/4641476.html Code ...

  7. asp.net下利用MVC模式实现Extjs表格增删改查

    在网上看到有很多人写extjs下的表格控件的增删改查,但是大多数都是直接从后台读取数据,很少有跟数据库进行交互的模式. 今天就来写一个这样的例子.欢迎大家交流指正. 首先简单介绍一下MVC模式,MVC ...

  8. 在ASP.NET MVC4中实现同页面增删改查,无弹出框01,Repository的搭建

    通常,在同一个页面上实现增删改查,会通过弹出框实现异步的添加和修改,这很好.但有些时候,是不希望在页面上弹出框的,我们可能会想到Knockoutjs,它能以MVVM模式实现同一个页面上的增删改查,再辅 ...

  9. MVC学习-用EF做增删改查

    在做增删改查先,先介绍几个知识点: 1.代理类 在将对象方法EF数据上下文时,EF会为该对象封装 一个代理类对象, 同时为该对象的每一个属性添加一个标志:unchanged, 当对该对象某个属性进行操 ...

随机推荐

  1. 重读《深入理解Java虚拟机》六、Java泛型 VS C#泛型 (伪泛型 VS 真泛型)

    一.泛型的本质 泛型是参数化类型的应用,操作的数据类型不限定于特定类型,可以根据实际需要设置不同的数据类型,以实现代码复用. 二.Java泛型 Java 泛型是Java1.5新增的特性,JVM并不支持 ...

  2. python server

    #!/usr/bin/env python #coding=utf-8 # modifyDate: 20120808 ~ 20120810 # 原作者为:bones7456, http://li2z. ...

  3. php 数值类型

    一.整形 1. 常见的整形 echo 1234; // 十进制数 echo -123; // 负数 echo 0123; // 八进制数 (等于十进制 83) echo 0x1A; // 十六进制数 ...

  4. vue获取内存中的值并写入

    <template> <div class="container"> <h3>发表评论</h3> <hr> <te ...

  5. MTU 和 MSS 关系、 IP分片、TCP分段

    从四层模型:链路层,网络层,传输层,应用层说 一 .以太网V2格式数据帧 : 链路层 Destination   Source  Type  DataAndPad  FCS 6            ...

  6. centos安装Django之一:安装openssl

    这几天在部署Django,需要安装的东西有点多,python3.pip3.openssl(pip依赖ssl环境),所以第一步是安装openssl,如何安装呢?主要有三步,随ytkah一起来看看吧 1. ...

  7. MSDN、OEM、VOL、RETAIL密钥区别

    本文就介绍一下Windows的密钥的一些使用要点及注意事项,涉及到最常用的MSDN密钥.OEM密钥.VOL密钥和零售密钥激活问题,希望对大家有所帮助. 一.MSDN密钥 MSDN密钥是付费用户提前获得 ...

  8. golang 对struct进行Serialize的方法,即将存取二进制文件到struct的方法

    方法一: serialize 的标准方法: 使用gob 和 base64 或 base58. 方法二: 下面是自己实现的 serialize 方法,不推荐自己实现,应该用标准方法. 代码如下: pac ...

  9. sap gui 定义类并实现接口

    1: 直接在类属性的interfaces 框输入 接口名称即可.

  10. 将中文字符串分割为数组 解决str_split中文乱码php

    首先来介绍str_split()这个函数: 它的作用是将字符串分割为数组: 例如: $str='abcde';str_plite($str); 打印结果如下:Array(    [0] => a ...