5

MVC ページに Ajax フォームがあり、2 つの別々の送信ボタンがあります...

@using (Ajax.BeginForm("Save", "Company", new AjaxOptions() {
    HttpMethod="Post", OnSuccess="closeForm" 
}, new {@id = "companyEditForm"})) {
    ....some edit fields......

    <input type="submit" value="Save & Next"/>
    <input type="submit" value="Save" />
}

「保存して次へ」ボタンでフォームを送信した後、別の js 関数を呼び出したいと思います。したがって、ユーザーが「保存」ボタンをクリックすると、フォームが送信されてから「closeForm」JavaScript 関数が呼び出されます。ユーザーが「保存して次へ」ボタンをクリックすると、フォームが送信され、「nextForm」JavaScript 関数が呼び出されます。これを達成する簡単な方法はありますか？

4

3 に答える 3

8

これを達成する簡単な方法はありますか？

いいえ。ただし、結果でクリックされたボタンをコントローラー アクションに渡すことはできます。これは、Json プロパティ (JSON を返す場合) として行うことも、カスタム応答 HTTP ヘッダーにすることもできます。

そして、成功コールバック (1 つのみ) 内で、この値を取得して、どのボタンがクリックされたかを把握し、それに応じて動作させることができます。

そのため、送信ボタンに名前を付けることから始めて、どのボタンがクリックされたかがわかるようにします。

@using (Ajax.BeginForm("Save", "Company", new AjaxOptions() {
    HttpMethod="Post", OnSuccess="onSuccess" 
}, new { id = "companyEditForm" })) {
    ....some edit fields......

    <button type="submit" name="btn" value="save_next">Save &amp; Next</button>
    <button type="submit" name="btn" value="save">Save</button>
}

そして、コントローラーアクション内

[HttpPost]
public ActionResult Save(MyViewModel model)
{
    Response.AppendHeader("X-Button", Request["btn"]);

    ... your usual processing
}

そして最後にあなたのonSucecssコールバック内：

function onSuccess(data, status, xhr) {
    function onSuccess(data, status, xhr) {
        var btn = xhr.getResponseHeader('X-Button');
        if (btn == 'save_next') {
            // The "Save & Next" button was clicked
        } else if (btn == 'save') {
            // The "Save" button was clicked
        } else {
            // The user didn't submit the form by using the mouse and
            // clicking on a button, he simply pressed Enter while 
            // inside some text field or you have some other portion of
            // javascript which triggered the form submission without pressing
            // on any submit button
        }
    }
}
于 2013-02-20T13:03:19.243 に答える
1

Ajax.BeginForm() から Html.BeginForm() に切り替えてから、JQuery を使用してフォームを送信できます。

<script type="text/javascript">
$('#save').on('click', function () {
    var form = $('form');

    $.ajax({
        url: form.attr('action'),
        type: 'post',
        data: form.serialize(),
        success: function (result) {

            // call another function
        }
    });

    return false;
});

$('#saveAndEdit').on('click', function() {

    $.ajax({
        url: form.attr('action'),
        type: 'post',
        data: form.serialize(),
        success: function (result) {

            // call another function
        }
    });

    return false;
});
</script>
于 2013-02-20T13:39:47.593 に答える