Rendering partial views in MVC 3 with Ajax loading image

Question

I have just started using Html.RenderPartial(usercontrol, model) to render my user controls. Is it possible to change this functionality to show an Ajax loading image while the partial view loads?

EDIT : Had a try at this, but have been unable to get it to work. I have a partial view like this (_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 this is currently how I am rendering the page :

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

        return View(lstFixtures);
    }

}

And this is the relevant 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 would I apply your example to this code?

EDIT :

Figured it out, 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 an Ajax loading image while the partial view loads?

No, Html.RenderPartial doesn't use any AJAX, the content is directly included on the server.

If you want to use AJAX instead of Html.RenderPartial put a 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's the action that serves the main view
    public ActionResult Index()
    {
        return View();
    }

    // that's 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 trigger 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 piece is to show a loading animation. This could be done in multiple ways. 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 replace in the success callback of the ajax call with the contents of the partial, the loading text will disappear. Just be careful with this because if there is an error the success callback won't trigger and the div will stay with its initial text. So the complete handler is preferred in this case to hide the animation.