How do I add a new view to a ASP.NET SPA project?

Question

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.

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.

Answer 1

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

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

3. 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
   

4. 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>

to the menu list.