Using F# Records with ASP.NET Web API

In the Knockout.js and Backbone.js examples that I provided over the last few weeks, the model was written as a class using the traditional syntax. Here's an example:

	type Contact() =
	let mutable firstName = ""
	let mutable lastName = ""
	let mutable phone = ""
	member x.FirstName with get() = firstName and set v = firstName <- v
	member x.LastName with get() = lastName and set v = lastName <- v
	member x.Phone with get() = phone and set v = phone <- v

view raw gistfile1.fs hosted with ❤ by GitHub

While this approach works well, it would be great if we could use F# records instead. It turns out that with a few tweaks, this is easy to accomplish. Let's see how to do this in the Knockout.js example.  

First, we'll change the model to be an F# record. The new model looks like this:

type Contact = { FirstName : string; LastName : string; Phone : string }

view raw gistfile1.fs hosted with ❤ by GitHub

We'll also need to change how the example data is initialized. This code now looks like this:

	let contacts = seq { yield { FirstName = "John"; LastName = "Doe"; Phone = "123-123-1233" }
	yield { FirstName = "Jane"; LastName = "Doe"; Phone = "123-111-9876" } }

view raw gistfile1.fs hosted with ❤ by GitHub

Lastly, a small change is needed in the ContactsViewModel. This now looks like the following:

Rough Cut of Building Web, Cloud, and Mobile Solutions with F#

Back in May I talked about two books that were currently underway. Today I'm proud to say that one of those books is now available as a Rough Cut on Safari Books Online.

I hope you enjoy reading it as much as I enjoyed writing it! A huge thanks goes to Ryan Riley for his continued expertise and guidance as the technical reviewer.

Knockout.js Added to the F#/C# MVC 4 Single Page Application Template

Two weeks I announced a new Single Page Application (SPA) template with Backbone.js in the F# C# MVC 4 Visual Studio extension. Last week an example of a SPA with Knockout.js was provided. I bet you can guess what's coming...

Today, you can get version 1.13 of the F# C# MVC 4 extension, which gives you the option to choose between Backbone.js and Knockout.js when creating a F#/C# SPA.

The new project creation screen looks like this:

If you would like to see additional JavaScript frameworks included as options, let me know.

You can find information on the Knockout.js version in this post and information on the Backbone.js version in this post. Note: A C# only version and a PHP version of the Backbone.js example is available at https://github.com/dmohl/FsWebSpa-Backbone/downloads.

A Single Page App with Knockout.js, ASP.NET Web API, and F#

A few weeks ago, I posted a simple example of a Single Page Application (SPA) built with Backbone.js, ASP.NET Web API, F#, C#, and more. Today, I'm posting a similar example, but built with Knockout.js. Let's look at some of the code.

View:

Knockout.js supports binding of model data directly to DOM elements, so the first thing that we will look at is one of the templates that are used for the views. Here's what this example uses for the contacts list view template:

	<div class="nine.columns.centered">
	<p class="row">
	<a href="#/create" class="small button radius">Create Contact</a>
	</p>
	<div class="row">
	<div class="five columns header">FirstName</div>
	<div class="five columns header">LastName</div>
	<div class="two columns header">Phone</div>
	</div>
	<div data-bind="foreach: contacts">
	<div class="row">
	<div class="five columns" data-bind="text: firstName"/>
	<div class="five columns" data-bind="text: lastName"/>
	<div class="two columns" data-bind="text: phone"/>
	</div>
	</div>
	</div>

view raw gistfile1.html hosted with ❤ by GitHub

The main thing to notice in this markup is the use of the data-bind attributes to bind specific model data to the appropriate DOM elements.

ViewModel:

The example defines a single ViewModel that is used for both of the available views. The code, which is fairly similar to that described at http://knockoutjs.com/examples/contactsEditor.html, is shown below:

	(function ( viewModel, $ ) {
	viewModel.ContactsViewModel = function ( contacts ) {
	var self = this;
	self.contacts = ko.observableArray( ko.utils.arrayMap( contacts, function ( contact ) {
	return { firstName: contact.firstName, lastName: contact.lastName, phone: contact.phone };
	}));
	self.addContact = function () {
	var data = appFsMvc.utility.serializeObject( $("#contactForm") );
	$.ajax({
	url: "/api/Contacts",
	data: JSON.stringify( data ),
	type: "POST",
	dataType: "json",
	contentType: "application/json"
	})
	.done(function () {
	toastr.success( "You have successfully created a new contact!", "Success!" );
	self.contacts.push( data );
	window.location.href = "#/";
	})
	.fail(function () {
	toastr.error( "There was an error creating your new contact", "<sad face>" );
	});
	};
	};
	})( appFsMvc.ViewModels = appFsMvc.ViewModels || {}, jQuery );

view raw gistfile1.js hosted with ❤ by GitHub

Router:

Another thing to notice is the routing mechanism used in this example. Since Knockout.js doesn't provide built in URL routing, I've used Sammy.js to accommodate the need. Here's what the router looks like:

	(function ($) {
	appFsMvc.App = function( contactsViewModel ) {
	return $.sammy( "#content", function () {
	var self = this;
	this.use( Sammy.Cache );
	this.contactViewModel = contactsViewModel;
	this.renderTemplate = function ( html ) {
	self.$element().html( html );
	ko.applyBindings( self.contactViewModel );
	};
	// display all contacts
	this.get( "#/", function() {
	this.render("/Templates/contactDetail.htm", {}, function ( html ) {
	self.renderTemplate( html );
	});
	});
	// display the create contacts view
	this.get( "#/create", function() {
	this.render("/Templates/contactCreate.htm", {}, function ( html ) {
	self.renderTemplate( html );
	});
	});
	});
	};
	$(function () {
	$.getJSON( "/api/contacts", function ( data ) {
	var viewModel = new appFsMvc.ViewModels.ContactsViewModel( data );
	appFsMvc.App( viewModel ).run( "#/" );
	});
	});
	})(jQuery);

view raw gistfile1.js hosted with ❤ by GitHub

ApiController:

Lastly, we'll get a quick look at the API Controller that is written in F#. Here's the code:

	open System.Web.Http
	open FsWeb.Models
	type ContactsController() =
	inherit ApiController()
	let contacts = seq { yield Contact(FirstName = "John", LastName = "Doe", Phone = "123-123-1233")
	yield Contact(FirstName = "Jane", LastName = "Doe", Phone = "123-111-9876") }
	member x.Get() =
	contacts
	member x.Post ([<FromBody>] contact:Contact) =
	contacts |> Seq.append [ contact ]

view raw gistfile1.fs hosted with ❤ by GitHub

That's pretty much it. You can find the full solution at https://github.com/dmohl/FsWebSpa-Knockout. CodeProject