使用Razor CSHTML创建单页HTML颂歌面板

Question

我正在尝试在MVC4中创建一个视图，该视图在容器类框的底部具有一组旋转木马按钮。我希望能够单击这些按钮以在内容之间切换而不留下视图索引页。

示例

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

面板CSS是在共享的" _mainlayout.cshtml"中定义的。但是我想根据选择哪个面板的内容渲染

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

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

Answer 1

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

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

希望这个帮助。

Answer 2

有两种方法：

• 如果这些段落不是很长，那么更容易的方法是渲染所有页面内容，除了他的初始段落之外，所有的段落（在此操作中，在视图中，来自段落中的appart，您应该包括一个参数指示它是可触及的还是隐藏的，以适当地渲染每个实例）。然后，当用户"移动"轮播时，使用JavaScript更改可见段落。

• 如果段落中的内容是动态的，或者太复杂，则可以使用Ajax。渲染页面时，仅渲染轮播和第一个视图。然后，当用户"移动"旋转木马时，使用AJAX加载对通讯的内容。

注意：如果您Google Google" MVC Ajax部分视图"您会找到有关如何进行ajax的部分视图的许多示例。您可以在Google查询中包含"不突出"以查看另一种自动技术。

对于客户端，您可以使用此jQuery插件：jcarousel。您可以在其Targetin事件上更改可见段落（或使用Ajax加载）。