JavaScriptイベントによる部分ビューの再構築方法は？

Question

ツリーオブジェクトから選択されたオブジェクトテーブルと属性テーブルを持つWebページを作成する必要があります。私は3つの見解を作った。 1つはツリーの部分、1つは部分的な属性表、もう1つはこのビューを結合する部分です。しかし、今私は問題がある、私はツリー内のオブジェクトを選択すると属性テーブルを埋める方法を把握することはできません。

マイコード：ツリーの

<div class="container"> 
    <div class="row"> 
     <div class="col-md-6"> 
      @RenderPage("Tree.cshtml") 
     </div> 
     <div class="col-md-6"> 
      @RenderPage("Attributes.cshtml") 
     </div> 
    </div> 
</div> 

：属性について

<script src="./Scripts/bootstrap-treeview.js"></script> 

<div class="panel panel-info"> 
    <div class="panel-heading">Дерево объектов</div> 
    <div class="panel-body"> 
     <div id="tree"></div> 
    </div> 
</div> 

<script type="text/javascript"> 

    var arrayOfArrays = JSON.parse('@Html.ViewBag.JsonString'.replace(/&quot;/g, '"'), function(k, v){ 
    if (k === "Product") 
     this.key = v; 
    else if (k === "Name") 
     this.value = v; 
    else 
     return v; 
    }); 
    var jsonTree = JSON.stringify(arrayOfArrays); 

$("#tree").treeview(
{ 
    data:jsonTree, 
    levels:6 
}); 
</script> 

：Indexビュー（組み合わせビュー）については

<div class="panel panel-info"> 
    <div class="panel-heading">Атрибуты</div> 
    <div class="panel-body"> 
     <table class="table table-bordered table-responsive table-striped"> 
      <thead class="thead-inverse"> 
       <tr> 
        <th>Имя атрибута</th> 
        <th>Значение атрибута</th> 
       </tr> 
      </thead> 
      <tbody> 
      @foreach (var attr in Model.Objects[0].Attributes) 
      { 
       <tr> 
        <th>@attr.Name</th> 
        <th>@attr.Value</th> 
       </tr> 
      } 
      </tbody> 
     </table> 
    </div> 
</div> 

また、私の木は、そのイベントを持っていますツリーノードが選択されたときに呼び出されます。以下のようになります。

$('#tree').on('nodeSelected', function(event, data) { 
    //logic goes here 
}); 

データには選択したノードデータが含まれています。ノードデータには、このオブジェクトの属性リストが含まれています。 'nodeSelected'イベントで属性テーブルを再構築するにはどうすればよいですか？

Answer 1

属性は、ツリーノードが選択されたときに呼び出されるイベントの中にIdを

<div class="col-md-6" id="divAttributes"> 
      @RenderPage("Attributes.cshtml") 
</div> 

を表示しているdiv要素には、次のコードを入れて与える：AttributesPartialアクションがある

$('#tree').on('nodeSelected', function(event, data) { 
    //logic goes here 
var url = '@Url.Action("AttributesPartial","YourController")' 
//here append to url the selected node id in order to pass it to the partial view 

$.ajax(url).then(function(html){ 
     $("#divAttributes").html(html); 
    }); 
    }); 

PartialViewResultを返すアクションはAttributes.cshtmlです。選択したノードのデータを取得し、それに必要なモデルを返すアクションの中に、アクションメソッドのパラメータとしてノードIDを含めることができます。