JavaScript 이벤트로 부분 뷰를 재 작성하는 방법은 무엇입니까?

Question

트리 개체에서 선택된 개체 트리 및 특성 표가있는 웹 페이지를 만들어야합니다. 나는 세 가지 견해를 만들었습니다. 하나의 부분적인 트리, 하나의 부분적인 속성 테이블 및 하나의 뷰를 결합합니다. 하지만 지금은 문제가 있습니다. 트리에서 객체를 선택할 때 속성 테이블을 채우는 방법을 알 수 없습니다. 속성에 대한

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

: 트리

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

:

내 코드 : 인덱스보기 (결합도)에 대한

<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

속성이 트리 노드는 다음과 같은 코드를 넣어 선택했을 때 호출되는 이벤트 내부 이드

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

를 볼 수있다 사업부 보내기

$('#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); 
    }); 
    }); 

가 AttributesPartial 행동이입니다 PartialViewResult이 Attributes.cshtml 인 작업을 반환하면 선택한 노드에 대한 데이터를 가져와 필요한 모델을 반환합니다. 작업 메서드의 매개 변수로 노드 ID를 가질 수 있습니다.