【问题标题】:MVC3 Passing ViewModel to controller method using JQuery AjaxMVC3 使用 JQuery Ajax 将 ViewModel 传递给控制器​​方法
【发布时间】:2025-12-24 01:40:12
【问题描述】:

我正在尝试使用 JQuery Ajax 将表单的数据传递给我的控制器方法,但我不确定您是如何执行此操作的,因为当我在控制器端使用调试器时,我的 ViewModel 为空。

我的 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 表中的字段。

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

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

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

关于如何映射它以便正确绑定视图模型的任何想法。 谢谢

【问题讨论】:

  • 如果你使用 firebug 并查看 post 请求,它是否将正确的数据发送到 Create 页面?

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


【解决方案1】:

如果您想从表单的绑定视图模型自动构建模型,您可以使用此答案 https://*.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】:

    您的 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}
                                    }
    

    【讨论】:

    • 按照您的建议进行了更改,效果很好。感谢您提供深入的代码,因为这让我更清楚。
    【解决方案3】:

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

    【讨论】: