locked
SPA MVC 4 VS template RRS feed

  • Question

  • User1366720210 posted

    I am trying to find a template that would help to create a project structure for an SPA with MVC 4 on the back. So far, coudn't find one. Any idea?

    Thanks

    Thursday, April 17, 2014 4:43 PM

Answers

All replies

  • User281315223 posted

    Have you tried this one?

    It's John Papa's Hot Towel template and it uses MVC4, BreezeJS, Durandel, Knockout and Bootstrap, which is one of the most popular SPA templates out there. If you are looking for some other ones with MVC4 back-ends, you might try checking out the ones listed below (many of which are included in the ASP.NET Web Tools 2012.2 update) :

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 17, 2014 4:47 PM
  • User1366720210 posted

    Sorry, did not mention, I want AngularJS.

    Thursday, April 17, 2014 4:49 PM
  • User281315223 posted

    One of the templates explicitly features AngularJS (and uses BreezeJS for data modeling) :

    Thursday, April 17, 2014 4:52 PM
  • User281315223 posted

    I didn't realize you were using Visual Studio 2013.

    You might want to try this one or this C# / F# MVC4 Template that supports AngularJS as well.

    Depending on the framework you are targeting it can be a bit tricky to explicitly specify MVC4 (as newer versions have migrated to the One ASP.NET paradigm and no longer distinguish between Web Forms, MVC, etc). Is there any particular reason that you want to use MVC4 as opposed to MVC5?

    Thursday, April 17, 2014 5:04 PM
  • User1366720210 posted

    No reason, I thought 4 was the latest. Wharever VS2013 provides.

    Thursday, April 17, 2014 5:13 PM
  • User1366720210 posted

    I tried http://visualstudiogallery.msdn.microsoft.com/5af151b2-9ed2-4809-bfe8-27566bfe7d83 but it has nothing for server side MVC.

    Thursday, April 17, 2014 5:14 PM
  • User281315223 posted

    This one appears to have MVC integrated into it already and it should work for Visual Studio 2012 and 2013.

    Thursday, April 17, 2014 5:30 PM
  • User1366720210 posted

    Yes, but seems like it uses MVC 4.  How can I validate that and if necessary change it to MVC 5?

    Thanks

    Monday, April 21, 2014 11:53 AM
  • User281315223 posted

    If you want to upgrade it from MVC 4 ot MVC 5, you would just need to update all of the appropriate references within your web.config file as mentioned in this article from 4.0.x.x to 5.0.0.0.

    Monday, April 21, 2014 12:06 PM
  • User1366720210 posted

    I have followed that article. I had to change ,NET version from 4.0 to 4.5 otherwise not all changes were taken. Now, when I build solution I am getting this:

    Error 13 The type 'System.ComponentModel.DataAnnotations.Schema.TableAttribute' exists in both 'c:\Users\...\Documents\Visual Studio 2013\Projects\AngularStart3\packages\EntityFramework.6.1.0\lib\net40\EntityFramework.dll' and 'c:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\.NETFramework\v4.5\System.ComponentModel.DataAnnotations.dll' c:\users\...\documents\visual studio 2013\Projects\AngularStart3\AngularStart3\Models\AccountModels.cs 22 6 AngularStart3
    Error 14 The type or namespace name 'Table' could not be found (are you missing a using directive or an assembly reference?) c:\users\...\documents\visual studio 2013\Projects\AngularStart3\AngularStart3\Models\AccountModels.cs 22 6 AngularStart3
    Error 15 The type or namespace name 'DatabaseGeneratedAttributeAttribute' could not be found (are you missing a using directive or an assembly reference?) c:\users\...\documents\visual studio 2013\Projects\AngularStart3\AngularStart3\Models\AccountModels.cs 26 10 AngularStart3
    Error 16 The type 'System.ComponentModel.DataAnnotations.Schema.DatabaseGeneratedAttribute' exists in both 'c:\Users\...\Documents\Visual Studio 2013\Projects\AngularStart3\packages\EntityFramework.6.1.0\lib\net40\EntityFramework.dll' and 'c:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\.NETFramework\v4.5\System.ComponentModel.DataAnnotations.dll' c:\users\....\documents\visual studio 2013\Projects\AngularStart3\AngularStart3\Models\AccountModels.cs 26 10 AngularStart3
    Error 17 'CompareAttribute' is an ambiguous reference between 'System.ComponentModel.DataAnnotations.CompareAttribute' and 'System.Web.Mvc.CompareAttribute' c:\users\...\documents\visual studio 2013\Projects\AngularStart3\AngularStart3\Models\AccountModels.cs 55 10 AngularStart3
    Error 18 The type or namespace name 'Compare' could not be found (are you missing a using directive or an assembly reference?) c:\users\...\documents\visual studio 2013\Projects\AngularStart3\AngularStart3\Models\AccountModels.cs 55 10 AngularStart3
    Error 19 'CompareAttribute' is an ambiguous reference between 'System.ComponentModel.DataAnnotations.CompareAttribute' and 'System.Web.Mvc.CompareAttribute' c:\users\.....\documents\visual studio 2013\Projects\AngularStart3\AngularStart3\Models\AccountModels.cs 88 10 AngularStart3
    Error 20 The type or namespace name 'Compare' could not be found (are you missing a using directive or an assembly reference?) c:\users\....\documents\visual studio 2013\Projects\AngularStart3\AngularStart3\Models\AccountModels.cs 88 10 AngularStart3

    I think it has to be a better way of  going form one version to another although I am new to VS ...

    Monday, April 21, 2014 12:49 PM
  • User281315223 posted

    The easiest approach would be to simply create an MVC 5 application and then add the AngularJS / SPA components into it (as opposed to converting an MVC4 application to MVC5). You might want to consider looking around github as you could likely find projects like this one which appears to be a simple MVC5-SPA template using Angular.

    Monday, April 21, 2014 1:26 PM
  • User281315223 posted

    An additional thought that just came to mind would be to check out the SideWaffle project, which is a template pack that you can download for Visual Studio and it includes an enormous variety of templates for things like Angular and many more other libraries.

    Monday, April 21, 2014 2:56 PM
  • Thursday, April 24, 2014 6:11 AM