Partial view rendering in MVC 3 with Ajax boot image

Question

I just started using Html.RenderPartial (usercontrol, model) to display my user controls. Can this functionality be changed to show an Ajax boot image when loading a partial view?

EDIT: I tried, but could not get it to work. I have a partial view (_FixtureList.cshmtl):

@model List<Areas.Gameplan.Models.Fixture> @foreach (var item in this.Model) { <tr> <td class="teamgrid">@Html.Encode(item.Week)</td> <td><img src='@Html.Encode(item.Logo)' alt="Logo" /></td> <td class="teamgrid">@Html.Encode(item.Opponent)</td> <td class="teamgrid">@Html.Encode(item.Result)</td> </tr> 

And currently I'm browsing the page:

 public ActionResult Cincinnati() { //renderpartial List<Fixture> lstFixtures = _Base.DataRepository.GetFixtureList("2017", "Cincinnati"); return View(lstFixtures); } 

}

And this is an important part of my view (Cincinnati.cshtml):

 @model List<Areas.Gameplan.Models.Fixture> @{ ViewBag.Title = "Cincinnati Bengals"; Layout = "~/Areas/Gameplan/Views/Shared/_Layout.cshtml"; } <div id="bigborder"> <p> <br /> <div class="sidebarleftteam"> <div id="divFixtures"> <table id='tblFixtures' align='center'><tr><th><img src='../../../../Content/Images/Gameplan/fixtureweek.jpg' /></th><th><img src='../../../../Content/Images/Gameplan/fixtureopponent.jpg' /></th><th/><th><img src='../../../../Content/Images/Gameplan/fixturescore.jpg' /></th></tr> @{ Html.RenderPartial("_FixtureList", this.Model); } </table> 

How to apply your example to this code?

EDIT:

Thought this is how I did it:

 public ActionResult MyPartial() { List<Fixture> lstFixtures = _Base.DataRepository.GetFixtureList("2016", "Cincinnati"); return PartialView("_FixtureList", lstFixtures); } 

And in the view:

  $.ajax( { type: 'POST', async: true, contentType: 'application/json; charset=utf-8', dataType: 'html', url: 'MyPartial', beforeSend: function (xhr) { $('#mydiv').addClass('ajaxRefreshing'); xhr.setRequestHeader('X-Client', 'jQuery'); }, success: function (result) { $('#mydiv').html("<table id='tblFixtures' align='center'><tr><th><img src='../../../../Content/Images/Gameplan/fixtureweek.jpg' /></th><th><img src='../../../../Content/Images/Gameplan/fixtureopponent.jpg' /></th><th/><th><img src='../../../../Content/Images/Gameplan/fixturescore.jpg' /></th></tr>" + result + "</table>"); }, error: function (error) { alert(error); }, complete: function () { $('#mydiv').removeClass('ajaxRefreshing'); } }); 

Answer 1

Is it possible to change this functionality to show the Ajax boot image while partial view is loading?

No, Html.RenderPartial does not use AJAX, the content is directly included in the server.

If you want to use AJAX instead of Html.RenderPartial , put the div in your view:

 <div id="mydiv" data-url="@Url.Action("MyPartial", "Home")"></div> 

then write a controller action that will return your partial:

 public class HomeController: Controller { // that the action that serves the main view public ActionResult Index() { return View(); } // that the action that will be invoked using AJAX and which // will return the partial view public ActionResult MyPartial() { var model = ... return PartialView(model); } } 

then you will have the corresponding partial ( ~/Views/Home/Myartial.cshtml ):

 @model MyViewModel ... 

and the last step is to write javascript that will invoke the AJAX call:

 $(function() { var myDiv = $('#mydiv'); $.ajax({ url: myDiv.data('url'), type: 'GET', cache: false, context: myDiv, success: function(result) { this.html(result); } }); }); 

and the last part is loading animation. There are several ways to do this. One way is to use the global ajax event handlers :

 $(document).ajaxSend(function() { // TODO: show your animation }).ajaxComplete(function() { // TODO: hide your animation }); 

Another possibility is to simply put some text or image in your div initially:

 <div id="mydiv" data-url="@Url.Action("MyPartial", "Home")"> Loading ... </div> 

and since the contents of this div will be replaced with ajax success callback with partial contents, the download text will disappear. Just be careful with this, because if there is an error, the success callback will not work, and the div will remain with its source text. Thus, a full handler is preferred in this case to hide the animation.