兩人在Ajax.BeginForm提交按鈕。需要調用不同的js函數的onSuccess

Question

我有一個Ajax的形式我的MVC頁上，有兩個獨立的提交按鈕...

@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函數。如果用戶點擊「保存&下一步」按鈕，就應該提交表單，然後調用javascript函數「nextForm」。有沒有簡單的方法來實現這一點？

Answer 1

是否有實現這一目標的一個簡單的方法？

不，您可以讓控制器操作傳遞結果中單擊的按鈕。可以這樣做既可以作爲一個JSON屬性（如果你正在返回JSON），或者它也可能是一個自定義的響應HTTP頭。

然後在你的成功回調（只能是一個）中，你可以檢索這個值，以便知道哪個按鈕被點擊並採取相應的行動。

因此，通過給一個名字到您的提交按鈕啓動，讓你知道一個被點擊其中：

@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 
     } 
    } 
} 

Answer 2

您可以從Ajax.BeginForm（）切換到Ht ml.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> 

Answer 3

你也可以寫這樣的事：

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

    <input type="submit" onclick="showNextForm = true;">Save & Next</button> 
    <input type="submit" onclick="showNextForm = false;">Save</button> 
} 

...

var showNextForm = false; 

function closeForm(data) { 
    if(showNextForm) { 
     nextForm(); 
    } 
    else { 
     // do your stuff 
    } 
}