如何完成此MVC布局

Question

对于MVC来说相对较新我在过去的几周里一直在努力让我的布局发挥作用。

我设法让自己真的扭曲成结。因此，不是试图解释和解开我的混乱，而是有人可以解释我将如何在高层次上完成以下任务。

1. _Layout将拥有所有css js等。它也将具有基本结构。

当然，代码块中不允许使用HTML标记....每个渲染都在div中。

@RenderPartial(Header)</div>
@RenderBody()</div>
@RenderPartial(Footer)</div>

1. RenderBody是Index.cshtml，它将分为三部分

@

@Html.Partial(NavMenu, model)</div>
@Html.Partial(SubNavMenu, model)</div>
@Html.Partial(MainContent, model)</div>

我有这个基本布局，看起来很好，直到你点击其中一个菜单项。

菜单项呈现为：

<a class="k-link" href="/stuffroute">Stuff</a>

该路由转到一个控制器，该控制器返回一个视图，并在Index.cshtml中导航远离上述安排。所以我最终得到了页眉，页脚和子数据库导航....



所以问题是......

如何路由/编排布局以避免丢失不同的部分？

Answer 1

Partials在这里没有为你做任何事。您实际上是在询问如何创建SPA（单页应用程序），尽管在这种情况下您的应用程序将包含其他页面，只是索引视图将像SPA一样。

这需要JavaScript，特别是AJAX，向端点发出请求，这些端点将返回可用于替换DOM部分的HTML片段。例如，点击＆＃34; Stuff 1＆＃34;导致对路由到FooController.GetSubNav([stuff identifier])的URL进行AJAX请求。然后，该操作将使用传递给它的内容来检索正确的子导航并返回呈现该子导航的局部视图。然后，您的AJAX回调将接受此响应，选择DOM的一部分（特别是子导航的父级）并将新HTML插入其innerHTML。

如果您要做很​​多事情，那么您将要使用一些客户端MVC风格的JavaScript库，例如Angular。这些使得连接所有内容变得微不足道。