MVC在ajax.beginform外部提交表单 [英] MVC submit form outside ajax.beginform

问题描述

我有一个特定的Ajax表单，提交后我想在该Ajax表单之外包含另一个表单.让我给你看一个例子:

I have a certain ajax form and when submitted I want to include another form outside of that ajax form. Let me show you an example:

    @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表单提交中包括的表单之外还有另一个标签

I have another tag outside of the form I want to include in the ajax form submission

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

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

推荐答案

我不认为MS兼容的AJAX支持此功能.因此，让我们摆脱它，使用简单的jQuery.您正在寻找 .serialize() 方法.

I don't think that MS unobtrusive AJAX supports this. So let's get rid of it and use plain jQuery. The .serialize() method is what you are looking for.

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

So we start by replacing the Ajax.BeginForm form with a regular 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，以便我们可以在脚本中引用它:

then we provide an id to the other form so that we can reference it in our script:

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

剩下的就是将我们的脚本写在一个单独的javascript文件中，以毫不干扰地AJAXify这种形式:

and all that's left is write our script in a separate javascript file to unobtrusively AJAXify this form:

$(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;
    });
});

以下几行应特别受关注:

The following line should be of particular interest:

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

如您所见，.serialize方法允许将多种形式转换为合适的序列化形式.

As you can see the .serialize method allows convert multiple forms into suitable serialized form.

非常明显的是，您不应与2种形式的输入元素具有冲突的名称(例如，具有2个具有相同名称的元素)，否则默认的模型装订器可能会发疯.如果有冲突，则取决于您自己解决.

It is more than obvious that you should not have conflicting names with the input elements of the 2 forms (for example have 2 elements with the same name), otherwise the default model binder could go berserk. It's up to you to resolve those conflicts if there are any.

这篇关于MVC在ajax.beginform外部提交表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！