如何添加到ASP.NET SPA项目的新的看法？ [英] How do I add a new view to a ASP.NET SPA project?

问题描述

我已经在Visual Studio 2013中创建一个新的ASP.NET SPA（单页应用程序）项目（更新一）和更新所有的Nu​​Get库到最新可作为4月12日（2014年）的。做哪些步骤，我需要通过添加另一个以默认的项目？我也想添加一个链接在顶部导航栏中，新的视图。

I have created a new ASP.NET SPA (Single Page Application) project in Visual Studio 2013 (Update 1) and updated all the NuGet libraries to the latest available as of April 12th (2014). What steps do I need to go through to add another view to the default project? I also want to add a link to the new view in the top navbar.

我猜我需要添加另一个局部视图（比如_NewView.cshtml），我可以通过添加@ html.Partial（_ NewView的）在Index.cshtml视图引用。还有什么其他措施，我需要以创建视图的视图模型，应用视图模型执行，导航到新的观点，等等。

I'm guessing I need to add another partial view (say _NewView.cshtml), which I can reference in the Index.cshtml view by adding @html.Partial("_NewView"). What other steps do I need to perform in order to create a view model for the view, apply that view model, navigate to the new view, etc.

推荐答案

有点搞乱之后围绕我想它了。这里有另一种看法添加到ASP.NET SPA项目的步骤。

After a bit of messing around I figured it out. Here are the steps to add another view to a ASP.NET SPA project.

1. 创建的文件夹Views.Home一个新的局部视图（_NewView.cshtml）。这里有一个简单的例子。

1. Create a new partial view (_NewView.cshtml) in the Views.Home folder. Here's a simple example.

<!-- 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 -->

添加@ Html.Partial（_ NewView的）将Index.cshtml文件。

Add @Html.Partial("_NewView") to the Index.cshtml file.

在Scripts.app文件夹中的新视图中创建一个视图模型的js文件。最起码，你需要注册与App VM的新观点。下面是所需的最低（写在CoffeeScript中）：

Create a view model js file for the new view in Scripts.app folder. At the very least you need to register the new view with the App VM. Below is the bare minimum needed (written in 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

包含在〜/包/应用ScriptBundle新视图的VM code在App_Start.BundleConfig.cs

Include the new view's VM code in the '~/bundles/app' ScriptBundle in App_Start.BundleConfig.cs

就是这样。然后，如果您想添加菜单中的链接到新的视图，只需添加

That's it. If you then want to add a link to the new view in a menu, just add

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

到菜单列表。

这篇关于如何添加到ASP.NET SPA项目的新的看法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！