title: ASP.NET MVC and AJAX
body: <p>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). </p>
  
  <p>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. </p>
  
  <p>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? </p>
  
  <p>I saw that it is possible to <a href="http://forums.asp.net/t/1438487.aspx" rel="nofollow noreferrer">render a partial view to a string</a> 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.</p>
  
  <p>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 <a href="http://weblogs.asp.net/shijuvarghese/archive/2008/07/23/asp-net-mvc-grid-view-using-mvccontrib.aspx" rel="nofollow noreferrer">GridView</a> with paging and sorting). </p>
  
  <p>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.</p>
  
  <hr>
  
  <p>UPDATE:</p>
  
  <p><a href="https://stackoverflow.com/users/83889/andrew-siemer">Andrew Siemer</a> <a href="https://stackoverflow.com/questions/1096314/asp-net-mvc-and-ajax#1096363">suggested</a> 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.</p>