Javascript 将json传递到MVC控制器

我已经看过很多关于SO的帖子，考虑到这个话题，尽管应用解决方案对我来说不起作用，我现在很困惑。我错过了什么

请考虑我是NoOB AT。JS的东西。< /P> 因此，我使用此JS从动态创建的表单元素中获取我的值，并尝试发布它：

编辑12:21：我得到了这个脚本，它应该将表单中的每个元素解析为类似json的定制数组。但我仍然得到空引用。知道怎么弄吗？

 var getValues = function (myForm) {
        var array = [];
    var parser;

    $("formElement").each( function (i, elem) {

            parser.empty()
            parser = {
                Id: $(elem,"#Id ").val(),
                someOption: $(elem, "#someOption ").val(),
                someText: $(elem, "#someText ").val(),
                someNumber: $(elem, "#someNumber  ").val()
            }
            array.push(parser);

        });

    console.log(array);


    $.ajax({
        type: "POST",
        url: 'angus',
        traditional: true,
        data:  {json: array },
        success: function (data) {
            $("#getData").empty();
            $("#getData").append(array);
        }
    });            
    };

我在日志中看到： （像i、i+1、i+2、i+3这样的索引对象与viewmodels匹配-是吗？我对这些原型和函数的感觉很复杂-是什么？）

在我的控制器操作中，我得到空异常：

 [HttpPost]
        public ActionResult angus(IEnumerable<TrashViewModel> json)
        {

            return View(json.ToList());
        }

我让表单HTML属性名称与viemodel类的名称匹配

编辑： html:

多达杰·普兹西斯克
罗扎吉。。。
2.
测试
2.
3.
@*tutaj beda dodane opcje*@

附加的html：

 var strVar = "";
            strVar += "<div class=\"formElement row\">";
            strVar += "                  <input type=\"hidden\" name=\"Id\" value=\" "+ $scope.counter +"\"\/>";
            strVar += "                <div class=\"col-md-2\">";
            strVar += "                    <select name=\"someOption\" class=\"optns form-group col-md-12\" ng-model=\"user.class\">";
            strVar += "                        <option selected value=\"1\"> Rodzaj... <\/option>";
            strVar += "                        <option value=\"test\">2<\/option>";
            strVar += "                        <option value=\"2\">test<\/option>";
            strVar += "                        <option value=\"2\">2<\/option>";
            strVar += "                        <option value=\"3\">3<\/option>";
            strVar += "                        @*tutaj beda dodane opcje*@";
            strVar += "                    <\/select>";
            strVar += "                <\/div>";
            strVar += "                <div class=\"col-md-1\">";
            strVar += "                    <input name=\"someNumber\" class=\"form-group col-md-12\" type=\"number\" ng-model=\"user.number\" value=\"\" text=\"Ilość...\" \/><br \/>";
            strVar += "                <\/div>";
            strVar += "                <div class=\"col-md-9\">";
            strVar += "                    <input name=\"someText\" class=\"form-group col-md-12\" type=\"text\" ng-model=\"user.text\" value=\"\" text=\"Uwagi...\" \/><br \/>";
            strVar += "                <\/div>";
            strVar += "            <\/div>";

var strVar=”“；
strVar+=“”；
strVar+=“”；
strVar+=“”；
strVar+=“”；
strVar+=“Rodzaj…”；
strVar+=“2”；
strVar+=“测试”；
strVar+=“2”；
strVar+=“3”；
strVar+=“@*图塔吉·贝达·多丹opcje*@”；
strVar+=“”；
strVar+=“”；
strVar+=“”；
strVar+=“”；
strVar+=“”；
strVar+=“”；
strVar+=“”；
strVar+=“”；
strVar+=“”；

我最终得到了null异常，其他帖子认为这是因为viemodel类与序列化对象不匹配。现在不知道该怎么办

谢谢大家!

尝试更换

 var parsed = $(myForm).serializeArray();

与

然后将其传递给提交者

JSON.stringify(parameters)

试着替换

 var parsed = $(myForm).serializeArray();

与

然后将其传递给提交者

JSON.stringify(parameters)

---

在您的JavaScript代码中，有三件事向我跳了出来：

您正在使用.serializeArray（），它创建一个对象数组，每个对象都有一个name和value属性。这与TrashViewModel对象的结构不匹配

将序列化对象包装在一个新对象中，该对象具有一个名为“json”的属性，该属性为数据添加了更多结构

你把这个物体串起来了

所有这些都是不必要的，因为.ajax（）方法将以正确的格式为您打包数据。您只需将序列化表单作为数据参数传递

data: $(myform).serialize()

