Telerik Extensions for ASP.NET MVC in Azure – Part 1, Building your Application

As some of you are (hopefully) aware of, our RadControls for ASP.NET AJAX work flawlessly on Windows Azure. We actually have a short blog series available here on our blogs that go through the necessary steps for creating an application (Part 1) and later deploying it (Part 2) to Windows Azure. However, do our ASP.NET MVC components work on this platform? The answer is: yes! (Note the usage of ‘!’, that’s how exciting it is!). The best thing is that the process is no more complicated than what you have to do for our RadControls for ASP.NET AJAX.

Note

Since most of you are most likely here since you already know what Azure is, I won’t go into detail of what Azure is or why you might be interested in picking it up. For more information on that I recommend that you click on the link I posted above to the main Windows Azure page.

How much work is involved with the Telerik Extensions?

The great thing about our MVC Extensions is that you do not need to do any extra work what so ever. If you are already familiar with deploying MVC applications to the cloud then having the Telerik Extensions for ASP.NET MVC added to the project will not add any extra steps. We’re essentially as “cloud ready” (as some like to call it) as it gets!

I’m ready to soar with the clouds – take me away!

First of all, you need to go ahead and snag the Azure SDK and Visual Studio Tools. The easiest way is via theWeb Platform Installer:

With these tools installed you are officially ready to start working in the cloud.

Note: I just want to mention that as of now (April, 2011), out-of-the-box, the only Web Role for ASP.NET MVC is for MVC 2. There is a bit of a trick for getting MVC 3 in there though, which I’ll explain after the MVC 2 approach, and I will be using the MVC 3 with Razor for any code samples.

MVC 2

Once these are installed we just open Visual Studio, go to File > New Project. In the Installed Templates list, under your favorite .NET language (C# or VB.NET) there will be a Cloud option which should contain a single item – Windows Azure Project. The next screen will contain a list of available Web Roles. Since we’re interested in MVC we’ll go ahead and double click on that (keeping the name as-is. Very unoriginal, I know) and then just hit OK.

This will create not only the Azure part of our project, but also the MVC 2 application.

MVC 3

MVC 3 is just a little bit trickier to get up and running. Nothing too bad, just a few extra steps. First of all, we want to create a blank new MVC 3 application. In case you forgot, it’s File > New Project. Then under Web you have ASP.NET MVC 3 Web Application ;). Select your favorite Template (Could be Telerik MVC Web Application), but for mine I’m selecting Internet Application with the Razor View Engine.

Once the project loads you want to again go to File > New Project. Navigate to the Cloud option, and select Windows Azure Project.

Important: Make sure that under the Solution option you have selected “Add to Solution”. This is needed to ensure you have the required setup with your solution. Keep the Web Roles options blank on the next step and just hit OK.

Now in order to get the role added to our Azure Project you will have to right-click on the Roles folder, go to Add > Web Role Project in Solution...

Your MVC 3 application should show up, just select it and hit OK.

Now you have successfully added your MVC application as a Web Role. However, there is one additional step that you need to take. Azure does not have the necessary assemblies for MVC 3, so you need to make sure that you are including all of the required assemblies when you deploy. This is more commonly referred to as Bin Deployment. This type of deployment simply ensures that all of the assemblies that you need are included locally in the Bin folder. The assemblies that are needed are:

• Microsoft.Web.Infrastructure
• System.Web.Helpers
• System.Web.MVC
• System.Web.Razor
• System.Web.WebPages
• System.Web.WebPages.Deployment
• System.Web.WebPages.Razor

The ones highlighted in bold are the ones I had to add to my project, the others were already included. Just make sure all of them are there. Now select all of the ones above, right-click and go to properties. What we want to do is set the Copy Local property to true.

Once all of the above has been taken care of you now have a MVC 3 project that is Azure ready!

We have liftoff...well almost...

At this point no matter if you took the MVC 2 or MVC 3 approach you have a vanilla MVC application that can be deployed to the cloud. However, what about the Telerik Extensions for ASP.NET MVC? You might think there is a slight nightmare when using our MVC extensions in your project (especially coming from the MVC 3 route) but believe me, it’s pretty simple thanks to the Telerik Extensions for ASP.NET MVC. These get installed into Visual Studio through our automatic installer, so if you have our product installed you will most likely have this as well :)

Just right-click on your MVC project and go to Telerik MVC UI Extensions > Convert to Telerik MVC Application.

This will bring up our Project Configuration Wizard. There are only two steps in this wizard, and most of the options are pretty self-explanatory but the most important part is which version of the MVC Extensions you decide to use, which is found on the first page. I’m simply going with the Q1 2011 release of our components, but you are more than free to use whichever version you currently have installed. Once you have clicked Finish on the next wizard page, the necessary assemblies and content will be added to our project and we are now ready to roll with the Telerik Extensions for ASP.NET MVC! This should happen by default, but just do a quick check (applies to both MVC 2 and MVC 3) that the Telerik.Web.MVC assembly has its Copy Local property set to True.

As a final check, just build your solution to make sure that there are no errors ;)

Now you are free to develop whatever kind of application that you might want to have hosted in Azure! I, just as an example, created a quick TreeView using the following code:

Any time you want to run this project locally you do not have to do anything special. When you press F5 all of the necessary steps are taken to simulate the cloud environment on your machine, and the app will behave just like it will in Azure (just without having to deploy every time – pretty neat, eh?).

That is all for the first part of this mini-series. The next part will cover how to bring your lovely application from your local machine over to Azure, or as it’s usually called: deployment. Stay tuned!