I’m currently trying to collect my thoughts about what I could have done better, and what to change for next project (or for refactoring the same project). One thing is the team. I was the developer for both client and server side + the UI&UX designer (or rather “Bootstrap-devsigner”), and it would probably be better to be at least two persons for this kind of a project.

I’m rather pleased with the server side. ServiceStack makes it pretty easy to build a well structured, easy to maintain api. I’m using it together with the PetaPoco microorm, and legacy Poco’s. I would probably have choosen ServiceStack’s own MicroOrm if I was to redo it now. Since I ditched most of my legacy code anyways.

For the client side I’m pleased with the application, but the road there was a bit rocky. And the maintenance will be a bit harder than it should. So for the future I decided to find and choose a good client side framework.

Currently it looks like I’m going to choose AngularJs, which seems to get increasing popularity for each day, and I hear good things about it from pretty much everywhere. Plus I like the Angular team opinions and ideas. The main alternative is Backbone+Marionette. I already use some of backbone, and adding more of it + Marionette in iterations would probably be easier and more seamless than moving to Angular.

The client side language is Typescript, which I’m very happy with. The tools failed me a few times, nothing to write home about, but as it is still preview some problems was expected.

To be continued…

Azure Mobile Services

• Inside the Azure portal
• Easy to setup a robust Restful API over an accompanying Azure SQL database
  • With permissions per user, extensible with the help of server side js scripts (on CRUD operations)
  • Using authentication from Facebook, Twitter, Google or Microsoft Live
  • The JSONs are stored in tables, with properties automapped to columns, and schema automatically created
• Scheduled tasks (as js scripts)
• Addons like Pusher
• Easy to customize mentioned scripts (just js that runs in a nodejs app)

So I think Azure Mobile Services is a very promising service for greatly simplifying creation of the server side of a web application. Why should I need to create my own custom C# (or whatever) server code for a restful api over data, same stuff as has been done gazillions of times already on the web? Azure Mobile Services provides a portal where I can setup all I need, and overview, manage and edit it.

I wanted to try it out and put the pieces together to make a proof of concept HTML5 application that uses Facebook authentication and allows a per user CRUD of text items into my mobile service database. Plus it has some push functionality just for fun…

Azure Mobile Services (a.k.a. “Zumo”, I’ll just use that shorter name further on) has a nice site and many high quality help pages with step by step tutorials. It is in preview mode currently. Zumo is primarily targeted for mobile devices (and Windows 8 store apps) and has several examples and pre made help libraries for those. It even creates sample apps with credentials on the fly for you if you like. I used a few of those to learn some about the communication bits. Hopefully they’ll make the Rest bits just as easy eventually.

I needed the following pieces for my experiment:

• The Zumo service itself. Free to try out, in preview mode.
  • A data table in Zumo. Just with a name and with permissions set for all operations first to “Everyone” and later changed to “only Authenticated users”
  • Server side scripts on that table
    • insert: add userid to the stored items
    • read: only query for the items that has userid of the current user
• A web site that serves the files, and talks to the Zumo service (Zumo does not allow cross origin requests). One of the developers in the Azure team, Tom Rudick,  has made a small 43 locs “zumo-proxy” in node which is does just that. Just fill in the Zumo identifications and url and get going. (Do not add protocol name to the forward url, i.e. “myzumo.azure-mobile.net”)
  • I opened my copy of zumo proxy in WebMatrix, created an empty web site within Azure and used its publish settings
• A Facebook app
• Some client side code
  • connect to the Facebook app and get a facebook token
    • using the Facebook js scripts, it asks automatically user to allow the application
  • connect to the Zumo via the proxy to get a zumo token
  • add and get the items (with security token in the ajax header)

The things that took most time was go get the auth working, and to get the ajax requests right. After I learned to actually read the error messages :-p and add some logging to my node application, And – important help from Tom Rudick, I got the whole thing rolling late night.

I started out with allowing data operations for everyone so I could get going without the authentication bits:

