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');
     }
 });

Can you elaborate little what you are trying to achieve?

VJAI
– VJAI

2012-07-19 09:45:17 +00:00
Commented Jul 19, 2012 at 9:45 — VJAI
– VJAI, Commented Jul 19, 2012 at 9:45

Darin Dimitrov · Accepted Answer · 2012-07-19 07:26:05Z

13

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.

edited Jul 19, 2012 at 7:26

answered Jul 19, 2012 at 7:20

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

hackp0int Over a year ago

You can do more simple View injection into html container, via Pure JQuery and it's add's more simplicity to your code... I think your approach is more basic than and creates coupling between html jquery and c# code...

SMK Over a year ago

Thank You! Darin Dimitrov I solved my problem using your solution.

stink Over a year ago

This works perfectly except for the html is still rendering when the ajax compleats. Its there another way to hide the div after the html is finished rendering?

Collectives™ on Stack Overflow

Rendering partial views in MVC 3 with Ajax loading image

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related