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

Question

我需要創建一個帶有對象樹和屬性表的網頁，以便從樹對象中進行選擇。 我已經提出了三點意見。 一個用於樹的局部視圖，一個用於屬性的局部局部表，以及一個用於組合此視圖的局部表。 但是現在我有一個問題，當我在樹中選擇對象時，我無法弄清楚如何填充屬性表。

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

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

Answer 1

給具有屬性的div查看ID

<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的操作，該PartialViewResult是Attributes.cshtml ，在該操作內，您將獲取選定節點的數據並返回所需的模型，您可以將節點ID作為操作方法的參數。