Using the New ASP.NET MVC 4 Template in MonoDevelop

In my last post, I showed an example of an ASP.NET MVC 4 application built in MonoDevelop. Since that time, an ASP.NET MVC 4 project template has been created for MonoDevelop that makes it very easy to create a similar app.

Here are the steps for using this template:

1. To get started, install version 3.0.2+ of Mono, the latest version of MonoDevelop, and the F# Language Binding (through the MonoDevelop Add-in Manager). If you've already installed each of these, make sure that the F# Language Binding version is 3.2.8+.

2. Create a new solution (File | New | Solution) and select F# | ASP.NET | F# ASP.NET MVC 4 (Razor) as shown here:

3. Add the desired solution name, click OK, and your done.

Well that was easy, but where do you go from here? Let's walk through a simple example of creating an app for keeping track of contacts. The end result will be similar to the screenshot shown in my post entitled A Single Page App with Backbone.js, ASP.NET Web API, and F#.

1. I've already followed the previous steps to create an ASP.NET MVC 4 application in MonoDevelop called MyContacts. To quickly add a decent look to the app, I'll use the responsive front-end framework from ZURB called Foundation. All that I really need is the CSS, so I add the foundation.min.css file to the Content folder in the project. I also add an app.css file for any custom styles that are needed. The content of the app.css file is shown below:

2. I can now reference these CSS files in _Layout.cshtml. The modified file looks like this:

3. Now I modify the Index.cshtml file in the Home folder so that it will display the list of contacts. The result is shown below:

4. Lastly we make a few modifications to the HomeController. Here's the code:

5. That's it. We can now launch the site and see the following: