I’ve done extensive web development prior to my current position (where I primarily do desktop applications dev), but it’s been a while. In fact its been almost 5 years since I’ve gotten my hands deep into CSS, javascript and ASP.NET. And 5 years is an eternity in this business. So where are things in the ASP.NET world now-a-days? Well, the big buzz is MVC. This post and any that follow on MVC are about me learning MVC as I go. While I feel I can confidently claim to be an MVVM expert, I know very little about MVC.

There will be bits in this series where I specifically target MVVM/WPF/XAML developers and how to transition knowledge and experience from those domains into MVC but that doesn’t mean that this wouldn’t be a descent guide for those learning MVC.  I’m just learning MVC and I hope to pass on some of that knowledge.

You probably know what MVC is but bear with me as I go into a brief explanation. MVVM is a platform-specific implementation of the application framework design pattern MVC. That’s a mouthful. Where as MVVM is Model-View-ViewModel, MVC is Model-View-Controller. Rather than coming up with another name for MVC in ASP.NET, Microsoft apparently decided to keep it easy and just use MVC. (If your curious you can google around for MVP (Model-View-Presenter), which is the WinForms version of MVC. It doesn’t have anything to do with this, just another version of MVC.)

So it’s all pretty simple, your controller sits in the middle of your view and your model, just like a view model. But as we all know the devil is in the details.

Okay, so how do we get started?

First, if you haven’t already, you need to create an Azure account. I mean, why go to all this trouble if you can’t show off the world what you’ve done? If you have an MSDN license you can create an Azure account, and at least at the time of this post, you get 10 free websites per region. The free sites will use the azurewebsites.net URL (for instance, I created my project with the name “ExperimentalProducts” and thus have the site at experimentalproducts.azurewebsites.net). I’m sure there are a bunch of restrictions. Confirm anything I say about Azure features with the Azure site and team and don’t consider me an authority in this regard. I may be wrong or things may have changed by the time you get around to reading this post. There is a lot more you get with your MSDN subscription for Azure but that is outside of the scope of this post.

After you have an Azure account I’d recommend you start with the tutorial, Deploy a Secure ASP.NET MVC 5 app with Membership, OAuth, and SQL Database to an Azure Web Site. I followed the tutorial as far as the section on OAuth and OpenID and then switched to the tutorial Code! MVC 5 App with Facebook, Twitter, LinkedIn and Google OAuth2 Sign-on (C#).

Okay, got all that done? No? Well, if you want to continue to read feel free but it probably won’t make a lot of sense without having your own code available.

If you’ve done the above steps you should be at the same place I am. The problem with some tutorials is that they don’t tell you the consequences of the action. They give a step-by-step process to do exactly what they say they will. This is great but you can do the two above tutorials and not understand anything about MVC. So I want to look at the solution and the state it’s in to try and explain the project and what it is that Microsoft and you created. Again, as mentioned above, I’m doing this so I can have a better understanding of what is happening and hopefully you’ll walk away with a better understanding as well.

As we’re going through this (and as mentioned earlier) I named my project “ExperimentalProducts”. As such a few of the names may be different. I also didn’t name my Contacts Controller “CmController” like the tutorial suggested. I named it “ContactsController”. This seemed more in-line with standard naming conventions.

Here is the project as it should be after the tutorials:

Expand out the references and let’s see what we have.

Libraries other than standard ASP.NET in the project:

Antlr3

WebGrease

These two libraries are used for bundling and minification of css and javascript files. In order to minimize traffic the project will bundle and compress css and javascript. To see how it is used look at /App_Start/BundleConfig.cs in the project.

EntityFramework

Entity Framework is Microsoft’s data access library. Allows you to easily create models and then map them back to the database in a “Code First” approach. You can also do a “Database First” approach where you create the tables in the database and have Entity Framework generate your models for you.

Owin

Microsoft’s implementation of the “Open Web Interface for .NET”. See the article, What is OWIN, and what is it doing in my ASP.NET MVC project? for more information.

Included css and javascript libraries in the project to make everything easier:

bootstrap.css

bootstrap is a css library for making your website work cleanly and easily with mobile browsers. If you shrink down your browser to what a user with a smart phone would see with the default build you will see that everything collapses nice and neat so it will look good on a smart phone.

jQuery

jQuery is the de facto javascript library for doing javascript development.

Modernizr

Modernizr is a javascript library that will determine what features (like css gradients) are available in the user’s browser. This way you can test in your css or javascript if a feature is available.

That’s it for now. Just wanted to cover setting up the projects and what was added. Next week I’ll get more in-depth on what the models, views and controllers are doing, how they parallel MVVM and how they’re different.

Thanks for reading,
Brian