Post
Ask Question

ASP.NET MVC 5: Button Loader Integration

User interaction & responsiveness are major aspects in any application. It is always good to tell the user that is happening in the application i.e. whether they have to wait for certain processing or they can proceed with another action,  etc.

Today, I shall be demonstrating the integration of a simple button loader plugin called Ladda, you can explore it more by visiting the website.

design

You can download the complete source code or you can follow step by step discussion below. The sample code is developed in Microsoft Visual Studio 2013 Ultimate.

Let's begin now:

  1. Create new MVC web project and name it "ButtonLoader".

  2. Download the Ladda plugin and incorporate its related JavaScript & CSS files into the project.

  3. Create new controller under "Controller" folder and name it "LoaderController.cs".

  4. Open "RouteConfig.cs" file under "App_Start" folder and change the default controller to "Loader" and action to "Index" as shown below.
    1. using System;  
    2. using System.Collections.Generic;  
    3. using System.Linq;  
    4. using System.Web;  
    5. using System.Web.Mvc;  
    6. using System.Web.Routing;  
    7. namespace ButtonLoader  
    8. {  
    9.     public class RouteConfig  
    10.     {  
    11.         public static void RegisterRoutes(RouteCollection routes)  
    12.         {  
    13.             routes.IgnoreRoute("{resource}.axd/{*pathInfo}");  
    14.             routes.MapRoute(name: "Default", url: "{controller}/{action}/{id}", defaults: new  
    15.             {  
    16.                 controller = "Loader", action = "Index", id = UrlParameter.Optional  
    17.             });  
    18.         }  
    19.     }  
    20. }  
  5. Create new file "LoaderViewModels.cs" under "Models" folder and place the following code in it:
    1. using System.ComponentModel.DataAnnotations;  
    2. namespace ButtonLoader.Models  
    3. {  
    4.     public class LoaderViewModel  
    5.     {  
    6.         [Required]  
    7.         [Display(Name = "Text")]  
    8.         public string Text  
    9.         {  
    10.             get;  
    11.             set;  
    12.         }  
    13.     }  
    14. }  
    Here, we have created a simple model for observing our loader effect.

  6. Now, open "LoaderController.cs" file under "Controller" folder and replace it with the following code:
    1. //-----------------------------------------------------------------------   
    2. // <copyright file="LoaderController.cs" company="None">  
    3. // Copyright (c) Allow to distribute this code.   
    4. // </copyright>  
    5. // <author>Asma Khalid</author>  
    6. //-----------------------------------------------------------------------   
    7. namespace ButtonLoader.Controllers  
    8. {  
    9.     using System;  
    10.     using System.Collections.Generic;  
    11.     using System.Linq;  
    12.     using System.Security.Claims;  
    13.     using System.Threading;  
    14.     using System.Threading.Tasks;  
    15.     using System.Web;  
    16.     using System.Web.Mvc;  
    17.     using ButtonLoader.Models;  
    18.     /// <summary>  
    19.     /// Loader controller class.   
    20.     /// </summary>  
    21.     public class LoaderController: Controller  
    22.     {  
    23.         #region Index view method.#region Get: /Loader/Index  
    24.         method.  
    25.             /// <summary>  
    26.             /// Get: /Loader/Index method.   
    27.             /// </summary>  
    28.             /// <returns>Return index view</returns>  
    29.         public ActionResult Index()  
    30.         {  
    31.             try  
    32.             {}  
    33.             catch (Exception ex)  
    34.             {  
    35.                 // Info   
    36.                 Console.Write(ex);  
    37.             }  
    38.             // Info.   
    39.             return this.View();  
    40.         }#endregion# region POST: /Loader/Index  
    41.             /// <summary>  
    42.             /// POST: /Loader/Index   
    43.             /// </summary>  
    44.             /// <param name="model">Model parameter</param>  
    45.             /// <returns>Return - Loader content</returns>  
    46.             [HttpPost]  
    47.             [AllowAnonymous]  
    48.             [ValidateAntiForgeryToken]  
    49.         public ActionResult Index(LoaderViewModel model)  
    50.         {  
    51.             try  
    52.             {  
    53.                 // Verification   
    54.                 if (ModelState.IsValid)  
    55.                 {  
    56.                     // Sleep.   
    57.                     Thread.Sleep(5000); // 5 sec.   
    58.                     // Info.   
    59.                     return this.Json(new  
    60.                     {  
    61.                         EnableSuccess = true, SuccessTitle = "Success", SuccessMsg = model.Text  
    62.                     });  
    63.                 }  
    64.             }  
    65.             catch (Exception ex)  
    66.             {  
    67.                 // Info   
    68.                 Console.Write(ex);  
    69.             }  
    70.             // Sleep.   
    71.             Thread.Sleep(5000); // 5 sec.   
    72.             // Info   
    73.             return this.Json(new  
    74.             {  
    75.                 EnableError = true, ErrorTitle = "Error", ErrorMsg = "Something goes wrong, please try again later"  
    76.             });  
    77.         }#endregion# endregion  
    78.     }  
    79. }  
    In the above code snippet, we have created a simple "HttpGet" & "HttpPost" methods to observer the behavior of the button loader. We have also placed a 5 sec delay in the post method at every response to observer the behavior of the button loader from server side as well.

  7. Now, in "Views->Loader" folder create a new page called "Index.cshtml" and place the following code in it:
    1. @using ButtonLoader.Models   
    2. @model ButtonLoader.Models.LoaderViewModel   
    3. @{   
    4. ViewBag.Title = "ASP.NET MVC5 C#: Button Loader Integration";   
    5. }   
    6.   
    7. <div class="row">  
    8.     <div class="panel-heading">  
    9.         <div class="col-md-8">  
    10.             <h3>  
    11.                 <i class="fa fa-file-text-o"></i>  
    12.                 <span>Bootstrap Modal with ASP.NET MVC5 C#</span>  
    13.             </h3>  
    14.         </div>  
    15.     </div>  
    16. </div>  
    17. <div class="row">  
    18.     <section class="col-md-4 col-md-push-4">  
    19.         @using (Ajax.BeginForm("Index", "Loader", new AjaxOptions { HttpMethod = "POST", OnSuccess = "onLoaderSuccess" }, new { @id = "LoaderformId", @class = "form-horizontal", role = "form" }))   
    20.         {   
    21.             @Html.AntiForgeryToken()   
    22.   
    23.         <div class="well bs-component">  
    24.             <br />  
    25.             <div class="row">  
    26.                 <div class="col-md-12 col-md-push-2">  
    27.                     <div class="form-group">  
    28.                         <div class="col-md-10 col-md-pull-1">  
    29.                             @Html.TextBoxFor(m => m.Text, new { placeholder = Html.DisplayNameFor(m => m.Text), @class = "form-control" })   
    30.                             @Html.ValidationMessageFor(m => m.Text, "", new { @class = "text-danger custom-danger" })   
    31.                         </div>  
    32.                     </div>  
    33.                     <div class="form-group">  
    34.                         <div class="col-md-18"></div>  
    35.                     </div>  
    36.                     <div class="form-group">  
    37.                         <div class="col-md-4 col-md-push-2">  
    38.                             <div >  
    39.                                 <button type="submit"   
    40.                                     class="btn btn-warning ladda-button"   
    41.                                     value="Process"   
    42.                                     data-style="slide-down">  
    43.                                     <span class="ladda-label">Process</span>  
    44.                                 </button>  
    45.                             </div>  
    46.                         </div>  
    47.                     </div>  
    48.                 </div>  
    49.             </div>  
    50.         </div>  
    51. }   
    52.   
    53.     </section>  
    54. </div>  
    In the above code snippet, we have created a simple text input box and a button, for Ladda plugin to work however, you have to use following structure on button i.e.
    1. <button type="submit" class="btn btn-warning ladda-button" value="Process" data-style="slide-down">  
    2.     <span class="ladda-label">Process</span>  
    3. </button>  
    Unfortunately, Ladda plugin does not work with input type buttons.

  8. Under "Scripts" folder, create a new script called "custom-loader.js" and place the following code in it:
    1. $(document).ready(function()  
    2. {  
    3.     Ladda.bind('.ladda-button');  
    4.     $("#LoaderformId").submit(function(event)  
    5.     {  
    6.         var dataString;  
    7.         event.preventDefault();  
    8.         event.stopImmediatePropagation();  
    9.         var action = $("#LoaderformId").attr("action");  
    10.         // Setting.   
    11.         dataString = new FormData($("#LoaderformId").get(0));  
    12.         contentType = false;  
    13.         processData = false;  
    14.         $.ajax(  
    15.         {  
    16.             type: "POST",  
    17.             url: action,  
    18.             data: dataString,  
    19.             dataType: "json",  
    20.             contentType: contentType,  
    21.             processData: processData,  
    22.             success: function(result)  
    23.             {  
    24.                 // Result.   
    25.                 onLoaderSuccess(result);  
    26.             },  
    27.             error: function(jqXHR, textStatus, errorThrown)  
    28.             {  
    29.                 //do your own thing   
    30.                 alert("fail");  
    31.                 // Stop Button Loader.   
    32.                 Ladda.stopAll();  
    33.             }  
    34.         });  
    35.     }); //end .submit()   
    36. });  
    37. var onLoaderSuccess = function(result)  
    38. {  
    39.     if (result.EnableError)  
    40.     {  
    41.         // Clear.   
    42.         $('#ModalTitleId').html("");  
    43.         $('#ModalContentId').html("");  
    44.         // Setting.   
    45.         $('#ModalTitleId').append(result.ErrorTitle);  
    46.         $('#ModalContentId').append(result.ErrorMsg);  
    47.         // Show Modal.   
    48.         $('#ModalMsgBoxId').modal(  
    49.         {  
    50.             backdrop: 'static',  
    51.             keyboard: false  
    52.         });  
    53.     }  
    54.     else if (result.EnableSuccess)  
    55.     {  
    56.         // Clear.   
    57.         $('#ModalTitleId').html("");  
    58.         $('#ModalContentId').html("");  
    59.         // Setting.   
    60.         $('#ModalTitleId').append(result.SuccessTitle);  
    61.         $('#ModalContentId').append(result.SuccessMsg);  
    62.         // Show Modal.   
    63.         $('#ModalMsgBoxId').modal(  
    64.         {  
    65.             backdrop: 'static',  
    66.             keyboard: false  
    67.         });  
    68.         // Resetting form.   
    69.         $('#LoaderformId').get(0).reset();  
    70.     }  
    71.     // Stop Button Loader.   
    72.     Ladda.stopAll();  
    73. }  
    I have also combined modal here to display server response. The following piece of code will bind the button loader plugin with the button i.e.
    1. Ladda.bind('.ladda-button');   
    So, whenever, I click the button the button loader will start. The following piece of code will stop the button loader effect whenever I receive a response from the server side:
    1. // Stop Button Loader.   
    2. Ladda.stopAll();   
  9. Now, execute the application and you can see the following:

    see run

    Output


    run

Conclusion

In this tutorial you learned how to enhance user interactivity of a MVC base web application by integrating button loader plugin and you also learned how to combine button loader effect with server side response


Similar Articles