从 JQuery UI 对话框提交 MVC 部分页面答案

【问题标题】：MVC Partial Page Submit from JQuery UI Dialog从 JQuery UI 对话框提交 MVC 部分页面
【发布时间】：2014-09-11 16:20:32
【问题描述】：

我正在尝试提交通过部分页面加载的 ajax 表单。提交来自在 JQuery UI 对话框上创建的按钮。表单数据包含在请求中，但是当我单步执行服务器端的代码时，视图模型并未填充数据。

加载部分内容并在加载完成后创建对话框的Javascript。

$('#test').load('@Url.Action("NewIntegrationLevel", "IntegrationLevelConfig", null, Request.Url.Scheme)', 
                        function() {
                            var dialog = $('#addEditForm');
                            dialog.dialog({
                                resizable: false,
                                modal: true,
                                width: 500,
                                title: 'New Integration Level',
                                buttons: [{
                                    text: 'Save',
                                    click: function(e) {
                                        e.preventDefault();
                                        $('#addEditForm').submit();
                                        dialog.dialog('close');

                                    },
                                    type: 'submit',
                                    form: 'addEditForm'
                                },
                                    {
                                        text: 'Close',
                                        click: function(e) {
                                            e.preventDefault();
                                            dialog.dialog('close');
                                        }
                                    }                               
                                ]
                            });
                        });

我的部分页面：

@model Zodiac.Cmt.UI.Models.IntegrationLevelConfigViewModel


@using (Ajax.BeginForm("Save", "IntegrationLevelConfig", FormMethod.Post, null, new { id = "addEditForm" }))
{

<div id="addEdit-integration-dialog">
    <div>
        <div>
            @Html.LabelFor(model => model.Name)
            @Html.TextBoxFor(model => model.Name)
        </div>
    </div>
</div>

}

服务器端代码：

[HttpPost]
    public ActionResult Save(IntegrationLevelConfigViewModel viewModel)
    {
        return PartialView("_AddEditIpl", viewModel);
    }

由于 JQuery 对话框在表单之外创建提交按钮，因此我在按钮上使用“form”属性，以便它知道要提交哪个表单。

这是提交页面后请求的样子：

那么，为什么视图模型没有在服务器端填充表单数据？？？

视图模型：

public class IntegrationLevelConfigViewModel
{
    [Description("Name")]
    public string Name;
}

【问题讨论】：

使用 $.ajax 而不是 $.load，然后在你的成功处理程序 $("#test").html(responseData);见stackoverflow.com/questions/5410055/…
您是说数据绑定不会填充 viewModel 以便在 Save(IntegrationLevelConfigViewModel viewModel) 中 viewModel 属性为空？你的IntegrationLevelConfigViewModel 是什么样的？
@Mardoxx - 不，这也不起作用。我的问题是数据没有绑定到模型。如果我使用 Request.Form["Name"] 数据就在那里。所以它被退回了，只是没有约束力。
@Jasen - 完全正确。查看我对视图模型的更新

标签： javascript jquery ajax asp.net-mvc forms

【解决方案1】：

我想通了。

在我的视图模型中

public string Name;

需要改为：

public string Name {get;set;}

【讨论】：