0

我有一个带有左/右窗格的剑道分离器控件。在左窗格内，我有一个构建导航菜单的 Kendo 面板栏控件。不幸的是，我从另一个离开公司的开发人员那里继承了这个，我不熟悉剑道控制。

一切正常，但是当用户单击菜单项时，整个页面都会刷新，那是为了鸟！我只想刷新右侧面板。

这是布局页面的代码：

<body>
@(Html.Kendo().Splitter().Name("splitter").Panes(panes => {
    panes.Add().Size("220px").Collapsible(true).Content(@<text>
    @Html.Partial("_Panelbar")
    </text>);
panes.Add().Content(@<text>
<section id="main">
    @RenderBody()
</section>
</text>);
}))
<script type="text/javascript">
    $(document).ready(function () {
        $('input[type=text]').addClass('k-textbox');
    });
</script>
@RenderSection("scripts", required: false)
</body>

这是面板部分视图的代码：

@(Html.Kendo().PanelBar().Name("panelbar")
.SelectedIndex(0)
.Items(items => {
items.Add().Text("Corporate").Items(corp =>
{
    corp.Add().Text("Vendors").Action("Index", "Vendor");
    corp.Add().Text("Materials").Action("Index", "CostMaterials");
    corp.Add().Text("Packaging").Action("Index", "CostPackaging");
    corp.Add().Text("Reports").Action("UnderConstruction", "Home", new { pageTitle = "Reports" });
});
}))

我尝试用 LoadContentsFrom 方法替换 PanelBar 上的 .Action 方法。这替换了左窗格中的内容。所以我想我的问题是，我如何定位拆分器控件的右侧？

任何帮助，将不胜感激。

谢谢

-亚历克斯

4

1 回答 1

2

你的代码可能是这样的：

@(Html.Kendo().PanelBar().Name("panelbar")
.SelectedIndex(0)
.Items(items => {
items.Add().Text("Corporate").Items(corp =>
{
    corp.Add().Text("Vendors").Url("javascript:void(0);")
    .HtmlAttributes(
    new { 
      @class= "helloWorld",
      @data-href="/Vendor/Index"
    });
});
}))        
    <script>
        $document.ready(function(){
            $('.helloWorld').click(function(){
                var href = $(this).attr('data-href');
                $('#main').load(href);
            });
        });
    </script

更新

有一件事非常重要：我认为视图与您当前的页面/Vendor/Index 具有相同的模板。

这意味着当您加载/Vendor/Index到右侧时。右侧将包括整个内容（再次包括左侧面板）。

解决方案

  1. 您必须创建一个新视图（模板），其中仅包含您的左侧菜单、横幅、...

然后，您必须删除其他视图的所有模板（将加载到右侧 - /Vendor/Index ， /CostMaterials/Index，...）

2.这种方式不是一个好方法。但我认为它会起作用。

//参考：在 $.AJAX 加载的 HTML 上使用 Jquery 选择器？

    <script>
    $document.ready(function(){
        $('.helloWorld').click(function(){
            var href = $(this).attr('data-href');
            $.ajax({
              type: 'GET',
              url: href,
              success: function (data){
                var rHtml = $('<html />').html(data);
                $('#main').html(rHtml.find('#main'));
              }   
            });
        });
    });
</script
于 2013-02-18T07:15:38.990 回答