MVC3使用JQuery Ajax将ViewModel传递给控制器​​方法

时间:2012-03-26 11:34:46

标签: jquery ajax asp.net-mvc-3

我正在尝试使用JQuery Ajax将表单的数据传递给我的控制器方法,但是当我在Controller端使用调试器时,我不确定你是怎么做的,因为我的ViewModel为null。

我的ViewModel是:

public class PremisesViewModel
{

    public string createPremisesErrorMessage { get; set; }
    public string updatePremisesErrorMessage { get; set; }

    public SelectList listOfCounties = Initialise.countiesSelectList;

    public Premise premises { get; set; }
}

其中premises是我数据库中的实体/表。

表单包含Premises表中的字段。

在我的javascript函数中,我这样做:

   var premisesViewModel = {
                                Id: 0,
                                PremisesDescription: $('#premises_PremisesDescription').val(),
                                OrdnanceSurveyReference: $('#premises_OrdnanceSurveyReference').val(),
                                PartRestrictedNotes: $('#premises_PartRestrictedNotes').val(),
                                NatureOfPremises: $('#premises_NatureOfPremises').val(),
                                AddressLine1: $('#premises_AddressLine1').val(),
                                AddressLine2: $('#premises_AddressLine2').val(),
                                Town: $('#premises_Town').val(),
                                CountyId: $('#premises_CountyId').val(),
                                Postcode: $('#premises_Postcode').val()
                            }
    alert(form.serialize);
    $.ajax({
        url: form.attr('action'),
        type: 'POST',
        dataType: "json",
        contentType: 'application/json',
        data: JSON.stringify(premisesViewModel),
        success: function (data) {
            alert('done');
        }
    })

但是,当我检查my方法中的viewModel参数时,它为null:

  [HttpPost]
    public JsonResult Create(PremisesViewModel pvm)
    {
        return null;
    }

有关如何映射此内容的任何想法,以便正确绑定视图模型。 感谢

3 个答案:

答案 0 :(得分:5)

您的JSON格式与您的模型类完全相同。

当前示例

public class PremisesViewModel
{

    public string createPremisesErrorMessage { get; set; }
    public string updatePremisesErrorMessage { get; set; }

    public SelectList listOfCounties = Initialise.countiesSelectList;

    public Premise premises { get; set; }
}

你的JSON喜欢

 var premisesViewModel = {
                                    createPremisesErrorMessage : $('#premises_PremisesDescription').val(),
                                    updatePremisesErrorMessage: $('#premises_OrdnanceSurveyReference').val(),    
                                    premises : {Define more properties here as per your Premise structure}
                                }

答案 1 :(得分:5)

如果要从表单的绑定视图模型自动构建模型,可以使用此答案https://stackoverflow.com/a/1186309中的代码正确序列化为JSON对象。

然后,您需要将其作为字符串传递给$ .ajax调用。总而言之,与您原来的非常相似。类似的东西:

var premisesViewModel = $('form').serializeObject();
$.ajax({
        url: form.attr('action'),
        type: 'POST',
        dataType: "json",
        contentType: 'application/json',
        data: JSON.stringify(premisesViewModel),
        success: function (data) {
            alert('done');
        }
    });

很奇怪,没有核心函数可以转换为JSON对象,但是你去了。

答案 2 :(得分:4)

您发布的数据中的变量名称与ASP.Net MVC ViewModel的属性名称不对应,因此数据无法正确绑定。