ASP.NET MVC Ajax.BeginForm AjaxOptions OnSuccess, OnFailure

0
941

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.

 

SHARE
Previous articleAllow Only Single Checkbox To Be Checked At A Time In Kendo MVC
Next articleMaster Details View Using Telerik Grid For ASP.NET MVC
Currently working as a Software Engineer in MNC company. Having working knowledge of technologies like ASP.NET, MVC 5.0, C#, Kendo UI, KnockOut.Js, JavaScript, SQL Server 2012, HTML5 etc. He had conducted more than 80 hands on Seminars, Workshops for College, Schools and Training Institutes. He blog at http://www.c-sharpcorner.com/members/rupesh-kahane2

LEAVE A REPLY

Please enter your comment!
Please enter your name here