代码之家  ›  专栏  ›  技术社区  ›  blparker

用Ajax加载ASP.NET MVC局部视图的正确方法?

  •  1
  • blparker  · 技术社区  · 16 年前

    大家好。好吧,情况就是这样。我希望能够将一系列类似的局部视图加载到父页面上;这与在 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或其他方法),并没有成功。

    1 回复  |  直到 16 年前
        1
  •  2
  •   tvanfosson    16 年前

    jquery解决方案:在页面加载完成后从操作加载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>