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

Question

我需要创建一个带有对象树和属性 table 的网页，以便从树对象中输入 select。我提出了三个观点。一份用于树，一份用于属性 table，一份用于组合这些视图。但是现在我有一个问题，当我在树中 select 对象时，我无法弄清楚如何填充属性 table。

我的代码：对于索引视图（组合视图）：

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

我的树也有一个事件，当树节点 selected 时调用。看起来像：

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

数据包含 selected 节点数据。节点数据包含此对象的属性列表。如何通过 'nodeSelected' 事件重建属性 table？

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 操作是 returns PartialViewResult 的操作，即 Attributes.cshtml，在操作中您将获取所选节点的数据和 return它需要的模型，你可以将节点id作为action方法的参数。

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

How to rebuild partial view by JavaScript event?

javascript

asp.net

asp.net-mvc

partial-views

asp.net-mvc-4