ASP.NET MVC Ajax.BeginForm AjaxOptions OnSuccess, OnFailure

Rupesh Kahane
7y
30.5k
0
2

Article

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>