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

3 thoughts on “MetroUI Template for ASP.NET MVC

  1. dimas says:

    Hi i have problem with Microsoft.Ajax.Utilities assembly, where’d i can get it? thx

  2. Renato says:

    Hi,

    I’m download your template and is very helpful! How do i create subpage?

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: