Step 4: Create the ASP.NET MVC Project

If you haven’t already, read the article this example is based on or start at the beginning of this example.

I really like ASP.NET MVC 3, but it’s not quite released yet, so for this example, I’ll stick with ASP.NET MVC 2.

Right-click on the solution and add an MVC2 project called CSSPublic:

SNAGHTML38c6182

For production code, create unit test project – for prototyping, don’t:

SNAGHTML38e8c3a

Set CSSPublic as your startup project and run it to see what you’re starting with:

SNAGHTML39137c4

This site won’t use the log in functionality, so strip it out …

Site.Master:

image

The main Web.config:

image

Solution explorer:

image

Run it again to make sure it still works (I like to run a lot when I’m making changes).

Copy the connection string from CSSModel’s App.Config to CSSPublic’s Web.config:

image

Add reference to CSSModel (which adds System.Data.Entity reference automatically):

SNAGHTML3a2a1cd

Set Copy Local = true for System.Data.Entity and System.Web.Mvc:

image

There are some assemblies that are not on Azure. When you use these assemblies, you will have to set Copy Local to true. While prototyping, I am often lazy and set Copy Local to true for every assembly. Once you move past prototyping, it’s better to figure out exactly which assemblies need to be set to Copy Local.

Add controllers and views

NOTE: with MVC, naming is relevant – keep plural names and method names consistent. Tweak at your own risk.

Right-click on the Controllers folder in Solution Explorer and add CompaniesController (I like to check the box for adding action methods and then delete the ones I don’t use):

SNAGHTML3ae5737

Add “using CSSModel” and delete the unused action methods, leaving only Index and Details:

image

Change Index to return a list of companies:

CSSModelContainer db = new CSSModelContainer();
return View(db.Companies.ToList());

Change Details to return a single company:

CSSModelContainer db = new CSSModelContainer();
return View(db.Companies.Single(c => c.Id.Equals(id)));

In Solution Explorer, Right-click on the Views folder to add a new folder called Companies. Then right-click on that folder and add a View called Index. Make it strongly typed, change the view data class to CSSModel.Company and the view content to List:

SNAGHTML3b9bd97

Add a Details view under Companies as well:

SNAGHTML3cb66e0

In Site.Master, add a menu item for Companies:

<li><%: Html.ActionLink("Companies", "Index", "Companies")%></li>

image

Run it, click on Companies, and you have a crude list (including a link to a crude Details page):

image

Edit Index.aspx to make the page a bit prettier. Delete the ID field, the Edit, Delete, and Create links and change the company name to a link to Details:

<table>
    <tr>
        <th>
            Name
        </th>
        <th>
            Country
        </th>
    </tr>

<% foreach (var item in Model) { %>

    <tr>
        <td>
            <%: Html.ActionLink(item.Name, "Details", new { id=item.Id })%> |
        </td>
        <td>
            <%: item.Country %>
        </td>
    </tr>

<% } %>
</table>

image

Ah, much better:

image

The same steps can be repeated to make the Details view prettier and to add a controller and views for Story.

Obviously, there is a lot of work to do to make a site like this look really good, but MVC is perfect for getting it to a point where you can engage a designer – once you get information architecture right, you’re just manipulating HTML on a view, so it’s easy to evolve and tweak. MVC 3 with Razor makes this even easier (the non-HTML syntax recedes even further into the background), but MVC 2 is already outstanding.

Publish to Azure

Again, I’m deviating from the article here and sharing a single Azure Services project across all examples. So in solution explorer, go to the CSSService project and delete CSSAdmin as the associated web role, then add CSSPublic:

image

Publish to Azure as in the previous step; verify that your app works in the cloud, then stop AND DELETE the web role in the Windows Azure account portal so that you don’t incur charges.

Continue to step 5.

Leave a Reply

Your email address will not be published.