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
<script src="@Url.Content("~/Scripts/jquery-1.9.0.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/knockout-2.2.1.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/knockout.mapping-latest.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/DBOptionsKnockoutSPA.js")" type="text/javascript"></script>
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 :
<div class="editForm" id="editOptions"> <table id="tblEditForm" data-bind="with: dbOption"> <tr> <td>Option Id :</td> <td> <span id="txtOptionId" data-bind="text: OPTION_ID"></span> </td> </tr> ... </table> And the pertinent code for the List section :
<div id="dvOptions" class="editList"> <div style="height: 480Px; width:700Px; overflow-y: scroll;"> <table id="tblOptions" style="width: 98%; border: 1Px groove Orange"> <tr style="background: #000000; color: #ffffff;"> <th style="display: none;">Option Id</th> <th>Subfirm</th> <th>Business Process</th> <th>Central</th> <th>Enabled</th> <th>Consent</th> <th></th> <th></th> </tr> <tbody data-bind="foreach: dbOptions"> <tr> <td data-bind="text: OPTION_ID" style="display: none;"></td> ... </table> The edit and delete links are accomplished with Knockout Bindings as shown here:
<td> <span id="spnEdit" style="font-weight:bold; text-decoration:underline; color:#0000ff;" data-bind="click: $root.populateEdit">Edit</span> </td>
The data paging functionality is also done with Knockout bindings : <input type="button" id="bttnNext" value="Previous Page" data-bind="click: $root.Prev" /> Page : <span id="spnPageNum" data-bind="text: pageNum"></span>
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; }

Windows 8 RSS Reader Continued

All I added to the template provided by Visual Studio is here : In the HTML document, I did very little except add a ListView, and a WinJS Binding Template for items in the list. I added an Article element for the Blog entry detail pane. The code was added to the existing JS file provided as below :

    // To get the data from the website
                getFeeds(blogPosts, null); 

    // To expose the data to the page.
                var publicMembers =
                    { blogItems: blogPosts };

                WinJS.Namespace.define("DataRSS", publicMembers);

   // To finish setting up the page for view
    args.setPromise(
                WinJS.UI.processAll()
                .done(function () {

   // Add event handlers for the controls
                    var button1 = document.getElementById("bttnMore");
                    button1.addEventListener("click", buttonMoreClick, false);


                   var myList = document.getElementById("myRSSItems");
                   myList.addEventListener("selectionchanged", _selectionChanged);
                }));

Then there is specific acquire and data parsing code for the blogs. First get the data, saving the most recent post date into a variable:

function getFeeds(blogs, after) {

    // To Get more items need to login.
    // // http://www.google.ca/reader/atom/feed/http://forums.corvetteforum.com/external.php?type=RSS2&n=50

    var urlString =
        "http://forums.corvetteforum.com/external.php?type=RSS2";

    var today = new Date();

    today.setDate(today.getDate() - 1);

    var dataPromise = acquireSyndication(urlString, today.toLocaleString());
    
    dataPromise.done(
        function completed(articlesResponse) {

            var lastDate = null;

            lastDate = getPostsAfter(articlesResponse, blogs, after);

            var lastToday = new Date(lastDate);

            // populate a SPAN on the page with the recent date.
            spLastPub.innerText = lastToday.toLocaleString();
        });

}

The RSS feed won't give but the most recent 15 items unless you login to Google

function getPostsAfter(xmlDoc, blogs, afterDate) {

    var articleSyndication = xmlDoc.responseXML;

    if (afterDate != null) {
        var aftDate = new Date(afterDate);
    }

    var posts = articleSyndication.querySelectorAll("item");

    var lastPublished = null;

    for (var postIndex = 0; postIndex < posts.length; postIndex++) {
        // debugger;

        var postTitle = posts[postIndex].querySelector("title").textContent;
        var postLink = posts[postIndex].querySelector("link").textContent;
        var description = posts[postIndex].querySelector("description").textContent;
        var published = posts[postIndex].querySelector("pubDate").textContent;
        var contentEncoded = posts[postIndex].querySelector("encoded").textContent;

        if (postIndex == 0) {
            lastPublished = published;
        }

        var compareDate = new Date(published);

        if (afterDate == null ||
            compareDate > aftDate) {
            blogs.push({
                title: postTitle,
                subtitle: postLink,
                desc: description,
                pubDate: published,
                content: contentEncoded
            });
        }

    }

    return lastPublished;
}

The function for acquiring the feed asynchronously was generously provided in the tutorial, so I used it verbatim :

function acquireSyndication(url, modified) {

    return WinJS.xhr(
        {
            url: url,
            headers: { "If-Modified-Since": modified }
        });

}

The only way to get full coverage of the blog without the login overhead, was to provide a button which would update the list with any new entries since the original opening of the page :

 function buttonMoreClick(arg) {

        getFeeds(blogPosts, spLastPub.innerText);
    }

The Microsoft article is here - http://msdn.microsoft.com/en-us/library/windows/apps/jj663506.aspx

My First Windows 8 Store application

I am learning to write code in Windows 8 and wanted an application for reading CorvetteForum.com. While there are other products for reading RSS feeds, I wanted a full application for just this one feed. Here are some screen shots of the user interface :

This app is from the Visual Studio 2012 project template Javascript - Windows Store - Blank Application.

There is a lengthy tutorial about how to write a full blog reader, however I wanted to learn the parts without just pasting a huge code volume and not having time to read it all. I wanted to do alot of my own coding.