c# - 如何向 ASP.NET SPA 项目添加新 View ？

Question

我在 Visual Studio 2013(更新 1)中创建了一个新的 ASP.NET SPA(单页应用程序)项目，并将所有 NuGet 库更新为截至 4 月 12 日(2014 年)可用的最新版本。我需要执行哪些步骤才能将另一个 View 添加到默认项目？我还想在顶部导航栏中添加指向新 View 的链接。

我猜我需要添加另一个局部 View (比如 _NewView.cshtml)，我可以通过添加 @html.Partial("_NewView") 在 Index.cshtml View 中引用它。我还需要执行哪些其他步骤才能为 View 创建 View 模型、应用该 View 模型、导航到新 View 等。

Answer 1

经过一番折腾，我弄明白了。以下是将另一个 View 添加到 ASP.NET SPA 项目的步骤。

1. 在 Views.Home 文件夹中创建一个新的分部 View (_NewView.cshtml)。这是一个简单的例子。

   <!-- ko with: newview -->
   <div class="jumbotron">
   <h1>New View</h1>
   <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS, and JavaScript.</p>
   <p><a href="http://asp.net" class="btn btn-primary btn-large">Learn more &raquo;</a></p>
   </div>
   <!-- /ko -->
   

2. 将@Html.Partial("_NewView") 添加到 Index.cshtml 文件。

3. 在 Scripts.app 文件夹中为新 View 创建 View 模型 js 文件。至少您需要向 App VM 注册新 View 。以下是所需的最低限度(用 CoffeeScript 编写):

   NewViewModel = (app, dataModel) ->
     self = this
     return
   
   # NewViewModel currently does not require data binding, so there are no visible members.
   app.addViewModel
     name: "NewView"
     bindingMemberName: "newview"
     factory: NewViewModel
   

4. 在 App_Start.BundleConfig.cs 的“~/bundles/app”ScriptBundle 中包含新 View 的 VM 代码

就是这样。如果您随后想在菜单中添加指向新 View 的链接，只需添加

      <li><a href="#" data-bind="click: navigateToNewview">New View</a></li>

到菜单列表。