ASP.NET MVC Ajax.BeginForm AjaxOptions OnSuccess, OnFailure

Introduction

The jQuery Unobtrusive Ajax library complements jQuery Ajax methods by adding support for specifying options for HTML replacement via Ajax calls HTML5 data.

Step 1

Create a new MVC Empty Project using Visual Studio. This example shows how to return Ajax Begin Form Ajax Options custom arguments for OnSuccess, OnFailure.

Add new Layout.cshtml into shared folder. Add references of Kendo, CSS, and JavaScript into this Layout.cshtml

<!DOCTYPE html>
<style>
.fontColor {
color:#2f0319 !important
}
</style>
<html>
<head>
<title>@ViewBag.Title Ajax Options</title>
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.kendostatic.com/2014.2.716/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.aspnetmvc.min.js"></script>
<script src="~/Scripts/kendo.modernizr.custom.js"></script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">@Html.ActionLink("www.CoderFunda.com", "", "", new { @class="fontColor" })</p>
</div>
<div class="float-right">
<nav>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p><span class="fontColor" style="font:14px large"> © @DateTime.Now.Year - www.CoderFunda.com</span> </p>
</div>
</div>
</footer>
</body>
</html>

Step 2

Add MVC Ajax Nuget Package from Nuget console Manager

Install-Package MicrosoftMvcAjax.Mvc5

IMP

Do not forget to add below script references to your cshtml page.

<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

Now, add HomeController in Controller. There are two action methods, one to take user input, and another to submit data on click event to controller in which I am going to handle this in try catch block.

public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult AjaxOptionPostData(string userDate)
{
dynamic showMessageString = string.Empty;
try
{
DateTime dt = Convert.ToDateTime(userDate);
showMessageString = new
{
param1 = 200,
param2 = "You have enter correct date !!!"
};
return Json(showMessageString, JsonRequestBehavior.AllowGet);
}
catch (Exception ex)
{
var errorMsg = ex.Message.ToString();
showMessageString = new
{
param1 = 404,
param2 = "Exception occured while converting user date"
};
return Json(showMessageString, JsonRequestBehavior.AllowGet);
}
}
}

Step 3

Add View by right clicking on Action Method Index which will accept user input as a date format.

In Ajax.BeginForm there are new AjaxOptions: OnSuccess and OnFailure for success and failure respective responses from action method, and for those we are going to write a javascript alert which will show an appropriate message.

@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<br />
<br />
<div id="targetDiv">
@using (Ajax.BeginForm("AjaxOptionPostData", "Home", new AjaxOptions { HttpMethod = "POST", OnSuccess = "OnSuccess", OnFailure = "OnFailure" }))
{
@Html.Label("Enter Your Date")
<br />
@Html.TextBox("UserDate")
<br />
<button id="btnSubmit" type="submit" class="btn btn-primary">Submit</button>
}
</div>
</body>
</html>
<script type="text/javascript">
function OnSuccess(data) {
alert('HTTP Status Code: ' + data.param1 + " " + data.param2);
}
function OnFailure(data) {
alert('HTTP Status Code: ' + data.param1 + ' Error Message: ' + data.param2);
}
</script>

Step 4

Now, run the application. Enter the correct date in input textbox and click on "Submit".

If you enter the wrong date in input textbox and click on "Submit" this will happen:

Summary

In this article, you learned the basics of how to get ASP.NET MVC 5 Ajax.BeginForm AjaxOptions custom arguments for OnSuccess, OnFailure.

3 Comments

Join the conversation! Your thoughts help the community grow.

Ken Samson8y ago
You have a bug - you're actually never calling the OnFailure method - the message does not contain 'Error Message:' because the status code is not actually set. You need to add Response.StatusCode = 404; to the catch statement to call the ajax OnFailure method.
Jignesh Trivedi9y ago
ASP.NET 5 is rename to ASP.NET core. AM I right?
- Ken Samson8y ago
  MVC 5 is not ASP.NET Core. MVC 5 is ASP.NET 4.5. MVC 6 is part of ASP.NET Core