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" });
});
}))

PanelBarの.ActionメソッドをLoadContentsFromメソッドに置き換えてみました。これにより、左側のペインのコンテンツが置き換えられました。だから私の質問は、スプリッターコントロールの右側をどのようにターゲットにするかということだと思います。

どんな助けでもいただければ幸いです。

ありがとう

-アレックス

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

アップデート

非常に重要なことが 1 つあります。ビューには現在のページと/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 に答える