// the zumo-proxy resends any request to /zumo/* straight to the zumo service url
// get items
$.ajax("/zumo/tables/todoitem", function (data) {
 console.log(data);
});

// post a new todoitem
$.ajax({
 url: "/zumo/tables/todoitem",
 contentType: "application/json",
 type: "post",
 data: JSON.stringify({text:"bar",complete:false})
});

Then I added Facebook client side library, and login parts:

<script src="https://connect.facebook.net/en_US/all.js" type="text/javascript"></script>

</span>
<pre>function initFacebook() {
    FB.init({
        appId: '{{my facebook app id}}',
        cookie: true,
        xfbml: true,
        status: true
    });
    loginFacebook();
}
function loginFacebook() {

    FB.getLoginStatus(function (response) {
        if (response.authResponse) {
            facebookHandleAuthResponse(response.authResponse);
        } else {
            FB.login(function (response) {
                if (response.authResponse) {
                    facebookHandleAuthResponse(response.authResponse);
                }
            });
        }
    });

}

function facebookHandleAuthResponse(authResponse) {

    // get auth token from Zumo with the help of the auth'd facebook token
    // set the header x-zumo-auth with $.ajaxSetup (for all coming ajax requests)

    $.ajax({
        url: "/zumo/login/facebook",
        type: "post",
        data: JSON.stringify({ "access_token": authResponse.accessToken }),
        contentType: "application/json",
        success: function (response) {
            $.ajaxSetup({ headers: { "x-zumo-auth": response.authenticationToken} });
        }
    });

}

When I first ran my application from Facebook, (apps.facebook.com/mycoolapp) I got a 405 error. Turns out Facebook does not handle a static file (index.html) as a start page, it does some test to post to the start page, and a static page does not allow posts. Simple workaround : rename index.html to default.aspx. And make default.aspx the start page in the Azure web site.

The scripts that runs in Zumo on every insert/read operation

For inserts: add userid to the item object:

function insert(item, user, request) {

    item.userId = user.userId;
    request.execute();

}

The first insert will create the necessary columns in the database table.

For reads: only get the items with userId == id of current user:

function read(query, user, request) {

    query.where({ userId: user.userId });
    request.execute();

}

Push notifications

I also added a Pusher service. It can be done as an addon, but it’s not available currently from my part of the world (only for US?). So I signed up for a accound directly on the Pusher site. Very easy to do. And added the 50 locs “Pusher” nodejs server side module directly within a Scheduled script (like a cron-job that executes js), and got it working.

References

Building HTML5 Apps with Windows Azure Mobile Services by Tom Ruddick

Using Azure Mobile Services in your web apps through ASP.NET Web API by Filip Woj

Pusher node server

Zumo Proxy

Update 1: I actually think nodejs makes some sense within Umbraco. Why? Well, for example it makes it possible for js-peeps to stay js. And node has a _lot_ of nice plugins (as for example jade and express).

The setup only takes a few minutes to do:

1. Install NodeJs and IISNode on your computer / server
2. Install an Umbraco site or use an existing, using WebMatrix
3. Add the NPM plugin from WebMatrix Gallery
4. Add the folders iisnode and node_modules for the NPM plugin to show up in the toolbar (and restart WebMatrix)
5. Add the Express Node module with the help of NPM. It puts the module in a new folder in your root “node_modules”
6. Add the following lines to your web.config, in the configuration section (at the bottom for example):

...
    <location path="scripts/node">
        <system.webServer>
            <handlers>
                <add name="iisnode" path="server.js" verb="*" modules="iisnode" />
            </handlers>

            <rewrite>
                <rules>
                    <rule name="express">
                        <match url="/*" />
                        <action type="Rewrite" url="/scripts/node/server.js" />
                    </rule>
                </rules>
            </rewrite>

        </system.webServer>

    </location>
</configuration

var express = require('express');

var app = express.createServer();

app.get('/scripts/node/hello/:name', function (req, res) {
    
	
	res.send('Hello ' + req.params.name + ' from node! [express sample]');
	
	
});

app.listen(process.env.PORT);

