如何使用 DataTables Ajax 将整个表单提交到 MVC 控制器操作

Question

我正在重新审视我早先遇到的一个问题，该问题在一个表单中包含相当多的输入和选择控件。我更喜欢我的 Controller Action 使用 View Model 来确定输入值，但是模型的成员在提交时总是为空的。这是我不受欢迎的工作代码，简要：

查看模型：

public class MyViewModel
{
    [Display(Name = "Project Name")]
    public string ProjectName { get; set; }

    [Display(Name = "Project Country")]
    public string ProjectCountry { get; set; }
    public IEnumerable<SelectListItem> Countries { get; set; }
}

剃刀视图：

@model My_Web_App.Models.MyViewModel

@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "myform" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })

    <div class="form-group">
        @Html.LabelFor(model => model.ProjectName)
        <div class="col-md-9">
            @Html.EditorFor(model => model.ProjectName)
        </div>
    </div>

    <!-- Project Country -->
    <div class="form-group">
        @Html.LabelFor(model => model.ProjectCountry)
        <div class="col-md-4">
            @Html.DropDownListFor(
                x => x.ProjectCountry,
                new SelectList(Model.Countries, "Value", "Text"))
        </div>
    </div>

    <table id="mytable">
    <thead>
        <tr>
            <th>Data1</th>
            <th>Data2</th>
            <th>Data3</th>
        </tr>
    </thead>

    <tbody></tbody>
    </table>

    <button id="btnSubmit" type="submit">Submit</button>
}

<script type="text/javascript">
    $('#btnSubmit').click(function (event) {
        event.preventDefault();

        oTable = $('#mytable').dataTable({
            "ajax": {
                "url": "/MyController/MyJsonResult/",
                "type": "POST",
                "data": {
                    ProjectName: $('#ProjectName').val(),
                    ProjectCountry: $('#ProjectCountry').val()         
                }
            }
        });

    return false;
    });
</script>

控制器：

[AcceptVerbs(HttpVerbs.Post)]
public JsonResult MyJsonResult()
{
    string projectName = Request["ProjectName"];
    string projectCountry = Request["ProjectCountry"];

    ... DO SOMETHING ...

    return Json(new { data = dosomethingresult }, JsonRequestBehavior.AllowGet);
}

上述代码的工作原理是我可以获取视图的表单变量并使用它们来确定要返回的结果。显然我遗漏了很多代码、很多表单变量和很多控制器逻辑。我不想将字符串转换为整数，也不想担心 POST var 是空还是 null 等等。我希望 MVC 为我处理这么多的表单变量。例如：

首选控制器操作：

[AcceptVerbs(HttpVerbs.Post)]
public JsonResult MyJsonResult(MyViewModel model)
{
    string projectName = model.ProjectName;
    string projectCountry = model.ProjectCountry;

    ... DO SOMETHING ...

    return Json(new { data = dosomethingresult }, JsonRequestBehavior.AllowGet);
}

上述首选控制器操作的问题是，在使用 DataTables Ajax 时，model 的内容始终为空。

model 如果我在 DataTables 初始化之外进行 Ajax 调用，则会使用有效数据进行初始化。 ：

$('#btnSubmit').click(function (event) {
    event.preventDefault();

    $.ajax({
        url: "/MyController/MyJsonResult/",
        type: "POST",
        dataType: "json",
        data: $('#myform').serialize()
    });

    return false;
}

上面的data 设置正确地序列化了所有表单字段，MVC 成功地创建了视图模型对象供我在控制器操作中使用。不幸的是，DataTables Ajax 中的"data": $('#myform').serialize() 不起作用。调用 Controller Action 时，模型未初始化（空值和零）。

如何使用 DataTables Ajax 将整个表单传递给控制器​​操作，以便我的 View Model 对象包含来自 View 表单的正确数据？

我一直在寻找解决方案很长时间。太长了:S

Answer 1

在你的 Razor 视图中试试这个：

@using (Html.BeginForm("MyJsonResult", "MyController", FormMethod.Post, new { id = "myform" }))