1

特定の 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フォームと一緒に他のものを送信するにはどうすればよいですか?

4

1 に答える 1

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ファイルに書き込んで、このフォームを目立たないようにAJAX化するだけです。

$(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つの要素を使用する必要があります）。そうしないと、デフォルトのモデルバインダーが異常終了する可能性があります。競合がある場合は、それらを解決するのはあなた次第です。

于 2012-07-05T11:41:41.660 に答える