web-dev-qa-db-ja.com

Jquery AJAX=を使用してMVCアクションを呼び出し、MVCでフォームを送信する方法は？

私のMVCビューにはボタンがあります：

_<input id="btnSave" type="submit" name="Save" value="Save" />
_

このボタンをクリックすると、1つのアクションを呼び出し、そこで何かを実行してからフォームを送信する必要があります。

私はこのjQueryを持っています：

_$('#btnSave').click(function () {    
    $.ajax({
        url: "/Home/SaveDetailedInfo",
        type: "POST",
        data: JSON.stringify({ 'Options': someData}),
        dataType: "json",
        traditional: true,
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            if (data.status == "Success") {
                alert("Done");
            } else {
                alert("Error occurs on the Database level!");
            }
        },
        error: function () {
            alert("An error has occured!!!");
        }
    });
});
_

次に、フォームを送信します。コントローラーには2つのアクションがあります：

_public ActionResult SaveDetailedInfo(Option[] Options)
{
    return Json(new { status = "Success", message = "Success" });
}

[HttpPost]
public ActionResult Save()
{ 
    return RedirectToAction("Index", "Home");
}
_

問題は、ボタンに_type="submit"_が含まれている場合、SaveDetailedInfoアクションに到達できないためです。ajaxはerrorを提供しますが、_type="submit"_、ajaxを削除すると正常に動作しますが、Saveアクションは実行されません。

両方のアクションを実行する方法はありますか？ _Ajax > Success_の後にjqueryで_type=submit_を追加して.click()を使用しようとしたのかもしれませんが、奇妙に聞こえます。

javascriptjqueryajaxasp.net-mvcasp.net-mvc-4
15
Bryuk

preventDefault()を使用して送信ボタンのイベントを停止し、ajax呼び出しでsubmit()を使用してフォームを送信します。

$('#btnSave').click(function (e) {
    e.preventDefault(); // <------------------ stop default behaviour of button
    var element = this;    
    $.ajax({
        url: "/Home/SaveDetailedInfo",
        type: "POST",
        data: JSON.stringify({ 'Options': someData}),
        dataType: "json",
        traditional: true,
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            if (data.status == "Success") {
                alert("Done");
                $(element).closest("form").submit(); //<------------ submit form
            } else {
                alert("Error occurs on the Database level!");
            }
        },
        error: function () {
            alert("An error has occured!!!");
        }
    });
});
22
Ehsan Sajjad

ボタンがフォーム内にあると仮定すると、ボタンクリックのデフォルトの動作が妨げられることはありません。つまり、フォーム送信に加えてAJAX呼び出しが行われます。見ることは

  1. フォームの送信は、AJAX呼び出しが返すよりも速く行われます
  2. フォームの送信により、ブラウザはAJAXリクエストを中止し、フォームの送信を続行します。

したがって、ボタンクリックのデフォルトの動作を防ぐ必要があります

$('#btnSave').click(function (e) {

    // prevent the default event behaviour    
    e.preventDefault();

    $.ajax({
        url: "/Home/SaveDetailedInfo",
        type: "POST",
        data: JSON.stringify({ 'Options': someData}),
        dataType: "json",
        traditional: true,
        contentType: "application/json; charset=utf-8",
        success: function (data) {

            // perform your save call here

            if (data.status == "Success") {
                alert("Done");
            } else {
                alert("Error occurs on the Database level!");
            }
        },
        error: function () {
            alert("An error has occured!!!");
        }
    });
});
5
Russ Cam

AJAX urlが「/ Home/Save」ではなく「/ Home/SaveDetailedInfo」を指しているため、C＃アクション「Save」は実行されません。

アクション内から別のアクションを呼び出すには、次のソリューションを試すことができます。 link

ここに別のより良い解決策があります： link

[HttpPost]
public ActionResult SaveDetailedInfo(Option[] Options)
{
    return Json(new { status = "Success", message = "Success" });
}

[HttpPost]
public ActionResult Save()
{ 
    return RedirectToAction("SaveDetailedInfo", Options);
}

AJAX：

Initial ajax call url: "/Home/Save"
on success callback: 
   make new ajax url: "/Home/SaveDetailedInfo"
2
TchiYuan