Proper way to load ASP.NET MVC partial views with AJAX?

Question

Hey all. Okay here is the situation. I would like to be able to load a series of similar partial views onto a parent page; much in the same way as is being done in this article (simulating AJAX panels).

In the article, it appears to be working fine, as it is calling the corresponding action method asynchronously on the controller. But the method he is using looks like a hack at best, and doesn't seem very elegant. A brief overview of what is going on is:

This would be an independent widget that loads asynchronously.

<% using (Ajax.Form("ReportOne", null,
      new AjaxOptions { UpdateTargetId = "resultOne" },
      new { id="reportFormOne" })) { } %>

<script type="text/javascript">
   $get("reportFormOne").onsubmit();
</script>

The corresponding output would be of the form:

<form action="/Home/ReportOne/reportFormOne" onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, { insertionMode: 0, updateTargetId: 'resultDiv' }); return false;">

   <!-- Your form elements here... -->

</form>

Like I had stated above, this doesn't seem like a really elegant way to go about achieving this, but I've been trying to find an alternative for this (using jQuery or other means), and have been unsuccessful in doing so.

Answer 1

jQuery solution: loads the html from the action after page load is complete.

<script type='text/javascript'>
$(function() {
    $.load('<%= Url.Action( "ReportOne", "Home", new { id = "reportFormOne" } ) %>', null, function(response,status,xhr) {
        $('#partialView').html(reponse);
    });
});
</script>

...

<div id='partialView'>
</div>