MVC3使用JQuery Ajax将ViewModel传递给controller方法

时间:2022-11-24 13:40:30

I'm trying to pass a form's data to my controller method using JQuery Ajax, but I'm not sure how you do this as my ViewModel is null when I use debugger on the Controller Side.

我正在尝试使用JQuery Ajax将表单的数据传递给我的控制器方法,但我不确定如何做到这一点,因为当我在控制器端使用调试器时,我的ViewModel是空的。

My ViewModel is:

我的视图模型是:

public class PremisesViewModel
{

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

    public SelectList listOfCounties = Initialise.countiesSelectList;

    public Premise premises { get; set; }
}

where premises is an entity/table in my database.

在我的数据库中,前提是一个实体/表。

The form contains the fields in the Premises table.

表单包含了Premises表中的字段。

In my javascript function I do this:

在我的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');
        }
    })

However, when I check the viewModel parameter in my method, it is null:

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

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

Any ideas on how to map this so that the viewmodel is bound correctly. Thanks

关于如何映射它的任何想法,以便viewmodel被正确地绑定。谢谢

3 个解决方案

#1


5  

Your JSON format exactly same as your model class.

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

Current example

当前的例子

public class PremisesViewModel
{

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

    public SelectList listOfCounties = Initialise.countiesSelectList;

    public Premise premises { get; set; }
}

Your JSON like

你的JSON

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

#2


5  

If you wanted to automatically build the model from the bound view model of a form, you can use the code from this answer https://*.com/a/1186309 to properly serialize to a JSON object.

如果您想要从表单的绑定视图模型中自动构建模型,您可以使用这个响应的代码https://*.com/a/1186309,以适当地序列化到一个JSON对象。

You'd then need to pass it as a string to your $.ajax call. All in all, very similar to what you originally had. Something like:

然后需要将它作为字符串传递给您的$。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');
        }
    });

Quite strange that there's no core function to convert to a JSON object, but there you go.

奇怪的是,没有核心函数可以转换成JSON对象,但这就是答案。

#3


4  

The names of the variables in the data that you are posting does not correspond with the names of the properties of your ASP.Net MVC ViewModel, so the data can not be binded properly.

您发布的数据中的变量的名称与您的ASP属性的名称不一致。Net MVC视图模型,因此数据不能正确绑定。

#1


5  

Your JSON format exactly same as your model class.

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

Current example

当前的例子

public class PremisesViewModel
{

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

    public SelectList listOfCounties = Initialise.countiesSelectList;

    public Premise premises { get; set; }
}

Your JSON like

你的JSON

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

#2


5  

If you wanted to automatically build the model from the bound view model of a form, you can use the code from this answer https://*.com/a/1186309 to properly serialize to a JSON object.

如果您想要从表单的绑定视图模型中自动构建模型,您可以使用这个响应的代码https://*.com/a/1186309,以适当地序列化到一个JSON对象。

You'd then need to pass it as a string to your $.ajax call. All in all, very similar to what you originally had. Something like:

然后需要将它作为字符串传递给您的$。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');
        }
    });

Quite strange that there's no core function to convert to a JSON object, but there you go.

奇怪的是,没有核心函数可以转换成JSON对象,但这就是答案。

#3


4  

The names of the variables in the data that you are posting does not correspond with the names of the properties of your ASP.Net MVC ViewModel, so the data can not be binded properly.

您发布的数据中的变量的名称与您的ASP属性的名称不一致。Net MVC视图模型,因此数据不能正确绑定。