如何通过JavaScript事件重建部分视图？

Question

I need to create a web-page with with object tree and attributes table for selected in from tree object. I've made three views. One partial for tree, one partial fro attributes table and one to combine this views. But now I have a problem, I can't figure out how to fill attributes table when I select object in tree.

My code: For Index view(combined view):

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

For tree:

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

For attributes:

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

Also my tree have an event that called when tree-node selected. Looks like:

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

Data contains selected node data. Node data contains attributes list for this object. How can I rebuild attributes table by 'nodeSelected' event?

Answer 1

Give the div that has the attributes view an Id

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

Inside the event that is called when the tree node is selected put the following code:

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

The AttributesPartial action is an action that returns PartialViewResult which is the Attributes.cshtml , inside the action you will get the data for the selected node and return the model needed for it, you can have the node id as parameter to the action method.