That’s it! Now you should be able to surf to /scripts/node/hello/world and you should get “Hello world from node!” back.

Update 2: What about Umbraco content?

What if we like to do something a little bit more useful – make it possible to get and edit content? Well, our node application does not have the Umbraco contents available, so we need to get it in some other way : I guess http is the standard.

Currently (in Umbraco 6.0) there is no available Restful Api out of the box (it will be added in 6.1 afaiu). However, the uRest package by Matt Brailsford seems to play nicely with u6 (edit : perhaps not, I could not get it to accept posts). Add that, and then change server.js and add a urest.js file as in this gist to get contents with internal http requests.

app.get('/scripts/node/urest/documents/:id',function(req,res){
    var documentId = req.params.id;
    requestGetWithToken("/documents/" + documentId, function (response) {
        // just return the content to the response string:
        res.send(response);
    });
});

Now you can browse to the url /scripts/node/documents/{nnnn} to get a particular document.

Check out the uRest documentation for information about how to create and edit content.

Update 3: content straight from umbraco context with the help of EdgeJs

I just managed to get actual content directly from umbraco context into nodejs with the help of the brilliant EdgeJs https://github.com/tjanczuk/edge by Tomasz Janczuk and https://github.com/sitereactor/umbraco-console-example by Morten Christensen.

I will blog more details about it, but what I needed to do was this:
1. Add Edge with the help of NPM.
2. Create a class libary dll that fires up the Umbraco context (copied from Umbraco console example), with functions returning async Task

public async Task<object> ListNodes(object input)
{
  return "nodes: " + listNodes();
}

3. Setup functions inside my node app calling the .net functions

var express = require('express');
var edge = require('edge');
var app = express.createServer();
var listNodes = edge.func({
    assemblyFile: 'C:/harcodedpath-to-my-website/bin/umbracocontext.dll',
    typeName: 'UmbracoContext.Startup',
    methodName: 'ListNodes'
}); 
 
app.get('/scripts/node/hello', function (req, res) {         
    listNodes("",function(error,data){
        res.send(data);        
    })
});
app.listen(process.env.PORT);

4. Add a node.exe.config into my node.exe folder with just a connectionstring to begin with:

<?xml version="1.0" ?>
<configuration>
    <connectionStrings>
        <remove name="umbracoDbDSN" />
        <add name="umbracoDbDSN"
             connectionString="Datasource=C:\harcodedpath-to-my-website\App_Data\Umbraco.sdf"
             providerName="System.Data.SqlServerCe.4.0" />
    </connectionStrings>
</configuration>

It’s obviously not ideal to set the connectionstring in the global node.exe folder. I think a good workaround to get local connectionstrings is to copy the node.exe to a folder within the site and set the iisnode handler to use the local node.exe instead.

<iisnode
      nodeProcessCommandLine="&quot;c:\harcodedpath-to-my-website\nodejs\node.exe&quot;" 

Edge does not make it possible (yet) to use the already existing instance of the asp.net application (share memory), so if we run umbraco in asp.net and node in parallell we will have two context instances.

If you are concerned about the performance: read this.

GetTreeById

app.get('/scripts/node/getTreeById/:nodeId', function (req, res) {  
    getTreeById(Number(req.params.nodeId),function(error,data){
        res.send(data);        
    })
});

public async Task<object> GetTreeById(int nodeId)
{
    var node = contentService.GetById(nodeId);
    return nodeToDictionary(node, true);

}
private Dictionary<string, object> nodeToDictionary(IContent content, bool includeChildren)
{
    var nodeData = new Dictionary<string, object>();
    nodeData["Name"] = content.Name;
    nodeData["Id"] = content.Id;
            
    content.Properties.ForEach(p => { nodeData[p.Alias] = p.Value.ToString(); });
    if (includeChildren)
        nodeData["Children"] = content.Children().Select(child => nodeToDictionary(child, true)).ToList();
    return nodeData;
}

This also makes it easier to adjust our code in case of future possible API changes. AmplifyJs helps us with this in a really nice way.

