Ajax BeginForm Explained
This example is very simple and can be found here on the website, you can try this one :
Ajax fun
Ensure that "jquery.unobtrusive-ajax.js" is downoaded to the project and implemented. So that they represented in the following order:
Ensure that "jquery.unobtrusive-ajax.js" is downoaded to the project and implemented. So that they represented in the following order:
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
Start by creating two controller methods as here. (notice that they return JSON strings...)
[HttpPost]
public ActionResult AjaxPost1(string Name)
{
return Json("Good name you got there, "+ Name );
}
[HttpPost]
public ActionResult AjaxPost2(string Occupation)
{
return Json("Congratulation with your job as " + Occupation);
}
Notice the names of the two methods.
Add following code to the respective cshtml file:
<form asp-controller="AjaxFun" asp-action="AjaxPost1" data-ajax-complete="onComplete" data-ajax-success="OnSuccess"
data-ajax-failure="OnFailure" data-ajax="true" data-ajax-method="POST">
@Html.Label("Enter Your Name")
<br />
@Html.TextBox("Name", null, new { @class = "form-control col-md-2" })
<span>Simply press the ENTER button or click the button after typing the name.</span>
<br />
<hr />
<button id="btnSubmit" type="submit" class="btn btn-primary">Comment on Name</button>
</form>
<div id="div1"> </div>
< br />
<form asp-controller="AjaxFun" asp-action="AjaxPost2" data-ajax-complete="onComplete" data-ajax-success="OnSuccess1"
data-ajax-failure="OnFailure" data-ajax="true" data-ajax-method="POST">
@Html.Label("Enter Your occupation")
<br />
@Html.TextBox("Occupation", null, new { @class = "form-control col-md-2" })
<span>Simply press the ENTER button or click the button after typing the name.</span>
<br />
<hr />
<button id="btnSubmit" type="submit" class="btn btn-primary">Comment on Occupation</button>
</form>
The bold text, data-ajax=true is the keypoint to make it Ajax-oriented.
As you can see there are two AJAX beginform on the page referring to the method names in the controller.
Notice the Controller name, "Ajaxfun" and the AjaxOptions events, "Onsuccess" and "Onfailure".
We only need to create the return events in the cshtml file;
function OnSuccess(data) {
$("#div1").html(data);
}
function OnSuccess1(data) {
$("#div2").html(data);
}
function OnFailure(data) {
alert(data);
}