如何在ASP.Net MVC AJAX调用返回嵌套PartialViews（包括他们的JavaScript） [英] How to return Nested PartialViews (including their javascript) from an AJAX call in ASP.Net MVC

问题描述

我已经创建使用嵌套的部分景色类别的树状视图：

I have created a treeview of Categories using nested partial views:

我的索引页（显示树形视图）：

my Index page (that displays the treeview):

<div>
 Category Menu:
  <input type="button" value="1" name='selectCat_btn' />
  <input type="button" value="2" name='selectCat_btn' />
</div>

<!-- Treeview -->
<% Html.RenderPartial("ItemCats_UL", Model); %>

<div id="CatSelectorOutput">
</div>

ItemCats_UL：

ItemCats_UL:

<div>
 <ul id="catsTree"> 
  <% Html.RenderPartial("ItemCats_LI", Model); %>
 </ul>
</div>

<script type="text/javascript" >
$(document).ready(function() {        
    $("#catsTree").treeview();
</script>

ItemCats_LI：

ItemCats_LI:

<%foreach (ItemCategory itemCat in Model)
 { %>
  <li>
   <%= itemCat.Name %>
    <%if (itemCat.Children != null && itemCat.Children.Count() > 0)
      { %>
       <ul>
        <% Html.RenderPartial("ItemCats_LI", itemCat.Children); %>
       </ul>
    <%} %>
 </li>
<%} %>

现在这个树形视图完美的作品，当我从我的控制器Index操作页面加载返回基本视图（指数，模型）。

Now this treeview works perfectly when I return the basic View("Index", Model) from my controllers Index action on page load.

在麻烦的是当我想改变一个AJAX调用在我的树视图（嵌套partialViews）中显示的分类模式 ...

例如：我点击一个'Cats2按钮，页面应在TreeView的2 PARENTID显示类别。我试图通过这个返回ItemCats_UL PartialView的HTML的JsonResult（使用 RenderPartialToString 方式的这里找到）。你们当中有些人可能知道的Javascript不会在你的局部视图运行当您使用AJAX的形式返回PartialViewResult，我需要使用Javascript在我的树视图这就是为什么我使用的RenderPartialToString。

For example: I click one the 'Cats2' button and the page should display Categories with ParentID of 2 in the Treeview. I attempted this by returning a JsonResult of the html of the ItemCats_UL PartialView (using a RenderPartialToString method found here) from my Controller Action. As some of you might know Javascript won't run in your partial view when you use an AJAX form to return a PartialViewResult, and I need Javascript in my Treeview which is why I'm using the RenderPartialToString.

类别选择按钮单击处理程序：

The category select button click handler:

<script type="text/javascript">
$("[name='selectCat_btn']").click(function() {       
    var CID = $(this).attr('value');      
    $.ajax({
        type: "POST",
        url: "SelectCat",
        dataType: "json",
        data: { "CID": CID },
        success: function(result) { $("#CatSelectorOutput").html(result.output); }
    });
    return false;
});
</script>

我的控制器动作：

My Controller Action:

 [AcceptVerbs(HttpVerbs.Post)]
    [UrlRoute(Name = "SelectCat", Path = "selectCat")]
    public ActionResult SelectCat(int CID)
    {
        IQueryable<ItemCategory> cats;
        cats = ItemRepo.GetItemCats().WithCID(CID);

        JsonResult result = null;
        result = new JsonResult
        {
            Data = new
            {
                success = true,
                output =
                Helpers.RenderHelper
                .RenderPartialToString("~/Views/Admin/AdminItemCatsUL.ascx",
                cats)                    
            }
        };
        return result;
    }

结果：

该ItemCats _UL partialView显示器！但嵌套PartialViews（ItemCats _ LI）不要！

The ItemCats_UL partialView displays! BUT the nested PartialViews (ItemCats_LI) don't!

错误我收到的时候我步在ItemCats_UL.ascx标记及以下code的HTML部分将鼠标悬停在：

Error I receive when I step through the markup in the ItemCats_UL.ascx and hover over the 'Html' part of the following code:

<ul id="catsTree"> 
 <% Html.RenderPartial("ItemCats_LI", Model); %>
</ul>

值不能为空。
参数名：viewContext

HTML ='HTML'扔类型'System.ArgumentNullException'的异常

我不知道是否有一个聪明的家伙在那里谁可以扩展RenderPartialToString方法包括嵌套partialviews？还是我失去了一些东西简单？

Value cannot be null. Parameter name: viewContext
Html = 'Html' threw an exception of type 'System.ArgumentNullException'
I'm wondering if there's a clever guy out there who can extend the RenderPartialToString method to include nested partialviews? Or am I missing something simple?

推荐答案

您需要在加载它钩住新返回的HTML / JavaScript的回DOM。结果
我敢肯定有很多方法可以做到这一点，但我找到了一个不错的jQuery插件所谓的liveQuery（链接）
可以帮助我做到这一点。

You need to hook the newly returned HTML / JavaScript back into the DOM upon loading it.
I'm sure there are lots of ways to do this, but I found a nice jQuery add-on called LiveQuery (link) that helps me do it.

要让它在你的情况下工作，你会成立了，看起来像这样父页面一个jQuery的document.ready功能：

To make it work in your case, you'd set up a jQuery document.ready function in the parent page that looks something like this:

$("#catsTree").livequery(function () { this.treeview(); }, function () { /* code to destroy the treeview here */ });

这篇关于如何在ASP.Net MVC AJAX调用返回嵌套PartialViews（包括他们的JavaScript）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！