This process requires the March 2014 Update
I’m happy to report that the March 2014 Update brought back SCAFFOLDING!! Yay!
How to add Web API and MVC to a LightSwitch 2013 project
Visual Studio LightSwitch is a great product. But it’s not the end all and most professional development projects require a mix of technologies to be considered successful. By following these steps, you’ll end up with a LightSwitch project that has the HTML Client, Silverlight Client, MVC, Web API and Web Forms with the naming conventions of your choosing. Giving you a solution without restrictions!
First time thru the tutorial it may still take you 15 minutes. So give it a try and see what you think… Oh… btw you can clone/download the updated sample project from github… you’ll need this, but really only for the WebApiConfig.cs.
- Start Visual Studio 2013
- Create a new project: File, New Project…
- Select LightSwitch HTML Application
- Name the project: myTest
- Name the solution: myTest
- Create new table
- Name it TestItem, 1 property, Name
- Add your browse/add/edit screens for the TestItems table
- Double click on the properties file for the myTest project
- Enable forms authentication, and allow Security Admin for debug
- Save the solution, do a full build, run the app
- Add some test data into the table
- Back into Visual Studio
- Right click on your server project
- From the Add Scaffold window, click on MVC 5 Dependencies
- Press the Add button
- On the Add MVC Dependencies popup
- Select the Full Dependencies option, press the Add button
- Close the web.config that gets automatically loaded
- In the App_Start folder, open RouteConfig.cs
- Add the following line under the other IgnoreRoutes
routes.IgnoreRoute("{*allsvc}", new { allsvc = @".*\.svc(/.*)?" });
- Right click on the App_Start folder, add a new Class file
- Name it WebApiConfig.cs
- Replace the contents with the contents from the WebApiConfig.cs file from our zip file
- Add two folders under the Controllers folder
- api
- mvc
- Right click on the api folder, select add, select New Scaffold Item
- Select Web Api 2 Controller with Read/Write actions
- Name it TestController
- Follow the instructions of the readme.txt file that automatically opens in the editor
- Make sure the GlobalConfiguration.Configure gets added to the beginning of Application_Start
- In the Controllers folder again, right click on the mvc folder, select add, select New Scaffold Item
- Select MVC 5 Controller with read/write actions
- Name it HomeController
- In the HomeController.cs file that gets automatically loaded
- Right click on the ActionResult Index()
- Select add view
- In the Add View dialog, leave all defaults, just click on add
- Go edit your default.aspx page in the root of the solution
- Comment out the first line… add some test text to the body
- Do a full save, then rebuild, run your app
Your LightSwitch html app will run first with your custom URL path
http://localhost:{port}/App
Moving on, let’s test access to the ApplicationData.svc file
http://localhost:{port}/ApplicationData.svc
So far so good eh? How about our MVC?
http://localhost:{port}/Home
Yay! Looking good… now our default.aspx file in the root…
http://localhost:{port}/default.aspx
Yep that works too… final test… the Web.Api side…
http://localhost:{port}/api/Test
You can now go in and clean up the project, delete the test screen, test table, etc.
Save the solution again.
This would be the point when you would add your project into source control.
One of the great features out of this is we can use Visual Studio LightSwitch to do all of our data management without having to go down into the Entity Framework.
Happy coding!