In this article we are going to see how to use the new Microsoft ASP.NET MVC 4 developer preview application with Windows Azure platform.
In this article we are going to see how to use the new Microsoft ASP.NET MVC 4 developer preview application with Windows Azure platform. Microsoft ASP.NET MVC 4 Developer preview is available with Visual Studio 2010 professional and ultimate versions by directly installing with the Web Platform Installer. Currently Microsoft has not provided the API's and support for the Visual Studio 11 Developers preview with the Microsoft Azure platform.
ASP.NET framework for developing web application has 2 options, ASP.NET Web Pages and ASP.NET MVC applications. Basically ASP.NET MVC is an alternative and not a replacement for the web application development with Microsoft dot net framework. ASP.NET MVC (Model-View-Controller) is a framework that divides an application implementation into three components namely Model, View and Controller.
Model is one of the components of the MVC based application and it is responsible for holding the application's business logic, data access logic and applications validation logic. This component also contains the application logic that does not normally fit inside the View or the controller components. Model normally maps to a database table having the entity details that represents the state of the application. View is one of the components of the MVC based application and it is responsible for rendering a User Interface to display the applications data, basically we use the model data to display it on to the Views User Interface. Controller is one of the components of the MVC based application and it is responsible for controlling the application state by speaking with Models and Views to maintain control flow logic of the application. Here this component is the one which handles the user inputs and do the processing as per the requirement and the business.
Here in this article we are going to use the Microsoft Azure SDK 1.5 (can be downloaded using the link Microsoft Windows Azure SDK 1.5. Basically on installing the Azure SDK we have MCV 3 templates ready for creating a web role, in order to create a MVC 4 application we need to download and install the MVC 4 framework from the web platform installer using the link (ASP.NET MVC 4 Download). Once we are done with both the installation we are now ready to develop a ASP.NET MVC 4 application and deploy it to the Windows Azure cloud environment. Let us jump start to see the step by step process on how to do that.
First let us check if the ASP.NET MVC application installed using the Web Platform installer is successful. To check that Open Visual Studio 2010 in administrator mode and create a new project and navigate to Web application section and we can see the ASP.NET MVC 4 template available as shown in the screen below.
We can see the ASP.NET MVC 4 Web application template to create our application. So let us start with creating an application using the Windows Azure project and selecting the role used to build our ASP.NET MVC 4 application. Basically in windows Azure we have different roles to develop application based on the nature the application should react. Some of the roles that are available in Windows Azure are Web Role, Worker Role, VM Role etc. For developing as ASP.NET MVC 4 Application and deploying the same in Windows Azure we require Web Role to do that.
Since we installed the ASP.NET MVC 4 to support on the Visual Studio 2010 IDE, we can see an ASP.NET MVC 4 web role template available directly while selecting the list of roles available. Let us start creating a Windows Azure Project and select the role as shown in the screen below. Here we have created a Windows Azure Cloud project from the Cloud template and provided the project name as MVC App. On clicking on create project we can see the popup with the list of available roles from which we need to select the ASP.NET MVC 4 Web Role as shown in the screen below.
We can see an ASP.NET MVC 4 Web Role with the name MvcWebRole1 has been created on clicking on OK button. Now on the Visual Studio IDE we can see a popup window which requests for the type of application we are going to create namely Internet Application, Intranet Application or a Mobile Application. Basically the idea behind these options is to provide the developer to select the type of the project template on which we are going to develop our application. Developers targeting the Mobile MVC Application development can choose the Mobile Application else for the normal web application development using the MVC pattern we can select the Internet or Intranet Application. Since we are going to take a sample of hosting on to the Azure we will go with the Internet Application as shown in the screen below.
Once we click on Ok to create the application project we can see 2 projects created, one for the Azure Cloud and other for the MVC 4 Application. Normally the cloud project contains the configurations and the packaging options to deploy our application to the Windows Azure platform and the MVC WebRole1 project contains the Web application folders in the Model View Controller pattern to develop our business logic on to the same. The projects and the folder structure looks in the order as shown in the screen below.
Now we are ready with our ASP.NET MVC 4 Application with the basic structure that will be created by default. We will do some small modifications so that we can have some unique user interface by changing the design and the structure. Once we are done with the design we can check if the application is running good by simply building and executing the application pressing the F5 button directly from the keyboard or by pressing the build solution option from the tool box of the Visual Studio IDE. We can see the application running in the Internet Explorer as shown in the screen below.
Note - We need to have the Visual Studio 2010 IDE running under the Administrator mode in order to run the Windows Azure project locally for testing. To run the IDE in administrator mode right click on the IDE icon from the Programs and select the option Run as Administrator.
While the project is been executed we can see the Windows Azure Emulator will be started and running background. Basically the windows Azure Emulator is used to run the Azure project locally on a virtual set up to see the instances of the role that is running by executing the application locally on the development machine. The Emulator has a UI to check the instance running, if we have multiple instances created then we can see multiple instances running with the different instance numbers like 0,1,2,3 etc. We can see the Windows Emulator UI by going to the task bar and right click on the Windows Azure Emulator and select Show Compute Emulator UI. We can see the Emulator UI opened with the web role we created and the list of instances (in our sample we have only one instance so it shows instance as 0) as shown in the screen below.
Now we are good with our ASP.NET MVC 4 Application sample project, we need to host this on to the Windows Azure Cloud environment. To get started first we need to register for the Windows Azure Platform and we should have a valid Windows Live ID to login to the account to manage the hosting of our application. Once we get the registered Windows Azure account we get back to the Azure Project (MVCApp) in the Visual Studio 2010 and create a package. Normally on creating a package we will get 2 files namely a configuration file and a package file. To create the package right click on the MVCApp project and select Package option to create the files as shown in the screen below.
We will get a small popup asking for the package configuration options like selecting the mode of the build configuration and the type of the service configuration we can select based on our requirement as shown in the screen below.
Clicking on the Package will start preparing the package (Service and Configuration files), we can see the status of the package preparation at the output window of the Visual Studio 2010 IDE. Once the package is created successfully we can see a folder will be opened with the 2 files created for the application. Basically the folder will be created in the bin folder of the application project under the build option mode; here we selected the Release version so the package files will be created in the Release folder as shown in the screen below.
Now we are ready with the package, our next step is to publish the package to the Windows Azure Platform. Let us start publishing the package to the Windows Azure Management portal, to do that login to the portal using the link www.windowsazure.com. On successful login we can see the options to host the application, select New Hosted Service and provide the options to upload the package. We need to provide a valid Hosted Service Name, and in the Package Location and Configuration file options browse and select the files which we got while packaging the project as shown in the screen below.
Clicking on OK will start publishing the application package to the Windows Azure Platform. It will take some time to publish. Once the publishing is completed we can see the status as published in the management portal. On Successful publish we can see the DNS name at the right side menu of the Windows Azure Management portal, clicking on the DNS will open the application on the Internet browser as shown in the screen below.
So in this application we have seen how to start using the ASP.NET MVC 4 Developers Preview on Visual Studio 2010 Windows Azure Project and deploy the application to the cloud.