Question

I am using ASP .NET MVC 3 and I have an interesting problem to solve that I am hoping for some advice on.

I have a page that has a number of divs inside it. The contents of each div changes over time and so currently I have a timer for each div running that makes a $.ajax request to the server which returns a PartialViewResult with the updated contents of the div. The partial view is quite complex and references other views.

The problem with this approach is that it does not scale very well. It could be that each user has a lot of these timers running and with a lot of users the server is constantly being hit. I would rather, therefore, make a single request to the server that returns, potentially, multiple div contents so it would be:

div1 { some html }
div2 { some html }

…

Then on the client I could put each bit of HTML into the correct position on the page.

I thought that what I could do is return JSON from the server but my problem is – how do I get the HTML? At the moment the razor compiler will run and turn my partial view cshtml files into HTML but if I am returning JSON, is it possible to programmatically call the razor compiler?

I found Razor Engine here: http://razorengine.codeplex.com/ that seems to do what I want but is it possible to do it with just vanilla ASP NET MVC?

Or, given the problem, is there a better way that I could achieve my goal?

Thanks for any help!

Answer 1

Create an Action that returns a new PartialView that renders all of those PartialViews.
e.g.
an action:

public PartialViewResult AggregatedAction(args)
{
    return PartialView();
}

with a view that contains:

@Html.Action("IndividualAction1", null)
@Html.Action("IndividualAction2", null)
@Html.Action("IndividualAction3", null)

See http://haacked.com/archive/2009/11/18/aspnetmvc2-render-action.aspx for more details.

That way there is only one request and the rendering engine is being called from the right place, i.e. the view.

Then with the result, you can search for the various divs and replace the html in the client.

$('div#id1').html('div#id1',$(data));
$('div#id2').html('div#id2',$(data));

If the structure of your page allows it, you should use: http://api.jquery.com/load/ (as @Jorge says) to replace all of the html with one line.

$('div#targetDiv').load('Controller\AggregatedAction', anyData);