Question

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

查看模型：

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; }
}

RAZOR VIEW：

@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);
}

以上代码的工作原理是我可以获取View的表单变量并使用它们来确定要返回的结果。显然，我遗漏了很多代码，很多表单变量和很多控制器逻辑。我不想将字符串转换为整数，担心POST var是空还是空等等。有很多表单变量我希望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的内容始终为null。

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

model。：

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

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

    return false;
}

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

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

我一直在寻找解决方案。太久了。：S

Answer 1

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

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

如何使用DataTables Ajax将整个表单提交给MVC Controller Action

1 个答案: