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:
For production code, create unit test project – for prototyping, don’t:
Set CSSPublic as your startup project and run it to see what you’re starting with:
This site won’t use the log in functionality, so strip it out …
Site.Master:
The main Web.config:
Solution explorer:
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:
Add reference to CSSModel (which adds System.Data.Entity reference automatically):
Set Copy Local = true for System.Data.Entity and System.Web.Mvc:
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):
Add “using CSSModel” and delete the unused action methods, leaving only Index and Details:
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:
Add a Details view under Companies as well:
In Site.Master, add a menu item for Companies:
<li><%: Html.ActionLink("Companies", "Index", "Companies")%></li>
Run it, click on Companies, and you have a crude list (including a link to a crude Details page):
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>
Ah, much better:
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:
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.