Monthly Archives: August 2013

MetroUI Template for ASP.NET MVC

SmallMetroUIMvc

So… odd as it sounds, there are very few Modern UI (Metro) packages out there for web applications.  I have found one to be full featured from metro-webdesign.info called Metro UI Template.  The guy has done a fantastic job and I highly recommend donating and getting the full version.

Metro UI Template was written for a PHP, I’m a .NET guy.  So we had a problem.  So what does a good dev do?  Solve the problem.

Create some server wrappers for the client side JavaScript and move forward with the project.  And so that’s what we’ve done.

Lets be clear, this is not fully fleshed out and was used to prove some concepts.  Hopefully others will jump in and help with these wrappers and flesh them out even more.  Read the code!

Also note that what I’m posting is based on their “lite” version, so you can try it before you upgrade to his full product.  But this means it does not have all the available tile types, but enough for you to get a really good feel of creating a tile based web app.  Off we go!

  1. Download Metro UI Template, http://metro-webdesign.info/#!/download
  2. Download/view my wrapper at https://github.com/dwm9100b
  3. Right click on the downloaded files, go to properties, and unblock
  4. Extract the zips
  5. Create a new ASP.NET MVC application, Razor Engine
    • Name the project:  MyMetroApp
  6. Create new folder in the root of your project
    • Name the folder: MetroUI
  7. Drop (add) the following folders from the extracted V4_lite folder into the MetroUI folder
    • css
    • img
    • js
    • plugins
    • themes
  8. Add the following folder from MetroUITemplate.MvcWrapper-master folder into the root of your project
    • MetroUIMvc
  9. If you did not name your project “MyMetroApp”, you need to change the namespace in the following files
    • Enums
      • TileSize.cs
      • TileType.cs
    • MetroColumn.cs
    • MetroRow.cs
    • MetroScreen.cs
    • MetroTile.cs
  10. Build your solution to see if we missed anything so far
  11. Replace the following in your project from the MetroUITemplate.MvcWrapper-master folder
    • Views/Home/Index.cshtml
    • Views/Shared/_Layout.cshtml
    • Controllers/HomeController.cs
  12. Buid your solution, F5 to run your app

Mobile (responsive) design is not available in the lite version, Upgrade to the full version and you will get some really nice tile repositioning based on device, all the way down to mobile phones.

For the record, I have no association with metro-webdesign.  I found their product to be superior and created a solution for my needs and wanted to share with others how to integrate his project with ASP.NET MVC.

Tagged , , ,

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