通过MVC4中的表单发布JSON数据

时间:2012-11-02 13:54:53

标签: asp.net-mvc json knockout.js asp.net-mvc-4

我正在尝试将一个JSON对象(一个JSON-ified淘汰模型,如果有任何相关性)发布到我的MVC控制器,并让控制器返回一个新视图。为此,我将使用表单发送数据。问题是我希望在控制器收到JSON时自动将JSON转换为模型。

如果我要使用AJAX调用,

var actionModel = new Object();
actionModel.Controls = ko.toJS(self.controls());
var json = JSON.stringify(actionModel);
$.ajax({
    url: "MyController/Preview",
    type: "POST",
    contentType: 'application/json; charset=utf-8',
    cache: false,
    data: json,
    success: function (data) {
    }
});

... JSON对象已成功反序列化并转换为我的模型类的实例。

public ActionResult Preview(ActionModel actionModel) { ... }
public class ActionModel
{
    public List<ControlModel> Controls { get; set; }
}

如果我想用表单执行此操作,我理解我需要将JSON插入到隐藏的输入字段中,但是在执行此操作时我能够管理的最好的事情是将数据作为序列化字符串接收:

@using (Html.BeginForm("Preview", "MyController", FormMethod.Post, new { id = "previewForm" }))
{
    <input type="hidden" id="hiddenFieldName" />
}

public ActionResult Preview(string hiddenFieldName) { ... }

之后我可以反序列化它,但我真的更喜欢它,如果MVC可以为我转换它,就像使用AJAX调用一样。这可能吗?

感谢。

2 个答案:

答案 0 :(得分:2)

假设您想使用表格而不是XHR发布编码为json的数据,我认为它不是开箱即用的。

表单不允许使用多种内容类型。 http://www.w3.org/TR/html401/interact/forms.html#form-content-type

如果您将json作为字符串发布,则可能可以创建一个模型绑定器,该绑定器查找看似是json的字符串并在那里处理反序列化。不是最漂亮的东西,特别是如果这只是针对一些奇怪的情况。

答案 1 :(得分:0)

您可以捕获表单post事件并重新构建自己的帖子,添加额外的JSON对象,而不是手动反序列化。以下是使用this post中的serializeObject方法的示例:

$(document).ready(function () {
    $('form').live('submit', function (e) {
        e.preventDefault();

        var dataToPost = $(this).serializeObject();
        dataToPost.hiddenFieldName = actionModel; //additional object here
        $.ajax({
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            data: JSON.stringify(dataToPost),
            contentType: 'application/json; charset=utf-8',
            success: function (res) {
                //do something...
            }
        });
    });
});