Making a Mobile MVC Music Store Part 1: Creating a Common Service Layer

Today I am going to start a series where I take the MVC Music Store sample site and create a mobile site. I chose to use this example in one of my current presentations, Take a Desktop Site to Mobile. I chose the MVC Music store because it is a simple site representing a small e-commerce presence. Since it is simple I found it to be very easy to translate to the mobile web and share mobile concepts in action.

But I am not going to stop there, I want to step it up a notch. Just replicating the Music store's desktop UI in a mobile context is actually pretty boring. So my goal is to dress the mobile site up using the Windows Phone 7 Metro style guidelines and some AJAX tricks.

Above is a screenshot of the mobile home page. I am not 100% on the site's design aspects at the moment, so expect things to evolve as the week progresses.

Application Infrastructure

But before we get to defining anything mobile we need to upgrade the application's infrastructure. Today I am going to review moving the model to a common class library both site's can reference.

The first step is to add a new class library project to the MVC Music Store solution. I called mine Model.MvcMusicStore.

On the surface this would seem like a very simple task, but it requires adding a full set of references to the new class library. You can see in the screenshot I found I needed to replicate the entire set of references in the existing Music Store site.

At first I thought this was just a bit strange, possibly indicating too much munging of web and business logic. Later it occurred to me I was a bit lazy with my model library because I simply copied the Helpers and Models folders.

I also decided to keep it simple for this demo and attach the site's database directly in a local SQL Server Instance. This just makes it simpler to manage the database. I realize this is not kosher for demo applications, but if you have SQLExpress installed you can attach the database using the SQL Management studio. This way the two sites can easily share the same connection string.

At the moment I have plans to post updates to this project through out the week. I have not decided how many yet, I suspect between 5-7. I plan on covering various decisions developers and architects must face when building a quality mobile presence. I invite you to download the MVC Music Site's sample code from the ASP.NET site. I will post my code sometime in the next day or so. There are still some design decisions I am working through.

Share This Article With Your Friends!