ASP.NET MVC and AJAX

Question

I have a view which is composed of top, left and bottom headers and a main contents pane. Suppose that during an AJAX request I need to update the HTML of the top, bottom and main panels (the left header should stay the same).

I was wondering what would be the best way to accomplish this. The first thought was to put the main contents panel into a partial and have a controller action that would return PartialView. This wouldn't work because as the action returns only the HTML of the main pane I cannot update the top and bottom headers.

So if I put the top and bottom headers into their own respective partial views I would need my controller action to return multiple partial views. Is this possible at all or I am doing something completely off the track?

I saw that it is possible to render a partial view to a string so I thought that I could use this technique in the action to return a JSON object with 3 properties representing the HTML of the 3 partials that I need to update. But this feels like a very wrong approach to me if possible at all.

Another idea I had was to return a JSON object only containing the data necessary for the partials and use javascript to construct the HTML. But building an UI in javascript looks like a difficult job (The main contents partial uses MvcContrib's GridView with paging and sorting).

So I would really appreciate suggestions on what would be the cleanest approach to handle such scenario. Also an adaptive solution would be great: for example if the user has javascript disabled it would just reload the whole page without AJAX.

---

UPDATE:

Andrew Siemer suggested placing each section into its own partial view and perform multiple ajax requests. This seems like a perfectly valid approach but unfortunately it is not applicable in my scenario because of the following detail I missed in my initial problem description: the top header is actually used to display error/information messages of events occurring in the main panel. So for example I need to show the error message in case an exception is thrown when fetching the model for the main panel. So only a single request could be made in order to update those two panels.

Answer 1

You can easily place each section into its own partial view. This would then allow you to make a jquery request for each view once your data has been submitted/changed. Each call could then be pushed into the appropriate section. This is very doable and sounds like the appropriate path.

I would not expect your controller to return multiple partial views...as this will break SRP!

Update: In following with your update...you can still fetch the sections separately. This simply takes a bit more ajax coolness on your part in that each fetch can return an error chunk (by way of a JSON request). If any error comes back then those error messages can be displayed in the header. Or...you can make the header request last for errors once all of the other requests have reported back in which case each partial view can toss it's error messages to a session variable for the error state...and then show those messages in the header.

A big reason for choosing to go with each section as it's own section rather than one uber request may not yet be apparent in the initial design. With each section being controlled separately you can then do fancy things such as caching each section independently, providing more frequent updates in one area over another, etc.

Answer 2

This is a tricky one. How about this?

Setup a partial request for each component top, left, main which each return a partial view with the data needed for that area. Then every time there is an event in the main panel kick off a refresh of the partials in each area to update them.

Alternatively have them all on fixed timers to poll for new data.