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

最新推荐文章于 2022-05-08 21:19:03 发布

JinFan_Zheng

最新推荐文章于 2022-05-08 21:19:03 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/u011587956/article/details/50537903

asp.net mvc 同时被 3 个专栏收录

3 篇文章

订阅专栏

Jquery

3 篇文章

订阅专栏

Ajax

3 篇文章

订阅专栏

本文介绍如何在ASP.NET MVC中处理Ajax请求时，从客户端批量发送数组数据到服务端并进行保存。通过示例代码展示了cshtml页面、Controller的设置以及关键的JS函数，提供了一个通讯录批量保存功能的示例，并提供了Demo下载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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

有疑问的可以给我留言哦。