Disclaimer: As most things I write about, I’m far from an expert, I write as I learn new stuff. But I only write about stuff I found to be working and useful, and I hope I can help others with similar needs as mine.

Want to read an expert article about amplify.request? Check out Elijah Manors Mocking jQuery AJAX with AmplifyJS Request.

Let’s say we need to save some data to the server from our UI. We know we need to write a Web Api. But we like to focus on the UI at first. We start by writing the Html and a stub to handle the functionality:

Key: <input type="text" id="key"/><br />       
Value: <input type="text" id="value" /><br />

<input type="button" id="get" value="get"/>
<input type="button" id="post" value="post"/>

$(() =>{
    $("#get").click(() =>{
        var key = $("#key").val();
        // get data
    });
    $("#post").click(() =>{
        var key = $("#key").val();
        var value = $("#value").val();
        // post data
    });
});

Now, we could easily add jQuery ajax GET/POST functionality and get things done. But that would require us to write the server side code to be able to test the UI. If we instead add AmplifyJs we can define our request methods at application startup to stay on client side until we’re satisfied with that, and then easily switch to code that calls the server:

The code using amplify.request:

$(() =>{
    $("#get").click(() =>{
        var key = $("#key").val();

        amplify.request("getSomeData",
            {
                type: "someresource",
                key: key
            },
            function (data) {
                alert("Requested for key '" + key + "' and I got: " + data.value);
            }
        );

    });
    $("#post").click(() =>{
        var key = $("#key").val();
        var value = $("#value").val();

        amplify.request("postSomeData", {
            type: "someresource",
            key: key,
            value: value
        }, function (data) {
            alert("Result " + data);
        });

    });
});

1. Configure amplify.request to use client side functions
To add amplify client side functionality we just need to add some code that can mimic get/post behavious. For example use client side storage, which conveniantely enough, is another thing amplify can help us with:

amplify.request.define("postSomeData", (hash) => {
    if (hash.data.type == "someresource") {
        amplify.store(hash.data.key, hash.data.value); /* store the key and the value */
        hash.success(true);
    };
});

amplify.request.define("getSomeData", (hash) => {
    if (hash.data.type == "someresource") {
        hash.success({
            key: hash.data.key,
            value: amplify.store(hash.data.key) /* get the stored data with the key */
        });
    };
});

2. Later on – switch to server calls
When we are pleased with the UI then we switch out the client side code with actual server side code. Amplify handles ajax with the help of jQuery and the code looks like this:

amplify.request.define("getSomeData", "ajax", {
    url: "/api/{type}/{key}",
    type: "GET"
});
amplify.request.define("postSomeData", "ajax", {
    url: "/api/{type}",
    type: "POST"
});

Naturally we could use an if condition to use server functionality only on a live server, or we could have ConfigureAmplifyToUseServer.ts vs ConfigureAmplifyToUseLocalStorage.ts configuration files.

Lazy Typescripting
I wrote this with a lazy Typescript touch. Not many strong types. But I do use the “()=>” symbol frequently (it simply translates to javascript “function()”.) And to get some (not complete) syntax help for amplify I wrote a quick definition file which you can find here.

This is what I’m trying to achieve, I have an ordinary page with links to “sub content”, which is supposed to appear on the same page when the user clicks on a link:

When the user clicks “sub content 2″ the url becomes some-page#subcontent-2 and the corresponding content shows:

To use “client side routes” we need to add some library that handles such. The most commonly used one is probably Backbone.js.

To use it you will need to add script reference to Backbone.js and to Underscore.js which it has as a dependency.

Download the files or add reference to CDN-paths, for example:

http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js

http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js

Defining our routes and load the asked for content.

A client side route url part is everything in the url that comes after a hash, i.e. “/some-post#myview/whatever” => “myview/whatever”.

Backbone is using a straight forward syntax to setup routes, where every route has a url matching route string and a function to call. It handles parameter url parts aswell. The syntax to use a parameter is adding a colon before its name i.e. “myview/:id”

