Comment retourner emboîtées PartialViews (y compris leur javascript) d'un appel AJAX dans ASP.Net MVC

Question

J'ai créé une vue arborescente de catégories à l'aide des vues partielles imbriquées:

ma page d'index (qui affiche l'arborescence):

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

Maintenant, cette arborescence fonctionne parfaitement lorsque je retourne la vue de base ("Index", Modèle) de mon action Index des contrôleurs au chargement de la page.

Le problème vient quand je veux changer le modèle Catégories affiché dans mon Treeview (la nichée partialViews) à partir d'un appel AJAX ...

Par exemple: je clique sur un bouton « Cats2 » et page devrait afficher Catégories avec ParentID de 2 dans l'arborescence. J'ai essayé ceci en renvoyant un JsonResult du html du ItemCats_UL PartialView (utilisant une méthode RenderPartialToStringfound here) de mon action de contrôleur. Comme certains d'entre vous savent peut-être que Javascript ne fonctionnera pas dans votre vue partielle quand vous utilisez un formulaire AJAX pour retourner un PartialViewResult, et j'ai besoin de Javascript dans mon Treeview, c'est pourquoi j'utilise le RenderPartialToString.

La catégorie bouton de sélection cliquez sur Gestionnaire:

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

Mon contrôleur d'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; 
    } 

Le résultat:

Les ItemCats _UL partialView displays! BUT the nested PartialViews (ItemCats_ LI) ne sont pas!

erreur que je reçois lorsque je fais un pas par le balisage dans le ItemCats_UL.ascx et survolez la partie « Html » du code ci-dessous:

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

valeur ne peut pas être nulle. Nom du paramètre: viewcontext
Html = « Html » a lancé une exception de type « System.ArgumentNullException »
Je me demande s'il y a un gars intelligent là-bas qui peut étendre la méthode de RenderPartialToString pour inclure partialviews imbriquées? Ou est-ce que je manque quelque chose de simple?

Answer 1

Vous devez connecter le HTML/JavaScript récemment retourné dans le DOM lors du chargement.
Je suis sûr qu'il y a beaucoup de façons de le faire, mais j'ai trouvé un joli add-on jQuery appelé LiveQuery (link) qui m'aide à le faire. Pour le faire fonctionner dans votre cas, vous devez configurer un document jQuery.fonction prêt dans la page parent qui ressemble à ceci:

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