Writing a simple MVC app

Posted on 12/27/2011 @ 2:47 AM in #Vanilla .NET by | Feedback | 1964 views

This blogpost is part of a series on “Writing an Azure application and integrating it with SharePoint Securely”.

Table of Contents -

  1. Writing a simple MVC app <—You are here!
  2. Porting our MVC app to Azure – adding table storage.
  3. Adding a worker role
  4. Deploying the application to Azure
  5. Integrating this Azure application with SharePoint

Writing applications for Windows Azure for .NET does not mean learning a whole new programming paradigm. You can reuse your existing skills to a large extent; you just have to follow certain rules. In this exercise, we will create a simple MVC application, which we will gradually enhance in steps so we have a full-fledged application running in Azure.

The aim of this application is to act as a complaint box. Users are presented with a simple complaint form, in which they enter a complaint – it is recorded in Azure table storage, and processed by a worker role. The worker role and web role talk to each other over a queue. But, when working with simple non-Azure .NET applications, we don’t have workers or web roles or table or queue storage. We will introduce those as we go.

Please do not be impressed by my designer or MVC architecture skills – the point of these exercises is to learn Azure, so let’s stick with that!

Start by creating a simple MVC application, call it “ComplaintBox” ensure that you create an Empty MVC 3 application and the View Engine is Razor as shown below,

 

We will begin by adding a Model as shown below,

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace ComplaintBox.Models
{
    public class Complaint
    {
        public string Title { get; set; }
        public string Description { get; set; }
        public bool IsProcessed { get; set; }
    }
}

What we intend to do here is, present the user with a page that accepts the user’s complaint. When the complaint is accepted, we would like to redirect the user to a “Thanks” page. Go ahead and add a controller called HomeController as shown below,

 

And modify it’s code to as shown below,

  1: using System;
  2: using System.Collections.Generic;
  3: using System.Linq;
  4: using System.Web;
  5: using System.Web.Mvc;
  6: using ComplaintBox.Models;
  7: 
  8: namespace ComplaintBox.Controllers
  9: {
 10:     public class HomeController : Controller
 11:     {
 12:         [HttpGet]
 13:         public ViewResult Index()
 14:         {
 15:             int hour = DateTime.Now.Hour;
 16:             ViewBag.Greeting = hour < 12 ? "Good morning" : "Good afternoon";
 17:             return View();
 18:         }
 19: 
 20:         [HttpPost]
 21:         public ViewResult Index(Complaint complaint)
 22:         {
 23:             return View("Thanks", complaint);
 24:         }
 25:     }
 26: }
 27: 

 

Next, build the project. And after building it, Right click on both the “Index” method, and add a strongly typed view as shown below.

 

Modify the view to as shown below,

  1: @model ComplaintBox.Models.Complaint
  2: 
  3: @{
  4:     Layout = null;
  5: }
  6: 
  7: <!DOCTYPE html>
  8: 
  9: <html>
 10: <head>
 11:     <title>Index</title>
 12: </head>
 13: <body>
 14:     <div>
 15:         @ViewBag.Greeting User: 
 16:         @using (Html.BeginForm())
 17:         {
 18:             <p>Title: @Html.TextBoxFor(x => x.Title)</p>
 19:             <p>Description: @Html.TextAreaFor(x => x.Description)</p>
 20:             <input type="submit" value="Submit Complaint" />
 21:         }
 22:     </div>
 23: </body>
 24: </html>

Also, add a view for “Thanks” as shown below,

Add the following code to the thanks view,

  1: @model ComplaintBox.Models.Complaint
  2: 
  3: @{
  4:     Layout = null;
  5: }
  6: 
  7: <!DOCTYPE html>
  8: 
  9: <html>
 10: <head>
 11:     <title>Thanks</title>
 12: </head>
 13: <body>
 14:     <div>
 15:         Your complaint has been received and will be processed shortly!
 16:     </div>
 17: </body>
 18: </html>
 19: 

At this point, you have the basic application working and running. Verify that you are able to run it as shown below,

 

… and when you hit “Submit Complaint” you get ..

Of course, it doesn’t store anything or do much with the complaint yet! But let’s fix that next!

Sound off but keep it civil:

Older comments..