How To Create An Expanded LightSwitch 2013 Project!

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.

  1. Start Visual Studio 2013
  2. Create a new project: File, New Project…
  3. Select LightSwitch HTML Application
  4. Name the project: myTest
  5. Name the solution: myTest
  6. Create new table
  7. Name it TestItem, 1 property, Name
  8. Add your browse/add/edit screens for the TestItems table
  9. Double click on the properties file for the myTest project
  10. Enable forms authentication, and allow Security Admin for debug
  11. Save the solution, do a full build, run the app
  12. Add some test data into the table
  13. Back into Visual Studio
  14. Right click on your server project
  15. From the Add Scaffold window, click on MVC 5 Dependencies
  16. Press the Add button
  17. On the Add MVC Dependencies popup
  18. Select the Full Dependencies option, press the Add button
  19. Close the web.config that gets automatically loaded
  20. In the App_Start folder, open RouteConfig.cs
  21. Add the following line under the other IgnoreRoutes
    routes.IgnoreRoute("{*allsvc}", new { allsvc = @".*\.svc(/.*)?" });
    
  22. Right click on the App_Start folder, add a new Class file
  23. Name it WebApiConfig.cs
  24. Replace the contents with the contents from the WebApiConfig.cs file from our zip file
  25. Add two folders under the Controllers folder
    1. api
    2. mvc
  26. Right click on the api folder, select add, select New Scaffold Item
  27. Select Web Api 2 Controller with Read/Write actions
  28. Name it TestController
  29. Follow the instructions of the readme.txt file that automatically opens in the editor
  30. Make sure the GlobalConfiguration.Configure gets added to the beginning of Application_Start
  31. In the Controllers folder again, right click on the mvc folder, select add, select New Scaffold Item
  32. Select MVC 5 Controller with read/write actions
  33. Name it HomeController
  34. In the HomeController.cs file that gets automatically loaded
  35. Right click on the ActionResult Index()
  36. Select add view
  37. In the Add View dialog, leave all defaults, just click on add
  38. Go edit your default.aspx page in the root of the solution
  39. Comment out the first line… add some test text to the body
  40. 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!

Tagged , , ,

9 thoughts on “How To Create An Expanded LightSwitch 2013 Project!

  1. Michelle says:

    Ok, I think I got further but those three links still show up as no directory
    for the Home and API/test and there isn’t a directory for them. What am I missing? I copied the folders app_start/controllers/View under the server directory and added to project should they be else where?

    I was able to remove the 1st line in the default and here is the 1st section of the global.aspx

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Http;
    using System.Web.Mvc;
    using System.Web.Routing;
    using System.Web.Security;
    using System.Web.SessionState;

    namespace LightSwitchApplication
    {
    public class Global : System.Web.HttpApplication
    {
    protected void Application_Start()
    {
    System.Web.Mvc.AreaRegistration.RegisterAllAreas();

    FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
    WebApiConfig.Register(GlobalConfiguration.Configuration);
    RouteConfig.RegisterRoutes(RouteTable.Routes);
    }

  2. Michelle says:

    I get a HTTP Error 404.0 – Not Found
    The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.
    when trying either
    MVC or

    http://localhost:{port}/

    http://localhost:{port}/Home

    http://localhost:{port}/api/test

    But all of the others work for me. I was’t able to figure out where to modify the global.asax and it threw errors everytime I tried to remove the 1st line in the default.aspx. I would love some help if you have a few minutes.

  3. […] How To Create An Expanded LightSwitch 2013 Project – Updated! […]

  4. […] Start here…  How To Create An Expanded LightSwitch 2013 Project […]

  5. […] How To Create An Expanded LightSwitch 2013 Project […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 160 other followers

%d bloggers like this: