Question

我有一个带左/右窗格的Kendo分割器控件。在左侧窗格中，我有一个Kendo面板栏控件，可以构建导航菜单。不幸的是，我从另一个离开公司的开发人员那里继承了这个，而且我不熟悉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方法。这取代了左窗格中的内容。所以我想我的问题是，如何定位分割器控件的右侧？

任何帮助都将不胜感激。

由于

-Alex

Answer 1

您的代码可能是这样的：

@(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加载到右侧时。右侧将包括整个内容（包括左侧面板）。

<强> 解决方案

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

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

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

//参考：Use Jquery Selectors on $.AJAX loaded HTML?

    <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

Kendo分离器控制异步加载右面板内容

1 个答案: