劍道分離器控制異步加載右面板內容

我有一個左/右窗格的劍道分流器控制。在左側窗格中，我有一個建立導航菜單的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

來源

2013-02-17 AlexFreitas

您的代碼可能是這樣的：

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

UPDATE

有一兩件事很重要：我認爲，鑑於/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

來源

2013-02-18 07:15:38 hungdoan

如此接近......讓人耳目一新，在面板的右側，現在，但它提出的，而不是僅僅加載主DIV右邊的全部內容。左側菜單顯示在右側的頂部，其餘內容如下。你有什麼想法爲什麼會發生？ – AlexFreitas 2013-02-19 13:59:49

第二種方法並不完美。對於第一個建議，我如何從視圖中刪除模板？我認爲@RenderBody只會呈現主DIV標籤內的視圖的html。在視圖 – AlexFreitas 2013-02-19 20:23:22

@AlexFreitas中沒有提及我對第二種方法感到非常抱歉。我已經更新了它，你可以試試它。但我認爲你應該與＃1合作。要刪除'template'（我的意思是ASP MVC中的Layout），你必須在View中設置Layout = null（或者_ViewStart.cshtml - 如果有的話）。 – hungdoan 2013-02-20 06:46:00

劍道分離器控制異步加載右面板內容

回答

相關問題