您的位置：首页 > 编程语言 > ASP

asp.net mvc 批量保存 服务端获取客户端传进的数组参数的处理方法

2016-01-18 17:07 941 查看
在Ajax + asp.net mvc 里，如果需要将一个数组作为参数传给Action来保存，这时候，需要对这个参数进行额外处理，如果不处理，服务端获取到的数组只是获取到数组的个数。而对象的属性是为Null的、直接看代码吧，有看不懂或不明白的地方可以给我留言。

这里实现的是一个通讯录批量保存数据的功能。

cshtml 

@model dynamic

@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>添加联系人</title>
<link href="~/Contents/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<input type="button" class="btn btn-default" id="addRow" value="添加一行" />
<input type="button" class="btn btn-primary" id="save" value="保存" />
</div>
<div class="panel-body">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>姓名</th>
<th>昵称</th>
<th>手机号码</th>
<th>电子邮箱</th>
<th>家庭住址</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="~/Contents/js/jquery-1.10.2.min.js"></script>
<script src="~/Contents/js/jquery.mvc-paramter-adaptive.js"></script>
<script>
$(function () {
$("#addRow").click(function () {
var $tbody = $("tbody");
var temp = "<tr>" +
"<td><input type=\"text\" /></td>" +
"<td><input type=\"text\" /></td>" +
"<td><input type=\"text\" /></td>" +
"<td><input type=\"text\" /></td>" +
"<td><input type=\"text\" /></td>" +
"</tr>";
$tbody.append(temp);
});
$("#save").click(function () {
var $tr = $("tbody>tr");
var arr = [];
var k = 0;
//获取数据
$tr.each(function () {
//获取tr下面的所有td
var $td = $(this).children();
var dir = new Array();
//循环读取td下的input的值
$td.each(function (i, e) {
//获取input标签的对象
var $input = $(this).children();
dir[i] = $input.val();
});
arr[k] = { name: dir[0], nickName: dir[1], phone: dir[2], email: dir[3], address: dir[4] };
k++;
});
//封装数据
var params = {
t: Math.random(),
directories: arr,
};
//提交
$.ajax({
type: "POST",
url: "/DirectoryManage/Add",
dataType: "JSON",
data: mvcParamMatch(params),//将参数进行处理  --  主要
success: function (result) {
alert(result.msg);
},
error: function (xmlHttpRequest, textStatus, errorThrown) {
alert("Error");
}
});
});
});
</script>
</body>
</html>

Controller

using System.Collections.Generic;
using System.Web.Mvc;

namespace MvcParamMatch.Controllers
{
public class DirectoryManageController : Controller
{
//
// GET: /DirectoryManage/
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Add(DirectoryInfo info)
{
//保存操作...

//返回结果
return Json(GetResult(true, "保存成功", null));
}
private Dictionary<string, object> GetResult(bool rel, string msg, object data)
{
return new Dictionary<string, object>
{
{"rel", rel},
{"msg", msg},
{"obj", data}
};
}
}
public class DirectoryInfo
{
public string T { get; set; }
public IList<Directory> Directories { get; set; }
public Directory Directory { get; set; }
}
public class Directory
{
public string Name { get; set; }
public string NickName { get; set; }
public string Phone { get; set; }
public string Email { get; set; }
public string Address { get; set; }
}
}


处理的Js函数

var mvcParamMatch = (function () {
var mvcParameterAdaptive = {};
//验证是否为数组
mvcParameterAdaptive.isArray = Function.isArray || function (o) {
return typeof o === "object" &&
Object.prototype.toString.call(o) === "[object Array]";
};
//将数组转换为对象 params: arrName - 数组名,array-待转换的数组,saveObj-转换后存放的对象，不用输入
mvcParameterAdaptive.convertArrayToObject = function (arrName, array, saveObj) {
var obj = saveObj || {};
function func(name, arr) {
for (var i in arr) {
if (!mvcParameterAdaptive.isArray(arr[i]) && typeof arr[i] === "object") {
for (var j in arr[i]) {
if (mvcParameterAdaptive.isArray(arr[i][j])) {
func(name + "[" + i + "]." + j, arr[i][j]);
} else if (typeof arr[i][j] === "object") {
mvcParameterAdaptive.convertObject(name + "[" + i + "]." + j + ".", arr[i][j], obj);
} else {
obj[name + "[" + i + "]." + j] = arr[i][j];
}
}
} else {
obj[name + "[" + i + "]"] = arr[i];
}
}
}
func(arrName, array);
return obj;
};
//转换对象 params:objName-对象名,turnObj-待转换的对象,saveObj-转换后存放的对象，不用输入
mvcParameterAdaptive.convertObject = function (objName, turnObj, saveObj) {
var obj = saveObj || {};
function func(name, tobj) {
for (var i in tobj) {
if (mvcParameterAdaptive.isArray(tobj[i])) {
mvcParameterAdaptive.convertArrayToObject(i, tobj[i], obj);
} else if (typeof tobj[i] === "object") {
func(name + i + ".", tobj[i]);
} else {
obj[name + i] = tobj[i];
}
}
}
func(objName, turnObj);
return obj;
};
return function (json, arrName) {
arrName = arrName || "";
if (typeof json !== "object") throw new Error("请传入json对象");
if (mvcParameterAdaptive.isArray(json) && !arrName) throw new Error("请指定数组名，对应Action中数组参数名称！");
if (mvcParameterAdaptive.isArray(json)) {
return mvcParameterAdaptive.convertArrayToObject(arrName, json);
}
return mvcParameterAdaptive.convertObject("", json);
};
})();


Demo 下载地址 https://yunpan.cn/crjPdUigCH6bW 访问密码 8745

有疑问的可以给我留言哦。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航