如何通過JavaScript事件重建部分視圖？

我需要創建一個網頁與對象樹和屬性表從樹對象中選擇。我提出了三個意見。一個部分用於樹，一個部分用於表示屬性表，另一個用於組合這些視圖。但是現在我有一個問題，當我在樹中選擇對象時，我無法弄清楚如何填充屬性表。如何通過JavaScript事件重建部分視圖？

我的代碼：索引視圖（組合視圖）：

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

的屬性：

<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'事件重建屬性表？

來源

2016-09-29 Gleb

給具有屬性查看標識

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

時所選擇的樹節點放在下面的代碼調用該事件在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作爲action方法的參數。

來源

2016-09-29 11:44:46

Actualy我沒有控制器的屬性。我只有一個控制器用於組合視圖，只有一個方法Index（）運行組合視圖。 – Gleb

然後在您擁有的控制器內部創建此部分操作，因爲如果要根據樹中選定的節點加載數據，則必須具有單獨加載數據的操作 –

就是這樣，謝謝。但現在我還有一個問題。重新加載屬性視圖中的模型後爲空。 – Gleb

如何通過JavaScript事件重建部分視圖？

回答

相關問題