将 json 传递给 MVC 控制器

Question

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

请认为我是 .js 方面的菜鸟。

所以我用这个 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 这样的索引对象与视图模型匹配 - 对吗？我对这些原型和函数有复杂的感觉 - 它是什么？）

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

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

            return View(json.ToList());
        }

我创建了我的视图模型：

  [Serializable]
public class TrashViewModel
{
    public int Id { get; set; }
    public string someOption { get; set; }
    public string someText { get; set; }
    public string someNumber { get; set; }

}

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

编辑： html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="formExample" ng-controller="ExampleController">

    <button class="btn btn-primary" ng-controller="addRow" ng-click="addLine()">Dodaj przycisk</button>

    <form novalidate class="simple-form">
        <div class="here">
            <div class="formElement row">

                  <input type="hidden" name="Id" value="1"/>
                <div class="col-md-2">
                    <select name="someOption" class="optns form-group col-md-12" ng-model="user.class">
                        <option selected value="1"> Rodzaj... </option>
                        <option value="test">2</option>
                        <option value="2">test</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        @*tutaj beda dodane opcje*@
                    </select>
                </div>
                <div class="col-md-1">
                    <input name="someNumber" class="form-group col-md-12" type="number" ng-model="user.number" value="" text="Ilość..." /><br />
                </div>
                <div class="col-md-9">
                    <input name="someText" class="form-group col-md-12" type="text" ng-model="user.text" value="" text="Uwagi..." /><br />
                </div>
            </div>
        </div>
        <input type="button" value="Reset" />
        <input type="submit" value="Save" />
    </form>
</div>

附加的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>";

我最终得到空异常，其他帖子建议是因为 viemodel 类与序列化对象不匹配。目前不知道该怎么办。

谢谢！

Answer 1

为了发布您的数组，您需要对数据进行字符串化并设置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)

Answer 2

尝试替换

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

与

 var parameters = {
            Id : $("#Id ").val(),
            someOption : $("#someOption ").val(),
            someText : $("#someText ").val(),
             someNumber  : $("#someNumber  ").val()
       };

然后将其传递给提交

JSON.stringify(parameters)

Answer 3

在你的 JavaScript 代码中，我突然想到了 3 件事：

1. 您正在使用 .serializeArray()，它创建一个对象数组，每个对象都有一个名称和值属性。这与您的 TrashViewModel 对象的结构不匹配
2. 您将序列化对象包装在一个新对象中，该对象具有一个名为“json”的属性，这会为您的数据添加更多结构
3. 您正在对所述对象进行字符串化

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

data: $(myform).serialize()

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

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

如果您要使用 .serializeArray()，那么您需要创建一个具有 Name 和 Value 属性的模型对象，以便模型绑定器可以正确解析参数。

// 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
}

Answer 4

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

• @StephenMuecke
• @Emil
• @Jeff 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 从复杂类型的视图模型中反弹了

       [HttpPost]
        public ActionResult angus(string json)
        {

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

            return RedirectToAction("ErrorAction");
        }