Add ASP.NET MVC to LightSwitch 2013

I’ve worked with Microsoft LightSwitch since its early beta days.  Its exciting to see all the new changes coming with the new Visual Studio LightSwitch 2013.  One of the interesting areas is being able to use LightSwitch for your backend and mobile development and other technologies in the Microsoft stack for the desktop.

In this first post I’ll show you how we have been successful in adding the MVC framework to a LightSwitch project.  You’ll be able use the RAD tools of LightSwitch to develop your database, business logic and mobile screens.  And then use the full power of ASP.NET MVC to do your full web based desktop application, including the new rage of SPA’s.

We’ve been successful in using this process for a large application using LightSwitch, ASP.NET MVC/API, Bootstrap and Kendo UI.  An amazing combination and one that I’ll continue to blog about in upcoming posts.

Enough of the chatter… Lets get to it…

Visual Studio 2013 Preview and about 10 minutes is required.

  1. In Visual Studio 2013 (VS), select File, New Project…
  2. Under installed templates, select LightSwitch
  3. Select one of the LightSwitch HTML Application templates (C# or VB)
  4. Name your project and solution, press Ok
  5. VS will create your project and land you on the “Start with data” page
  6. Click on “Create new table”
  7. Name the table “AppUser” (for example sake)
  8. Add a couple of properties, Property1, Name, string
  9. Property2, Email, email address
  10. At the bottom of the screen, click on HTMLClient
  11. Then at the top of the screen, click on Add: Screen
  12. Select the “Browse Data Screen”, Screen Data as AppUser, click Ok
  13. Leave the generated screen with defaults for this example
  14. Save all files, build the solution
  15. You should get a successful build

Now we move over to the solution explorer side.  The following will be done in the “server” project:

  1. Right click on the server project, Select Add… Scaffold…
  2. In the popup dialog, select “MVC 5 Dependencies”, click Add
  3. In the second popup, select “Full dependencies”, click Add
  4. VS will add and configure “most” of the required items for the MVC framework
  5. Right click on References, select Add Reference…
  6. In the popup dialog, select System.Web, click Ok
  7. Right click on the server project, select Add… New Folder… name it “Controllers”
  8. Right click on the Controllers folder,  select Add… Scaffold…
  9. Select “MVC 5 Controller – Empty”, click Add
  10. Name the controller “HomeController”, click Add
  11. Right click on the Views folder, select Add… New Folder… name it “Home”
  12. Right click on the Home folder under Views, select Add… Scaffold…
  13. Select the “MVC 5 View – Empty without model”, click Add
  14. Give the view the name of “Index”, leave the rest as defaults, click Add
  15. In the resulting Index.cshtml (vbhtml) file, edit to show the traditional “Hello World!”
  16. Save all files
  17. Build the solution, should be successful
  18. Run the app (F5)…

The HTMLClient will run first, this can be changed as needed.  You’ll get a LightSwitch HTMLClient browse screen that doesn’t show any records, since we don’t have any data.  This validates that the LightSwitch side of the app is functioning correctly.

Copy the URL, open up a new browser or tab, paste in the URL.  Replace the HTMLClient part of the URL with Home.  You should get the Hello World page being server up by the MVC framework.

So in less than 10 minutes you’ve successfully turned a LightSwitch 2013 project into a platform that has some amazing possibilities.  Hopefully the development community will start to take this tool seriously!

Stay tuned for upcoming posts of our integration with Web API, Bootstrap and Kendo UI.

Enjoy.

Tagged , ,

10 thoughts on “Add ASP.NET MVC to LightSwitch 2013

  1. Charlestib says:

    viagra info , http://www.domaindirectory.com/servicepage/?domain=www.validedpills.com , viagra improves erectile function by is it legal to buy viagra online in usa viagra canada prescription

  2. Janice says:

    great issues altogether, you simply received a new
    reader. What would you recommend about your put up that you made some days in the past?
    Any sure?

  3. I think the admin of this website is really working hard in favor of his web page,
    since here every stuff is quality based stuff.

  4. You need to be a part of a contest for one of the greatest blogs online.

    I’m going to highly recommend this blog!

  5. Attractive section of content. I just stumbled upon your site and in accession capital to assert that I
    get actually enjoyed account your blog posts. Anyway I’ll be subscribing to your
    feeds and even I achievement you access consistently quickly.

  6. Interesting blog! Is your theme custom made or
    did you download it from somewhere? A design like yours with a few simple tweeks would
    really make my blog jump out. Please let me know where you got your theme.
    Thank you

  7. christina says:

    Thanks for sharing this blog,informative and useful for me..

  8. paul says:

    Great !
    Did you think already about the opposite way? An MVC app which hosts multiple html5 apps.

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

%d bloggers like this: