从 ajax 发布 MVC Razor 表单答案

【问题标题】：Posting MVC Razor form from ajax从 ajax 发布 MVC Razor 表单
【发布时间】：2013-11-05 22:29:27
【问题描述】：

在部分视图中，有一个使用 Html.Helper 类（TextBoxFor、DropDownListFor 等）的表单（@addName）。

@model Models.ADP

using (@Html.BeginForm(new { id= @addName}))
{
    @Html.TextBoxFor(model => model.EndValue, new { id = @newName, size = "5", style = "margin-right: 10px" })
    @Html.HiddenFor(model => model.ModuleTypeId, new { @Value = @ViewBag.ModuleId }
    @Html.DropDownListFor(model => model.DPId, @dpList, "Choose an Option...", new { @class = "select" })
}

我拦截提交是为了异步发布和检索新数据，divId是整个Partial View的div。

    $('#@saveName').click( function (event) {
        event.preventDefault();
        $.ajax({
            url: '@Url.Action("SaveADP", "Dispense")',
            type: 'POST',
            data: $('#@addName').serialize(),
            success: function (data) {
                $('#@divId').html(data);
            }
        })
    })

正在调用 SaveADP 操作，但唯一具有设置值的字段是 EndValue，其他字段（ModuleTypeId 和 DPId）具有默认值而不是它们的表单值。我在这里做错了什么？

【问题讨论】：

你的动作怎么样？
public ActionResult SaveADP(ADP newDP) 是签名，ADP 有 StartValue、EndValue、ModifiedDate、DPId、ModuleTypeId 和 Duration 字段。我还没有超出这个范围，因为 newDP 没有用正确的值构造。

标签： jquery ajax asp.net-mvc razor html-helper

【解决方案1】：

与 ASP.NET MVC 无关的方法是为每个元素提供 id，然后将其作为 JSON 传递给控制器。作为它的一部分，它会更适合您的需求，因为可以在 ajax 请求的回调中获取响应。

例子

var DTO = {
    newDP: {
        StartValue: $("#id_of_elm").val(),
        EndValue: $("#newName").val(),
        Duration: $("#id_of_elm").val(),
        ModuleTypeId: $("#id_of_elm").val(),
        DPId: $("#id_of_elm").val()
    }
};

$('#saveName').click(function (event) {
    event.preventDefault();
    $.ajax({
        contentType: 'application/json'
        data: JSON.stringify(DTO),
        type: 'POST',
        url: '@Url.Action("SaveADP", "Dispense")'
    }).done(function (data) {
        $('#divId').html(data);
    });
});

不相关但很重要的点

请使用#saveName 代替#@saveName 和#divId 代替#@divId
请注意jqXHR.done()是$.ajax中处理成功回调的新方法

【讨论】：

这似乎是识别字段的最佳主意，因为它们需要，谢谢！ razor 变量名称......让我们说当您无法创建新模型但需要重用视图时，有些事情比它们必须的要困难:)
从 webforms 转移到 mvc 是一件很痛苦的事，但这更容易谢谢！

【解决方案2】：

首先，.serialize() 排除隐藏字段。

第二，你应该检查你的下拉列表的HTML是否符合"successful controls"的以下规则。

有一句来自API Documentation:

注意：只有“successful controls”被序列化为字符串。不由于未提交表单，提交按钮值已序列化使用按钮。将表单元素的值包含在序列化字符串，该元素必须具有名称属性。值来自复选框和单选按钮（“radio”或“checkbox”类型的输入）仅当它们被选中时才包括在内。来自文件选择元素的数据没有序列化。

成功控制：

成功的控件对于提交是“有效的”。每一个成功的控件将其控件名称与其当前值配对，作为提交的表单数据集。必须定义成功的控件在 FORM 元素中，并且必须有一个控件名称。

但是：

禁用的控件无法成功。

如果一个表单包含多个提交按钮，只有激活的提交按钮是成功的。

所有“打开”复选框都可能成功。

对于具有相同 name 属性值的单选按钮，只有“on”单选按钮可能成功。

对于菜单，控件名称由 SELECT 元素提供，值由 OPTION 元素提供。只有选定的选项可能是成功的。未选择任何选项时，控件不成功并且名称和任何值都不会提交给提交表单时的服务器。

文件选择的当前值是一个或多个文件名的列表。提交表单后，每个文件的内容是与其余的表单数据一起提交。文件内容是根据表单的内容类型打包。

对象控件的当前值由对象的实现决定。

【讨论】：

在工作中，我们甚至编写了 serialize() 的自定义实现以避免其局限性。

【解决方案3】：

下面是固定代码。我还没有尝试过，但应该可以工作：

@model Models.ADP

@using (Html.BeginForm(new { id= addName}))
{
    Html.TextBoxFor(model => model.EndValue, new {id = newName, size = "5", style = "margin-right: 10px"});
    Html.HiddenFor(model => model.ModuleTypeId, new {@@Value = ViewBag.ModuleId});
    Html.DropDownListFor(model => model.DPId, dpList, "Choose an Option...", new {@@class = "select"});
}

【讨论】：