在我的MVC视图中,我有一个按钮:
<input id="btnSave" type="submit" name="Save" value="Save" />
当我单击此按钮时,我需要调用一个动作,在其中执行一些操作,然后提交我的表单。
我有这个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"我按下按钮时,无法到达SaveDetailedInfoAction,导致ajax给了我error,但是当我删除时type="submit",ajax可以正常工作,但是SaveAction永远不会执行。
type="submit"
SaveDetailedInfo
error
Save
请问如何执行两个动作的任何想法?我想也许在Ajax > Success尝试type=submit通过jquery 添加并使用之后.click(),但这对我来说听起来很奇怪。
Ajax > Success
type=submit
.click()
使用preventDefault()停止提交按钮,并在Ajax调用成功使用提交表单的事件submit():
preventDefault()
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!!!"); } }); });