3

我使用嵌套的局部视图创建了类别的树视图：

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

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

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

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

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

现在，当我在页面加载时从控制器索引操作返回基本视图（“索引”，模型）时，此树视图可以完美运行。

当我想通过 AJAX 调用更改 Treeview 中显示的类别模型（嵌套的部分视图）时，问题就来了......

例如：我单击一个“Cats2”按钮，页面应在 Treeview 中显示 ParentID 为 2 的类别。我通过从我的控制器操作返回 ItemCats_UL PartialView 的 html 的 JsonResult（使用在此处找到的RenderPartialToString方法）来尝试此操作。你们中的一些人可能知道，当您使用 AJAX 表单返回 PartialViewResult 时，Javascript 不会在您的局部视图中运行，并且我的 Treeview 中需要 Javascript，这就是我使用 RenderPartialToString 的原因。

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

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

我的控制器动作：

 [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 displays! BUT the nested PartialViews (ItemCats_LI）不要！

当我单步执行 ItemCats_UL.ascx 中的标记并将鼠标悬停在以下代码的“Html”部分时收到错误：

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

值不能为空。参数名称：viewContext
Html = 'Html' 抛出了 'System.ArgumentNullException' 类型的异常
我想知道是否有聪明人可以扩展 RenderPartialToString 方法以包含嵌套的局部视图？还是我错过了一些简单的东西？

4

1 回答 1

-1

您需要在加载时将新返回的 HTML / JavaScript 挂钩回 DOM。
我确信有很多方法可以做到这一点，但我发现了一个很好的 jQuery 插件，叫做 LiveQuery ( link ) 可以帮助我做到这一点。

为了使它适用于您的情况，您需要在父页面中设置一个 jQuery document.ready 函数，如下所示：

$("#catsTree").livequery(function () { this.treeview(); }, function () { /* code to destroy the treeview here */ });
于 2011-01-18T05:22:22.723 回答