如何完成这个 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 中的上述安排导航。所以我最终得到了页眉、页脚和 subdash 导航......

所以问题是……

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

Answer 1

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

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

如果你要做很多这样的事情，你会想要使用一些客户端 MVC 风格的 JavaScript 库，例如 Angular。这些使得连接所有东西变得微不足道。