In our case we’ll use “:urlName” to match every url (“#subcontent-1″ and “#subcontent-2″) and pass the url string as the parameter urlName to the route function subContentsRoute.

The subContentsRoute route function does only one thing : it loads the html content and puts it in the #subcontents div. It’s simply using a fixed url part + the urlName parameter value (i.e. “/some-post/subcontents-2″).

var SubContentRouter = Backbone.Router.extend({
        routes: {
		":urlName" : "subContentsRoute",
           	"*actions": "defaultRoute" // matches http://example.com/#anything-here
        	},
        subContentsRoute: function(urlName) {
		$.get("/some-post/" + urlName, function(data){
			$("#subcontents").html(data);
		});
	},
        defaultRoute: function( actions ){
            this.subContentsRoute('subcontent-1');
        }
    });

$(function(){
    var app_router = new SubContentRouter;
    // Start Backbone history a neccesary step for bookmarkable URL's
	Backbone.history.start();
});

Save it as subcontentBackboneApp.js and add a script reference into the html template :

<script type="text/javascript" src="/scripts/subcontentBackboneApp.js"></script>

The rest is common Umbraco usage – create documenttype, template, content and a small macro

How to make /some-post/subcontent-2 return the right content html? Let’s setup Umbraco with a simple document type with only bodyText as a richtext property, and a template that only returns the html we like to add into our div tag.

With a document and a template in place we add our documents:

Lastly we need to create those client side links and add a container for our dynamic content. We do that by adding this macro code in the original textpage template:

      <umbraco:Macro runat="server" language="cshtml">
      @foreach(var child in Model.Children)
	     {
	        <a href="#@child.UrlName">@child.Name</a> 
	     }
	  <div id="subcontents"></div>

Can I haz images and macros?
Our subcontent can be anything, styles, tags, images. But if you use a macro, the macro context will be the subcontent node and not the containing node.

Flexibility
I find this simple approach with a router to be suitable for several similar usages to what I’m showing in this example.
* Loading “more content”,
* Loading “next sub article”,
* Being the base for a small single page application within an Umbraco site

Sample with Backbone model and view

$(function(){

	var subContentModel = new Backbone.Model({
		htmlContent:""
	});
	
	var SubContentView = Backbone.View.extend({
		initialize : function () {
			this.model.on("change",function () {
				this.render();
			}, this);
		},
		render : function() {
			this.$el.html(this.model.get("htmlContent"));
			return this;
		}});

	var subContentView = new SubContentView({
		model: subContentModel, 
		el:'#subcontents',
		});
	
	var SubContentRouter = Backbone.Router.extend({
        routes: {
			":urlName" : "subcontents",
            "*actions": "defaultRoute" 
        },
		subcontents: function(urlName) {
			$.get("/some-post/" + urlName, function(data){
				subContentModel.set({htmlContent:data});
			});
		},
        defaultRoute: function( actions ){
            this.subcontents('subcontent-1');
        }
    });
	
	
	var subContentRouter = new SubContentRouter;
	Backbone.history.start();

});

My first impression with SlickGrid is that it is a very good looking grid and it was easy to get a read and update solution up and running with very little code.

Another strength of SlickGrid is that it is possible to use a DataView model to handle the data. However that’s not something I have experimented with yet, and this sample is using a straight serverdata – grid path.

Edit (2011-12-12) to make it use the latest SlickGrid I updated my code pretty much + now also allows insert (so full CRUD, yay…)

Here’s how I did it:

The data comes from a simple Sql CE 4 db-table with the columns id (pk+identity), name (nvarchar 100), description (nvarchar 100) and somevalue (int). To create the SlickGrid I initialize it with a columns array, an options object, a data.cshtml that returns a Json object from a database read and takes post data for database insert or update.

Here’s how the html & javascript code looks like for my page (default.cshtml):

@{
    Layout = "/_layout.cshtml";
}        
        <script type="text/javascript">
    $(document).ready(function () {
        var grid;
        var columns = [
		
            { id: "name", name: "Name", field: "name", editor:TextCellEditor, resizable:false, width:100, rerenderOnResize:true},
            { id: "description", name: "Description", field: "description", editor:TextCellEditor, resizable:false, width:100, rerenderOnResize:true},
            { id: "somevalue", name: "Some value", field: "somevalue", editor:IntegerCellEditor, resizable:false, width:100, rerenderOnResize:true},
            { id:"id", name:"Delete", field:"id",
              formatter: function (r,c,id,def,datactx) {
                  return "<a href='#' onclick='removeClick(" + id + "," + r + ")'>x</a>";
            }}
	    ];

        function removeClick(databaseId, gridRow) {

            $.post("data/delete/",{id:databaseId});
            var data = grid.getData(); 
            data.splice(gridRow, 1);
            grid.setData(data);
            grid.render();

        }


        var options = {
            editable: true,
			enableAddRow: true,
			enableCellNavigation: true,
			asyncEditorLoading: false,
            enableColumnReorder: false,                        
            autoHeight: true
        };


        // Handle updates

        $.getJSON("/mygrid/data", success = function (data) {
            grid = new Slick.Grid("#myGrid", data, columns, options);            
            grid.onCellChange.subscribe(function (e, args) {
                if (typeof(args.item.id)=='undefined')
                    $.post("/mygrid/data/insert", args.item);
                else
                    $.post("/mygrid/data/update", args.item);
            });
            
            // Handle new row
            
            grid.onAddNewRow.subscribe(function(e, args) {
                var item = args.item;
                var column = args.column;
                grid.invalidateRow(data.length);
                data.push(item);
                grid.updateRowCount();
                grid.render();
            });
            
            $("#myGrid").show();
        });
        
    });
</script>

<div id="myGrid" style="width:400px;display:none;"></div>

The page is using jQuery and SlickGrid with editors plugin (included in the library samples). The css is both from jQuery UI and from SlickGrid.

Here are all the js- and css- files that’s included in the header section of the page (_layout.cshtml):

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="/js/slickgrid/slick.grid.css" type="text/css" media="screen" charset="utf-8" />
        <link rel="stylesheet" href="/css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" charset="utf-8" />
        <link rel="stylesheet" href="/css/examples.css" type="text/css" media="screen" charset="utf-8" />
        
		<script src="/js/jquery-1.7.min.js"></script>
		<script src="/js/jquery.event.drag-2.0.min.js"></script>

        <script src="/js/slickgrid/slick.core.js"></script>
        <script src="/js/slickgrid/slick.editors.js"></script>
        <script src="/js/slickgrid/slick.grid.js"></script>

        
    </head>
    <body>
        @RenderBody()
    </body>
</html>

The data.cshtml:

@{
    
    // Get Action from Url f ex /mygrid/data/insert /mygrid/data/update
    var action = UrlData[0];
    var db = Database.Open("data");
    
    if (IsPost)
    {        
        
        // Get Post data (convert null's to string or integer)
        
        var id = Request["id"];
        var name = Request["name"]??"";
        var description = Request["description"]??"";
        var somevalue = Request["somevalue"].AsInt();
        
        if (action=="insert")
        {                        
            var sql = @"INSERT INTO item (name, description, somevalue) VALUES (@0,@1,@2)";
            db.Execute(sql,name,description,somevalue);
            var newId = db.GetLastInsertId();
            Response.Write(Json.Encode(newId));
        }
        else if (action=="update")
        {
            var sql = @"UPDATE item set name=@1, description=@2, somevalue=@3 WHERE id=@0";
            var data = db.Execute(sql,id,name,description,somevalue);
        }                
        else if (action=="delete")
        {
            var sql = @"DELETE FROM item WHERE id=@0";
            var data = db.Execute(sql,id);
        }                
    }
    else
    {        
        var sql = "SELECT id, name, description, somevalue FROM item";
        var data = db.Query(sql).ToList();        
        Response.Write(Json.Encode(data));
    }       

}

This is a brief introduction post describing a way to use it for basic display of data in a WebMatrix (WebPages) web site. (I soon need the update functionality, and I hope I’ll be able to try that out and blog about in a few days.)

Let’s say we have a datatable with the columns id, name and address. We can retrieve the data with the standard WebMatrix.Data library and display it with the WebGrid helper this way:

@{
  var db = Database.Open("myConnection");
  var sql = @"SELECT * FROM items";
  var data = db.Query(sql)
  var grid = new WebGrid(data);
}
@grid.GetHtml()

It works, but is not exactly pretty:

If we use Flexigrid instead we get a much nicer result:

To accomplish this we need the flexigrid js and css files from the Flexigrid site.

I downloaded the zip, and extracted the two folders js and css to the root of my web site. Then I added reference to them and to jQuery in my demo page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Flexigrid demo</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script src="js/flexigrid.pack.js"></script>
    <link href="css/flexigrid.pack.css" rel="stylesheet" type="text/css" />
</head>

The Flexigrid needs an empty table tag and is initialized with a javascript function – together with information about the data columns, behaviours and looks of the grid.

I used a Flexigrid-sample and only changed it slightly to handle my columns (id, name, address) + the url for fetching the data.

The code is pretty self explanatory:

<table id="flex1" style="display: none">
</table>
<script type="text/javascript">
    $("#flex1").flexigrid({
        url: '/data.cshtml',
        dataType: 'json',
        colModel: [
            { display: 'id', name: 'id', width: 40, sortable: true, align: 'center' },
            { display: 'name', name: 'name', width: 180, sortable: true, align: 'left' },
            { display: 'address', name: 'address', width: 120, sortable: true, align: 'left' }
            ],
        searchitems: [
            { display: 'name', name: 'name' },
            { display: 'address', name: 'address', isdefault: true }
            ],
        sortname: "name",
        sortorder: "asc",
        usepager: true,
        title: 'Names',
        useRp: true,
        rp: 15,
        showTableToggleBtn: true,
        width: 700,            
        height: 200
    });

Fetching the data from
The data is being fetched with the help of an Ajax call, the url is specified in a parameter as in the code above. The data format is prefferably Json.

The Json needs to follow this format:

{total:1,page:1,rows:[{id:1,cell:{id:1,name:"c#",address:"test"},{id:2,cell:{id:2,name:"vb.net",address:"test2"}]}

To construct the actual Json I added a data.cshtml file, where I’m using the WebMatrix Json helper over an anonymous object like this (the code here also includes paging functionality):

@{
    var db = Database.Open("myConnection");
    var sql = @"SELECT * FROM items";
    var data = db.Query(sql).ToList();

    var pageLength = 15;
    var page = Request["page"].AsInt();   
    if (page==0) {page = 1;}

    var flexiGridItems = new
    {
        total = data.Count,
        page = page,
        rows = from n in data.Skip(pageLength*(page-1)).Take(pageLength)
               select new { id = n.id, cell = n }
    };

    var json = Json.Encode(flexiGridItems);
    Response.Write(json);
}

That is all that’s necessary to get the nice Flexigrid up’n running in a WebMatrix (WebPages) web site.

In my next blog post I will explore the data updating functionality of Flexigrid.

Happy coding!

Local storage

I wanted to try browser local storage possibilities. I found that jStorage is a no brainer to use and works in most browsers (IE6+ (bigger storage size in IE8+), Chrome 4+. Firefox 2+, Safari 4+, Opera 10.50+):

Set value

$.jStorage.set(key, value)

Get value

alert ($.jStorage.get(key)

And yes it preserves data over browser restarts, and deleted cookies.

CoffeeScript

I also wanted to try out CoffeeScript, with which JavaScript syntax is made very nice.

Be sure to have a look at this videos: Creator Jeremy Ashkenas about CoffeScript Ashkenas at jsconf

Here’s a complete “text editor” (ehrm…) CoffeScript code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js"></script>
<script src="/scripts/js/jstorage.js"></script>
<script type="text/coffeescript">
     
      $('#clear').click ->
        $('#filecontents').val('')
        
      $('#save').click ->
        key = $('#filename').val()
        value = $('#filecontents').val()
        $.jStorage.set(key,value)
        alert "Saved"
        
      $('#load').click ->
        key = $('#filename').val()
        value = $.jStorage.get(key)
        $('#filecontents').val(value)
        alert "Loaded"
     
</script>

… and with a little polishing…

<script type="text/coffeescript">

  ### Define functions ###

  showStatus = (message) ->
    $('#status').show().html(message).fadeOut(2222)
  
  clearValue = ->
    $('#filecontents').val('')
    showStatus 'Cleared'        
    
  saveValue = ->
    key = $('#filename').val()
    value = $('#filecontents').val()
    $.jStorage.set(key,value)
    showStatus 'Saved'
  
  loadValue = ->
    key = $('#filename').val()
    value = $.jStorage.get(key)
    $('#filecontents').val(value)
    showStatus 'Loaded'       
    
  ### Hook functions to events ###

  $('#clear').click -> clearValue()       
  $('#save').click -> saveValue()         
  $('#load').click -> loadValue()    

</script>

The markup:

  <h1>CoffeeScript, jStorage and jQuery<span id="message"></span></h1>
  "Filename":<input type="text" id="filename" value="default"/>
  <a href="#" id="clear">Clear</a>
  <a href="#" id="save">Save</a>
  <a href="#" id="load">Load</a><br/>
  <span id="status"></span>
  <br/>
  <textarea id="filecontents" rows=3 cols=40></textarea>

Conclusion

I think I found two new toys, err… tools for my dev toolbox today.

1. The WebMatrix site

First create a new site in WebMatrix using the Empty site template.

2. Database

Next define a Sql CE database file, call it db and add a table named product:

Also add some demo data in the table, so you have something to show later on.

3. Json

Now it’s time to create a file that will serve a list of records from the database using json. For that reason, go create products.cshtml with this simple code:

@{
    var db = Database.Open("db");
    var sql = @"SELECT * FROM product";
    var data = db.Query(sql);
    Json.Write(data, Response.Output);
}

So now we have data and some code to read it. So try it out by running products.cshtml. You should see a json representation of all your products in your browser window:

[{"id":1,"name":"a product"},{"id":2,"name":"another one"},{"id":3,"name":"a third"}]

4. The master template with references to js libraries

We are going to use some jQuery libraries in this sample. The jQuery base, jQuery UI for some nice looking UI and jQuery templates to render json data to html in a very conveniant template fashion.

All the libraries are available online, and there’s no need to use local copies at this point.

So, create a _layout.cshtml with the following content:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>        
        <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js" type="text/javascript"></script>

    </head>
    <body>
        @RenderBody()
    </body>
</html>

5. The main page

The last file in our WebMatrix project is the index.cshtml which only includes a jQuery UI styled button and a div placeholder for the result to begin with. On the click of that button we make a ajax call to get the data from our table, and render it to Html.

Here’s the complete code:

@{
    Layout="~/_Layout.cshtml";
}

<script>

    function renderResult(data)
    {
        // define the jQuery template with html code and
        // proper property names from the data query result       
        var markup = "<li>${id} : ${name}</li>";                                        
        $.template("listTemplate", markup);                    
        
        // render the template using the json data
        // iterates automatically over each each item in data        
        $.tmpl("listTemplate", data ).appendTo( "#result" );        
        
    }
	$(function() {
    
        // create good looking jQuery UI button element        
        $( ".button" ).button();
        
        // hook a getJSON to the click event of the button        
        $( "#getdata" ).click(function() { 
            $.getJSON('products.cshtml',renderResult);
        });
	});
</script>

<div id="getdata" class="button">Get data</div>
<ul id="result"></ul>

Here’s what your complete project in WebMatrix should look like, only three cshtml files and one database:

Result

Conclusion

Simple as that! Fun eh? And really useful I’d say.

Supporting non-js browsers when developing webapps sometimes feels like keeping support for Windows 3.11 when developing Windows apps.