如何将新视图添加到ASP.NET SPA项目中
本文关键字:NET SPA 项目 ASP 新视图 添加 | 更新日期: 2023-09-27 17:58:14
我在Visual Studio 2013(更新1)中创建了一个新的ASP.NET SPA(单页应用程序)项目,并将所有NuGet库更新为截至2014年4月12日的最新版本。我需要经过哪些步骤才能将另一个视图添加到默认项目中?我还想在顶部导航栏中添加一个到新视图的链接。
我想我需要添加另一个局部视图(比如_NewView.cs.html),我可以通过添加@html.partial("_NewView")在Index.chtml视图中引用它。我还需要执行哪些步骤才能为视图创建视图模型、应用该视图模型、导航到新视图等。
经过一番折腾,我终于明白了。以下是将另一个视图添加到ASP.NET SPA项目的步骤。
-
在Views.Home文件夹中创建一个新的局部视图(_NewView.cs.html)。这里有一个简单的例子。
<!-- 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 »</a></p> </div> <!-- /ko -->
-
将@Html.Partial("_NewView")添加到Index.chtml文件中。
-
在Scripts.app文件夹中为新视图创建一个视图模型js文件。至少您需要向AppVM注册新视图。以下是所需的最低限度(用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
-
在app_Start.BundleConfig.cs 的"~/bundles/app"ScriptBundle中包含新视图的VM代码
就是这样。如果你想在菜单中添加到新视图的链接,只需添加
<li><a href="#" data-bind="click: navigateToNewview">New View</a></li>
到菜单列表。