.NET Zone is brought to you in partnership with:

Daniel Mohl is a professional software engineer/architect whose interests include understanding the intricacies of various programming languages, enterprise application architecture, and how to bridge the gap between business and technology. He works with F#, C#, CoffeeScript, JavaScript, Erlang, ASP.NET MVC, WPF, WCF, Silverlight, WP7, SQL Server, etc. He is a F# MVP, C# Insider, F# Insider, blogger, speaker, and event organizer. You can follow him on twitter at www.twitter.com/dmohl. Daniel is a DZone MVB and is not an employee of DZone and has posted 30 posts at DZone. You can read more from them at their website. View Full User Profile

Using the New ASP.NET MVC 4 Template in MonoDevelop

  • submit to reddit

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:

Published at DZone with permission of Daniel Mohl, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)