![](/img/trans.png)
[英]Rerendering partial view at a JavaScript event in Ruby on Rails
[英]How to rebuild partial view by JavaScript event?
我需要创建一个带有对象树和属性表的网页,以便从树对象中进行选择。 我已经提出了三点意见。 一个用于树的局部视图,一个用于属性的局部局部表,以及一个用于组合此视图的局部表。 但是现在我有一个问题,当我在树中选择对象时,我无法弄清楚如何填充属性表。
我的代码:对于索引视图(组合视图):
<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(/"/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”事件重建属性表?
给具有属性的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作为操作方法的参数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.