使用 AJAX 加载 ASP.NET MVC 部分视图的正确方法？

Question

大家好。好的，情况就是这样。我希望能够将一系列类似的部分视图加载到父页面上；与this 文章（模拟 AJAX 面板）中所做的方式大致相同。

在文章中，它似乎工作正常，因为它在控制器上异步调用相应的操作方法。但他使用的方法充其量看起来像是一个黑客，而且看起来不是很优雅。正在发生的事情的简要概述是：

这将是一个异步加载的独立小部件。

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

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

相应的输出格式为：

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

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

</form>

就像我上面所说的，这似乎不是一个真正优雅的方式来实现这一点，但我一直在尝试寻找替代方案（使用 jQuery 或其他方式），但未能成功这样做。

Answer 1

jQuery解决方案：页面加载完成后从action中加载html。

<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>