Random Ravings of a Red Headed Code Monkey: 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:

	.header {
	color: #2BA6CB;
	}

	hr {
	margin: 0 0 5px 0;
	}

view raw app.css hosted with ❤ by GitHub

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

	<!DOCTYPE html>
	<html>
	<head>
	<title>@ViewBag.Title</title>
	<link href="@Url.Content("~/Content/foundation.min.css")" rel="stylesheet" type="text/css" />
	<link href="@Url.Content("~/Content/app.css")" rel="stylesheet" type="text/css" />
	</head>
	<body>
	@RenderBody()
	</body>
	</html>

view raw gistfile1.html hosted with ❤ by GitHub

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:

	@model IEnumerable<MyContacts.Contact>

	@{
	ViewBag.Title = "My Contacts";
	}

	<div class="nine.columns.centered">
	<div class="row">
	<div class="five columns"><h6 class="header">FirstName</h6></div>
	<div class="five columns"><h6 class="header">LastName</h6></div>
	<div class="two columns"><h6 class="header">Phone</h6></div>
	</div>
	<hr/>
	@foreach (var item in Model) {
	<div class="row">
	<div class="five columns">@Html.DisplayFor(modelItem => item.FirstName)</div>
	<div class="five columns">@Html.DisplayFor(modelItem => item.LastName)</div>
	<div class="two columns">@Html.DisplayFor(modelItem => item.Phone)</div>
	</div>
	}
	</div>

view raw gistfile1.html hosted with ❤ by GitHub

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

	namespace MyContacts

	open System
	open System.Collections.Generic
	open System.Linq
	open System.Web
	open System.Web.Mvc
	open System.Web.Mvc.Ajax

	[<CLIMutable>]
	type Contact = { FirstName : string; LastName : string; Phone : string }

	type HomeController() =
	inherit Controller()

	// This is for demonstration purposes only.
	let contacts = seq {
	yield { FirstName = "John"; LastName = "Doe"; Phone = "123-123-1233" }
	yield { FirstName = "Jane"; LastName = "Doe"; Phone = "123-111-9876" } }

	member this.Index () =
	contacts \|> this.View

view raw HomeController.fs hosted with ❤ by GitHub

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

Saturday, December 8, 2012

Using the New ASP.NET MVC 4 Template in MonoDevelop