Correct way to load ASP.NET MVC partial views using AJAX?
Hey everyone. Ok, here's the situation. I would like to be able to load a series of similar partial views to the parent page; just like in this article (modeling AJAX panels).
For this article, it works fine because it makes an asynchronous call to the appropriate action on the controller. But the method he uses looks like the best at best and doesn't seem very elegant. A brief overview of what is happening:
This will 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 will be:
<form action="/Home/ReportOne/reportFormOne" onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, { insertionMode: 0, updateTargetId: 'resultDiv' }); return false;">
<!-- Your form elements here... -->
</form>
As I said above, this doesn't seem like a really elegant way to achieve this, but I've tried to find an alternative for this (using jQuery or other means) and have been unsuccessful in doing so.
a source to share
JQuery solution: Load html from activity after page has finished loading.
<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>
a source to share