使用Razor CSHTML创建单页HTML carosel面板

Question

我正在尝试在MVC4中创建一个View，它在容器类框的底部有一组轮播按钮。我希望能够点击这些按钮在不离开视图索引页面的情况下在内容之间切换。

Example

当我按下每个按钮时，我希望能够看到传递给渲染帧的新HTML段落。

面板css在共享的“_MainLayout.cshtml”中定义。但我希望根据选择的面板进行内容渲染

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

在任何地方都有这样的好相关示例或教程吗？我似乎找不到任何东西。我是MVC的新手，但是有一些使用Python的Web API背景。

Answer 1

我认为您可以通过不同的方式实现它，使用JavaScript或在控制器中使用根据所选面板值返回不同局部视图的方法。

Personnaly我会选择JavaScript解决方案，因为它避免了多个客户端服务器调用。

希望得到这个帮助。

Answer 2

有两种方法可以做到这一点：

• 如果段落不是很长，更简单的方法是渲染所有页面内容，隐藏除初始段落之外的所有内容（要做到这一点，在视图moel中，appart中的段落，你应该包含一个参数指示它是否可变或隐藏，以适当地渲染每个实例）。然后，当用户“移动”轮播时，使用JavaScript更改可见段落。

• 如果段落中的内容是动态的，或者过于复杂，则可以使用Ajax。渲染页面时，仅渲染轮播和第一个视图。然后，当用户“移动”轮播时，使用ajax加载调用部分动作的对应内容。

注意：如果你谷歌“mvc ajax局部视图”，你会发现很多关于如何用ajax渲染局部视图的例子。您可以在Google查询中添加“不显眼”，以查看不同的，更自动的技术。

对于客户端，您可以使用例如此jquery插件：jCarousel。您可以在targetin event上更改可见段落（或使用ajax加载）。