如何使用MVC表单提交发布JSON数据？

Question

I have hidden fields on my view which contains data in Json Format. I want to post this data using form submit. I can't use 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">

I have a Employee Model and a Work Model. Each employee is assigned list of works.

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

My action method signature is this

public ActionResult SetWorkStatus(Employee employee)

How can I post this data to the action?

Answer 1

I faced a similar problem when I couldn't use ajax. So this is how I managed to get it to work.

First replace the double quotes around your data-value attribute with single quotes ' '

Then you have to append hidden inputs to your form. They will then bind correctly to your model.

To bind complex objects, you need to provide an index for each item, rather than relying on the order of items. This ensures we can unambiguously match up the submitted properties with the correct object.

@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>

}

Note that the index must be an unbroken sequence of integers starting at 0 and increasing by 1 for each element.

See model binding to list

Answer 2

The MVC model binder doesn't know how to convert the JSON value of your Work input to a model. One thing you can try is changing your POST model to use a string for Works, and then parse the JSON in your action.

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