我如何使用mvc表单提交JSON数据

本文关键字：JSON 数据 表单提交 mvc 何使用 | 更新日期: 2023-09-27 18:05:42

我的视图中包含Json格式的数据隐藏字段。我想使用表单提交此数据。我不能使用ajax。

<input type="hidden" id="workData" name="Works" data-value="[{"Id":44,"Body":"Completion Status","IsCompleted":true},{"Id":11,"Body":"Completion details","IsCompleted":false}]" value="{"Id":"33","Body":"Status","IsCompleted":true}">
<input type= "hidden" name ="Name" value="Micheal">

我有员工模型和工作模型。给每个员工分配工作清单。

public class Employee
{
    public string Name {get; set;}
    public List<Work> Works {get; set;} 
}
public class Work 
{
    public string Body {get; set;}
    public boll IsCompleted{get; set;}
}

我的动作方法签名是这个

public ActionResult SetWorkStatus(Employee employee)

我如何将这些数据发布到动作?

我如何使用mvc表单提交JSON数据

当我无法使用ajax时，我遇到了类似的问题。这就是我如何让它工作的。

首先将data-value属性周围的双引号替换为单引号' '

然后您必须将隐藏的输入附加到表单中。然后它们将正确地绑定到您的模型。

要绑定复杂对象，需要为每个项提供索引，而不是依赖于项的顺序。这确保了我们可以明确地将提交的属性与正确的对象相匹配。

@using (Html.BeginForm("SetWorkStatus", "Controller", FormMethod.Post))
{
   @Html.HiddenFor(e => e.Name)
   <input type="hidden" id="workData" data-value='[{"id":44,"body":"completion status","iscompleted":true},{"id":11,"body":"completion details","iscompleted":false}]' value='{"id":"33","body":"status","iscompleted":true}'>
   <input type="submit" value="submit" />
}
@section scripts{
<script type="text/javascript">
    $(function () {

        $("input:submit")
        .on("click", function () {
            var str = JSON.stringify($("#workData").data("value"));
            var data = JSON.parse(str).map(function (e) {
                return { Body: e.body, IsCompleted: e.iscompleted };
            });
            data.forEach(function (e, i) {
                $("form").append("<input type='hidden' name='Employee.Works[" + i + "].Body' value='" + e.Body + "' />" +
                                 "<input type='hidden' name='Employee.Works[" + i + "].IsCompleted' value='" + e.IsCompleted + "' />");
            });
        });
    });
</script>
}

注意，索引必须是一个连续的整数序列，从0开始，每个元素递增1。

参见model binding to list

MVC模型绑定器不知道如何将Work输入的JSON值转换为模型。您可以尝试的一件事是更改POST模型以使用Works的字符串，然后在操作中解析JSON。

public class PostEmployeeModel
{
    public string Name {get; set;}
    public string Works {get; set;} 
}
[HttpPost]
public ActionResult SetWorkStatus(PostEmployeeModel employee)
{
    Work work = JsonConvert.DeserializeObject<Work>(employee.Works)
    // ...
}
相关文章：