通过AJAX将序列化的数据传递给MVC中的控制器答案

【问题标题】：Passing the serialized data to the controller in MVC through AJAX通过AJAX将序列化的数据传递给MVC中的控制器
【发布时间】：2020-09-19 08:41:01
【问题描述】：

我有一个看法：

@{
    ViewBag.Title = "Home Page";
}

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <link href="~/Scripts/datatable/DataTables-1.10.20/css/dataTables.jqueryui.min.css" rel="stylesheet" />
    @section Scripts{

        <script src="~/Scripts/datatable/DataTables-1.10.20/js/jquery.dataTables.min.js"></script>
        <script src="~/Scripts/datatable/DataTables-1.10.20/js/dataTables.jqueryui.min.js"></script>
        <script>
            $(document).ready(function () {
                $("#contenttable").DataTable({

                });

                $("#submitdata").click(function () {
                    var datatabledata = $("#datatble-form").serialize();
                    alert(datatabledata);
                    $.ajax({
                        url: "/Home/getData",
                        type: "POST",
                        data: { model: datatabledata },
                        success: function () {
                            alert('success');
                        },
                        error: function () {
                            alert('failure');
                        }
                    });
                });
            });
        </script>
    }
</head>

<body>
    <form id="datatble-form">
        <table>
            <tr>
                <td>Friend Name</td>
                <td><input name="FriendName" type="text" /></td>
            </tr>
            <tr>
                <td>Friend Age</td>
                <td><input name="FriendAge" type="text" /></td>
            </tr>
            <tr>
                <td>Position</td>
                <td><input name="Friendposition" type="text" /></td>
            </tr>
            <tr>
                <td>Office</td>
                <td><input name="Friendoffice" type="text" /></td>
            </tr>
        </table>

        <input id="submitdata" type="button" value="Submit" />
    </form>
</body>
</html>

我的控制器是：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Script.Serialization;
using datatableViewTocontroller.Models;

namespace datatableViewTocontroller.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult getData(string model)
        {
            JavaScriptSerializer jss = new JavaScriptSerializer();
            MyClass myClass = jss.Deserialize<MyClass>(model);
            return RedirectToAction("index");
        }

}

}

我的模型是：

namespace datatableViewTocontroller.Models
{
    public class MyClass
    {
        public string FriendName { get; set; }
        public string FriendAge { get; set; }
        public string Friendposition { get; set; }
        public string Friendoffice { get; set; }  
    }
}

好的，现在我详细说明我的问题。我有一个包含姓名、年龄、职位和办公室输入的表单，我正在尝试通过 serialize() 将数据提交给控制器。表单正在序列化（因为它在警报中显示值）并且控制器调用也成功，例如：

但是在反序列化时我得到了这个错误：无效的 JSON 原语：FriendName。像这样：

我该如何解决这个问题？请帮忙..

【问题讨论】：

标签： jquery asp.net ajax model-view-controller

【解决方案1】：

无论您在控制器的操作方法中获得什么都不是 json 数据，这就是您在反序列化时遇到错误的原因。

解决方案

您可以更新您的getdata 方法，而不是在参数中传递字符串，您可以传递您的模型类，它将自动绑定数据，您将不再需要反序列化 json。

[HttpPost]
public ActionResult getData(MyClass model)
{
  // Do whatever you want with model
  return RedirectToAction("index");
}

并且也改变你的点击方法如下

$("#submitdata").click(function () {
	$.post("/Home/getData",$("#datatble-form").serialize()).done(function(data){
		 alert('success');
	}).catch(function(){
		alert('failure');
	});
});

【讨论】：

我尝试了您的建议，但模型参数的值为空。
@ajinkya 我已经更新了代码，如果它正在工作，请现在检查它

【解决方案2】：

1.添加serializeObject函数将form data序列化为json

<script>    
        (function ($) {
            $.fn.serializeObject = function () {

                var self = this,
                    json = {},
                    push_counters = {},
                    patterns = {
                        "validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\])*$/,
                        "key": /[a-zA-Z0-9_]+|(?=\[\])/g,
                        "push": /^$/,
                        "fixed": /^\d+$/,
                        "named": /^[a-zA-Z0-9_]+$/
                    };


                this.build = function (base, key, value) {
                    base[key] = value;
                    return base;
                };

                this.push_counter = function (key) {
                    if (push_counters[key] === undefined) {
                        push_counters[key] = 0;
                    }
                    return push_counters[key]++;
                };

                $.each($(this).serializeArray(), function () {

                    // Skip invalid keys
                    if (!patterns.validate.test(this.name)) {
                        return;
                    }

                    var k,
                        keys = this.name.match(patterns.key),
                        merge = this.value,
                        reverse_key = this.name;

                    while ((k = keys.pop()) !== undefined) {

                        // Adjust reverse_key
                        reverse_key = reverse_key.replace(new RegExp("\\[" + k + "\\]$"), '');

                        // Push
                        if (k.match(patterns.push)) {
                            merge = self.build([], self.push_counter(reverse_key), merge);
                        }

                        // Fixed
                        else if (k.match(patterns.fixed)) {
                            merge = self.build([], k, merge);
                        }

                        // Named
                        else if (k.match(patterns.named)) {
                            merge = self.build({}, k, merge);
                        }
                    }

                    json = $.extend(true, json, merge);
                });

                return json;
            };
        })(jQuery);
    </script>
        <script>
            $(document).ready(function () {
                $("#contenttable").DataTable({

                });

                $("#submitdata").click(function () {

                    var datatabledata = $("#datatble-form").serializeObject();
                    $.ajax({
                        url: "/Home/getData",
                        type: "POST",
                        dataType: "json",
                        data: { model: datatabledata },
                        crossDomain: true,
                        success: function (result) {
                            if (result.success == true) {
                                window.location = result.redirecturl;
                            }
                        },
                        error: function () {
                            alert('failure');
                        }
                    });
                });
            });
        </script>

2。无需反序列化动作代码中的 MyClass，

public IActionResult Index(MyClass model)
        {
            return View(model);
        }

        [HttpPost]
        public ActionResult getData(MyClass model)
        {
            //no need to deserialize MyClass
            return Json(new { success = true, redirecturl = Url.Action("Index", "Home", model) });
        }

测试截图：

【讨论】：