2014-01-30 55 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加载)。