Question

我有一个特定的ajax表单，在提交时我想在ajax表单之外包含另一个表单。让我举个例子：

    @using (Ajax.BeginForm("PayWithBankTransfer", "Payment", new { salesLineId = salesLine.SalesLineID }, new AjaxOptions
                                                                                                                    {
                                                                                                                        HttpMethod = "POST",
                                                                                                                        UpdateTargetId = "bankForm",
                                                                                                                        LoadingElementId = "spinnerBank"
                                                                                                                    }, new { id = "feedback-form" }))
{
    //some stuff
    <button type="submit">Reserve</button>
}

我想在ajax表单提交中包含的表单之外有另一个标记

<div id="theOtherStuff">
    //otherStuff
</div>

我如何提交其他内容以及ajax表单？

Answer 1

我不认为MS不引人注目的AJAX支持这一点。所以让我们摆脱它并使用普通的jQuery。您正在寻找.serialize()方法。

因此，我们首先将Ajax.BeginForm表单替换为常规Html.BeginForm

@using (Html.BeginForm(
    "PayWithBankTransfer", 
    "Payment", 
    new { salesLineId = salesLine.SalesLineID }, 
    FormMethod.Post,
    new { id = "feedback-form" })
)
{
    //some stuff
    <button type="submit" class="t-button t-state-default" style="width: 100px; height: 50px;">Reserver</button>
}

然后我们为另一个表单提供一个id，以便我们可以在脚本中引用它：

<div id="theOtherStuff">
    @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "theOtherStuffForm" }))
    {
        //otherStuff
    }
</div>

剩下的就是将我们的脚本写在一个单独的javascript文件中，以不引人注目的方式AJAXify这个表单：

$(function() {
    $('#feedback-form').submit(function () {
        $('#spinnerBank').show();
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).add('#theOtherStuffForm').serialize(),
            success: function (result) {
                $('#bankForm').html(result);
            },
            complete: function () {
                $('#spinnerBank').hide();
            }
        });

        return false;
    });
});

以下行应特别有意义：

data: $(this).add('#theOtherStuffForm').serialize(),

正如您所看到的，.serialize方法允许将多个表单转换为合适的序列化形式。

很明显，你不应该与2个表单的输入元素有冲突的名称（例如，有2个具有相同名称的元素），否则默认的模型绑定器可能会变得狂暴。如果存在任何冲突，由你来解决这些冲突。

MVC在ajax.beginform之外提交表单

1 个答案: