Brian's .Net Programming Nuggets: Knockout Web API SPA

This is just to explore the new technologies in the Microsoft .Net and Javascript communities. The Web API allows for a lightweight web services tier, while Knockout provides productivity in the browser side. Most of this technique I found in tutorials on www.asp.net and other like sites. I am not feigning originality here.
I am describing the building of a SPA - Single Page Application.
I have built a quick application which performs CRUD operations on the single table using Knockout, Web API, and NHibernate data layer.
Here is the browse data view of the application. There are links to edit, delete and add new items. Also it does paging, because the table is large.

Here is the Edit data view :

How is it built?

A standard MVC project is created in C#, selecting the WEB API project template along the way. A Project Reference is added to the data layer project.

There are 3 main components needed to get a UI running : a Controller class, a Javascript file, and an HTML View file.

The HTML View

References to the various script libraries are added

It is easiest is to build the View and then animate it with code. The View I have above contains edit and list sections which are hidden and shown alternatively, using the JQuery “Hide” and “Show” commands. Just to explain the syntax, here is the relevant part of the Edit section :
And the pertinent code for the List section :
The edit and delete links are accomplished with Knockout Bindings as shown here:

The data paging functionality is also done with Knockout bindings :
The Scripting

Knockout implements the ViewModel part of the MVVM architecture which means we have to code this in the javascript for the html page. Here is my example ViewModel which works in the single page application :

This ViewModel contains objects for the single item and the list of those items.

/// <reference path="jquery-1.9.0.js" />
/// <reference path="knockout-2.2.1.js" />
/// <reference path="knockout.mapping-latest.js" />

function viewModel() {
    
    var self = this;

self.dbOptions = ko.observableArray();

self.pageNum = ko.observable(1);

self.dbOption = { 
         OPTION_ID: "999", 
         CLRG_COR_NUM: "999" };
        
    self.populateEdit =
      function (item) {
          $.getJSON("/api/dbOptions/" + item.OPTION_ID() + "/",
          function (data) {
              
              ko.mapping.fromJS(data, {}, self.dbOption);

showEdit();
          })
        .fail(
            function (jqXHR, textStatus, err) { alert('Error: ' + err); });
      }

self.populateList =
        function () {
          $.getJSON("/api/dbOptions/",
           function (data) {
               ko.mapping.fromJS(data, {}, self.dbOptions);
               ko.mapping.fromJS(data[0], {}, self.dbOption);

ko.applyBindings(self);
           });
       }

self.Add =
          function () {
            $.getJSON("/api/dbOptions/0/",
              function (data) {
                ko.mapping.fromJS(data, {}, self.dbOption);

showEdit();
             })
          .fail(
            function (jqXHR, textStatus, err) { alert('Error: ' + err); });
          }
           
       self.Prev =
          function () {            
              if (self.pageNum == 1)
                  return;

self.pageNum(self.pageNum() - 1);

$.getJSON("/api/dbOptions/", { "page": self.pageNum()-1 },          
                function (data) {
                    ko.mapping.fromJS(data, {}, self.dbOptions);
                 });         
          }

self.Next =
          function () {   
           self.pageNum(self.pageNum() + 1);

$.getJSON("/api/dbOptions/", { "page": self.pageNum()-1 },
               function (data) {
                   ko.mapping.fromJS(data, {}, self.dbOptions);
             });
           }

self.Save =
         function (item) {
            $.ajax("/api/dbOptions/",
            { type: "POST",
              data: item,
              success: function (data) 
              {
                  alert("Row with id " + data.OPTION_ID + " posted!");
              },
              complete: function (data) 
              {
                  showList();
              },
              dataType: "json"
          });
      }

self.Delete =
       function (item) {
           if (window.confirm("Are you sure?") != 1) return;

$.ajax("/api/dbOptions/",
                { type: "DELETE",
                  data: item,
                  success: function (data) {
                      alert("Row with id " + data.OPTION_ID + " deleted!");
                  },
                  complete: function (data) {
                      showList();
                  },
                  dataType: "json"
                });
       }

}

$(function () {
     var v = new viewModel();
     
     v.populateList();

showList();
 });

function showEdit() {
    $("div.editForm").show();
    $("div.editList").hide();
}

function showList() {
    $("div.editForm").hide();
    $("div.editList").show();
}

function CancelEdit() {
    $("div.editForm").toggle();
    $("div.editList").toggle();
}

The Controller code
This is a class which implements the API methods to return data for Knockout to display. The WEB API uses convention to determine which method to execute. Objects are posted intact to the methods, and parameters passed with names are converted to querystring. If passed without name to a GET function, then the value just becomes part of the path "API/THING/1/" for example. Posts and Deletes are translated into methods with those names.

public class dbOptionsController : ApiController
    {

public IEnumerable<dbOption> GetAll()
        {
            Data d = new Data();

return d.GetAllDBOptions()
                .OrderBy(x => x.CLRG_COR_NUM)
                .Take<dbOption>(20);
        }

public IEnumerable<dbOption> GetAll(int page)
        {
            Data d = new Data();

return d.GetAllDBOptions()
                .OrderBy(x => x.CLRG_COR_NUM)
                .Skip<dbOption>(page * 20)
                .Take<dbOption>(20);
        }

public dbOption GetById(int id)
        {
            Data d = new Data();

if(id == 0) 
                return new dbOption();    
            else
                return d.Get<dbOption>(id);
        }

public dbOption Post(dbOption item)
        {
            Data d = new Data();

// Check the key column for a value
            if (item.OPTION_ID == null ||
                item.OPTION_ID == 0)
            {
                d.SaveDbOption(item);
            }
            else
            {
                d.UpdateDbOption(item);
            }

return item; 
        }

public dbOption Delete(dbOption item)
        {
            Data d = new Data();

d.Delete(item);

return item;
        }