CODEWITHSUNDEEP
c#asp.netasp.net-mvcasp.net-mvc-4
gog
gog

Reputation: 12988

Show loading panel on index action of ASPNET MVC

In my ASP.NET MVC 5 web site i have a devexpress navbar with multiple itens, each item have a single unique controller, always when i click on a item the Index action of the corresponding controller is called.

public ActionResult Index()
{
  //Load large data and return it into a gridview.
}

While im loading this data i would like to show a loading panel but i dont know where i can do it using in mvc, in aspnet webforms its easier to do something like that.

Any MVC expert could help me with this?

Upvotes: 0

Views: 4409

Answers (1)

Cristian E.
Cristian E.

Reputation: 3583

Inside your view you suppose to use am Ajax Form, and to point to your LoadingElementId in it's definition. Here is an example:

@using (Ajax.BeginForm("FilterNews", "News", null,
new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "container", LoadingElementId = "custom-loading" }))
{
<div id='container'>
    //Your helpers @Html.TextBoxFor(x => x.....) or render a partial 
</div>
}
<style>
.loading{
 position:absolute;
 width:100%,
 height:100%,
 top:0,
 left:0,
 background:white,
 }
</style>
<div id="custom-loading" class="loading">Loading..Please wait...</div>

Also if you want to display a Loader for every XHR Call u may set a binder on ajaxSend event like this :

<div id="ajax-loader-element">
    <img src="@Url.Content("~/Content/Images/ajax-loader.gif")"/>
</div>

<script type="text/javascript">
    jQuery(document).ready(function() {
       jQuery(document).bind("ajaxSend", function () {
           jQuery('#ajax-loader-element').show();
       }).bind("ajaxComplete", function() {
           jQuery('#ajax-loader-element').hide();
       });
    });
</script>

Upvotes: 1

Related Questions