2014-01-30 80 views
0

我試圖在MVC4中創建一個視圖,該視圖在容器類框的底部有一組輪播按鈕。我希望能夠點擊這些按鈕在不離開視圖索引頁面的情況下在內容之間切換。使用Razor創建單頁HTML carosel面板CSHTML

Example

當我按下每個按鈕我希望能夠看到傳遞給渲染幀新的HTML段落。

面板CSS在共享的「_MainLayout.cshtml」中定義。但我想已經呈現內容基於該面板中選擇

@if (Page.SelectedPanel == 1){ 
        @page1 
       } 
       else if (Page.SelectedPanel == 2){ 
        @page2 
       ) 

是否有良好的相關例子或教程這樣的地方?我似乎無法找到任何東西。我很新的MVC,但一些Web API的背景與Python。

回答

0

我認爲你可以通過不同的方式實現它,可以使用JavaScript或在控制器中使用一種方法,根據所選面板值返回不同的局部視圖。

Personnaly我會選擇JavaScript解決方案,因爲它避免了多個客戶端服務器調用。

希望得到這個幫助。

0

有兩種方法可以做到這一點:

  • 如果段落不是很長,更簡單的方法是使所有的頁面內容,隱藏所有,但他最初的段落(要做到這一點,在視圖moel,從paragraps appart,你應該包括一個參數,指出它是否是可變的或隱藏的,以適當渲染每個實例)。然後當用戶「移動」旋轉木馬時,使用JavaScript更改可見段落。

  • 如果段落中的內容是動態的,或者過於複雜,則可以使用Ajax。渲染頁面時,僅渲染輪播和第一個視圖。然後,當用戶「移動」傳送帶時,使用ajax加載調用部分動作的對應內容。

注意:如果你谷歌「mvc ajax局部視圖」,你會發現很多關於如何用ajax渲染局部視圖的例子。你可以在你的谷歌查詢中包含「不顯眼」,以查看不同的,更自動的技術。

對於客戶端,你可以使用這個jQuery插件:jCarousel。您可以在targetin event上更改可見段落(或使用ajax加載)。