Post
Ask Question

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 
  1. <!DOCTYPE html>  
  2. <style>  
  3.     .fontColor {  
  4.         color:#2f0319 !important  
  5.     }  
  6. </style>  
  7. <html>  
  8. <head>  
  9.     <title>@ViewBag.Title Ajax Options</title>  
  10.     <link href="~/Content/Site.css" rel="stylesheet" />  
  11.     <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />  
  12.     <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />  
  13.     <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />  
  14.     <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />  
  15.     <script src="http://cdn.kendostatic.com/2014.2.716/js/jquery.min.js"></script>  
  16.     <script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>  
  17.     <script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.aspnetmvc.min.js"></script>  
  18.     <script src="~/Scripts/kendo.modernizr.custom.js"></script>  
  19. </head>  
  20. <body>  
  21.     <header>  
  22.         <div class="content-wrapper">  
  23.             <div class="float-left">  
  24.                 <p class="site-title">@Html.ActionLink("www.CoderFunda.com", "", "", new { @class="fontColor" })</p>  
  25.             </div>  
  26.             <div class="float-right">  
  27.                 <nav>  
  28.                     <ul id="menu">  
  29.                         <li>@Html.ActionLink("Home", "Index", "Home")</li>  
  30.                         <li>@Html.ActionLink("About", "About", "Home")</li>  
  31.                         <li>@Html.ActionLink("Contact", "Contact", "Home")</li>  
  32.                     </ul>  
  33.                 </nav>  
  34.             </div>  
  35.         </div>  
  36.     </header>  
  37.     <div id="body">  
  38.         @RenderSection("featured", required: false)  
  39.         <section class="content-wrapper main-content clear-fix">  
  40.             @RenderBody()  
  41.         </section>  
  42.     </div>  
  43.   
  44.     <footer>  
  45.         <div class="content-wrapper">  
  46.             <div class="float-left">  
  47.                 <p><span  class="fontColor" style="font:14px large"> © @DateTime.Now.Year - www.CoderFunda.com</span> </p>  
  48.             </div>  
  49.         </div>  
  50.     </footer>  
  51. </body>  
  52. </html>   
Step 2

Add MVC Ajax Nuget Package from Nuget console Manager 
  1. Install-Package MicrosoftMvcAjax.Mvc5  
IMP

Do not forget to add below script references to your cshtml page. 
  1. <script src="~/Scripts/jquery-1.8.2.min.js"></script>  
  2. <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.  
  1. public class HomeController : Controller  
  2.    {  
  3.        public ActionResult Index()  
  4.        {  
  5.            return View();  
  6.        }  
  7.   
  8.        [HttpPost]  
  9.        public ActionResult AjaxOptionPostData(string userDate)  
  10.        {  
  11.            dynamic showMessageString = string.Empty;  
  12.            try  
  13.            {  
  14.                DateTime dt = Convert.ToDateTime(userDate);  
  15.                showMessageString = new  
  16.                {  
  17.                    param1 = 200,  
  18.                    param2 = "You have enter correct date !!!"  
  19.                };  
  20.                return Json(showMessageString, JsonRequestBehavior.AllowGet);  
  21.            }  
  22.            catch (Exception ex)  
  23.            {  
  24.                var errorMsg = ex.Message.ToString();  
  25.                showMessageString = new  
  26.                {  
  27.                    param1 = 404,  
  28.                    param2 = "Exception occured while converting user date"  
  29.                };  
  30.                return Json(showMessageString, JsonRequestBehavior.AllowGet);  
  31.            }  
  32.        }  
  33.    }  
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. 
  1. @{  
  2.     Layout = "~/Views/Shared/_Layout.cshtml";  
  3. }  
  4. <script src="~/Scripts/jquery-1.8.2.min.js"></script>  
  5. <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>  
  6. <!DOCTYPE html>  
  7. <html>  
  8. <head>  
  9.     <meta name="viewport" content="width=device-width" />  
  10.     <title>Index</title>  
  11. </head>  
  12. <body>  
  13.     <br />  
  14.     <br />  
  15.     <div id="targetDiv">  
  16.         @using (Ajax.BeginForm("AjaxOptionPostData", "Home", new AjaxOptions { HttpMethod = "POST", OnSuccess = "OnSuccess", OnFailure = "OnFailure" }))   
  17.         {  
  18.             @Html.Label("Enter Your Date")  
  19.             <br />  
  20.             @Html.TextBox("UserDate")  
  21.             <br />  
  22.             <button id="btnSubmit" type="submit" class="btn btn-primary">Submit</button>  
  23.         }  
  24.     </div>  
  25. </body>  
  26. </html>  
  27. <script type="text/javascript">  
  28.     function OnSuccess(data) {  
  29.         alert('HTTP Status Code: ' + data.param1 + "  " + data.param2);  
  30.      }  
  31.     function OnFailure(data) {  
  32.         alert('HTTP Status Code: ' + data.param1 + '  Error Message: ' + data.param2);  
  33.      }  
  34. </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.


Similar Articles