在控制器上，只需将动作上的参数设置为TrashViewModel对象。请注意，它是单个对象，不是可枚举的

public ActionResult Angus(TrashViewModel form)
{
    // do something
}

如果要使用.serializeArray（），则需要创建具有名称和值属性的模型对象，以便模型绑定器能够正确解析参数

// JavaScript 
data: $(myform).serializeArray()

// Controller
public class NameValueModel
{
    public string Name { get; set; }
    public string Value { get; set; }
}

public ActionResult Angus(NameValueModel[] form)
{
    // do something
}

---

在您的JavaScript代码中，有三件事向我跳了出来：

您正在使用.serializeArray（），它创建一个对象数组，每个对象都有一个name和value属性。这与TrashViewModel对象的结构不匹配

将序列化对象包装在一个新对象中，该对象具有一个名为“json”的属性，该属性为数据添加了更多结构

你把这个物体串起来了

所有这些都是不必要的，因为.ajax（）方法将以正确的格式为您打包数据。您只需将序列化表单作为数据参数传递

data: $(myform).serialize()

在控制器上，只需将动作上的参数设置为TrashViewModel对象。请注意，它是单个对象，不是可枚举的

public ActionResult Angus(TrashViewModel form)
{
    // do something
}

如果要使用.serializeArray（），则需要创建具有名称和值属性的模型对象，以便模型绑定器能够正确解析参数

// JavaScript 
data: $(myform).serializeArray()

// Controller
public class NameValueModel
{
    public string Name { get; set; }
    public string Value { get; set; }
}

public ActionResult Angus(NameValueModel[] form)
{
    // do something
}

---

我对结果不是100%满意，因为我仍然需要在服务器端解析json字符串。我想我很快就会做问答，这样其他人就不用花一周的时间来做这样的事情了。感谢：

• @斯蒂芬穆克
• @埃米尔
• @杰夫M

所以实际上我做的是：

js获取输入并按自定义样式推送，然后发布ajax请求：

        var array = [];
        var parser;

        $(".formElement").each( function (i, elem) {

                //parser.empty()
                parser = {
                    Id: $("#Id", $(this)).val(),
                    someOption: $("#someOption", $(this)).val(),
                    someText: $("#someText", $(this)).val(),
                    someNumber: $("#someNumber", $(this)).val()
                };
                console.log(parser);
                array.push(parser);

            });

        console.log(array);


        $.ajax({
            type: "POST",
            url: 'angus',
            traditional: true,
            data: { json: JSON.stringify(array) },
            success: function (data) {
                $("#getData").empty();
                $("#getData").append(array);
            }
        });

控制器： （不要介意逻辑，因为除了在调试期间提供信息外，它在这里没有任何用处）

最重要的是给字符串类型作为参数；我100%确信我的json从复杂类型的viewmodel中反弹了出来

       [HttpPost]
        public ActionResult angus(string json)
        {

            var check = json.ToString() == null;

            return RedirectToAction("ErrorAction");
        }

---

我对结果不是100%满意，因为我仍然需要在服务器端解析json字符串。我想我很快就会做问答，这样其他人就不用花一周的时间来做这样的事情了。感谢：

• @斯蒂芬穆克
• @埃米尔
• @杰夫M

所以实际上我做的是：

js获取输入并按自定义样式推送，然后发布ajax请求：

        var array = [];
        var parser;

        $(".formElement").each( function (i, elem) {

                //parser.empty()
                parser = {
                    Id: $("#Id", $(this)).val(),
                    someOption: $("#someOption", $(this)).val(),
                    someText: $("#someText", $(this)).val(),
                    someNumber: $("#someNumber", $(this)).val()
                };
                console.log(parser);
                array.push(parser);

            });

        console.log(array);


        $.ajax({
            type: "POST",
            url: 'angus',
            traditional: true,
            data: { json: JSON.stringify(array) },
            success: function (data) {
                $("#getData").empty();
                $("#getData").append(array);
            }
        });

控制器： （不要介意逻辑，因为除了在调试期间提供信息外，它在这里没有任何用处）

最重要的是给字符串类型作为参数；我100%确信我的json从复杂类型的viewmodel中反弹了出来

       [HttpPost]
        public ActionResult angus(string json)
        {

            var check = json.ToString() == null;

            return RedirectToAction("ErrorAction");
        }

---

为了发布数组，需要对数据进行字符串化并设置

contentType

选项。您需要修改ajax代码

$.ajax({
    type: 'POST',
    url: '@Url.Action("angus")', // do not hard code url's
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify({ model: array }), 
    success: function (data) {

和控制器

[HttpPost]
public ActionResult angus(IEnumerable<TrashViewModel> model)

[HttpPost]
公共行动结果