A software developer's diary

How to build a grid with knockout - Part 3: Sorting and Styling

2012-07-14T21:40:00.000-07:00

In Part 3 of this tutorial we're going to add the ability to sort the data in the grid by a particular column in ascending or descending order. The sorting is going to take place on the server and is going to work in conjunction with the paging that we implemented in Part 2. I've have also added some styling to the grid so the final result will look as follows:

Step 1 - The Javascript
Within our javascript view model I've added a method SetOrder() that can will be called when the user clicks on a column header, this looks as follows:

    function SetOrder(data, event, colName) {
        if (_this.colName === colName) {
            _this.switchSortOrder();
        } else {
            _this.colName = colName;
            _this.sortOrder = "asc";
        }
        setTHClass(event);
        loadDataFromServer();
    }

     _this.SetOrder = SetOrder;

The first thing the code does is check if we're already sorting by the column that has been clicked, if so we reverse the sort order. If this is the first time is has been clicked we set the sort order to ascending. This is a good example of how we can use the member properties of the view model, _this.colName and _this.sortOrder, to remember the state of the grid in between actions.

Once we've ascertained the column we're sorting by and the direction we can call the setTHClass() function to show the correct icon for the sorting column. The code for this looks as follows:

   function setTHClass(event) {
        //remove the existing classes
        $(event.currentTarget).parent().find(".sort_wrapper").children("span").removeClass("asc");
        $(event.currentTarget).parent().find(".sort_wrapper").children("span").removeClass("desc");
        if (_this.sortOrder === "asc") {
            $(event.currentTarget).children(".sort_wrapper").children("span").addClass("asc");
        } else {
            $(event.currentTarget).children(".sort_wrapper").children("span").addClass("desc");
        }
    }

We make use of css classes asc and desc to show the correct icon on the sorting column. The code first removes all traces of these classes from the columns and then adds the correct one where required. Extensive use of JQuery DOM traversal functions are used to make this task easier.

The other major change is in the loadDataFromServer() function where we now have to pass information to the server specifying how the data is to be sorted, this is done by adding the querystring parameters sidx and sord to the url that we post to the server:

function loadDataFromServer() {
            var url = '/people/data';
            //add paging params
            url += '?rows=' + _this.rowsPerPage() +
            '&page=' + _this.page() +

            //add sorting params

'&sidx=' + _this.colName +
'&sord=' + _this.sortOrder;

             $.post(
                url,
                function (data) {
                    _this.records(data.TotalRowsCount);
                    _this.totalPages(data.TotalPageCount);
 
                    var results = ko.observableArray();
                    _this.people.removeAll();
 
                    ko.mapping.fromJS(data.GridData, {}, results);
                    for (var i = 0; i < results().length; i++) {
                        _this.people.push(results()[i]);
                    };
                },
                'json'
            )
        }

Step 2 - The Controller
Now we need to modify the controller to make use of the additional querystring parameters that are being passed through. The first task is to sort our data by the requested column, this can be done by using a set of dynamic linq helpers that Scott Gu blogged about, it's all contained in one file that you will need to download and add to your project. You will also need to add a using clause of System.Linq.Dynamic to your controller class.

Once you have done that we can change our controller code to look as follows:

   public JsonResult Data(int rows, int page, string sidx, string sord)
        {
            IQueryable<Person> qryPeople = GetPersonQuery();

            GridDataResult gridDataResult = new GridDataResult();
            gridDataResult.TotalRowCount = qryPeople.Count();
 
            int totalPages = 1;
            if (rows > 0)
            {
                totalPages = gridDataResult.TotalRowCount / rows;
                if (gridDataResult.TotalRowCount % rows != 0)
                    totalPages += 1;
            }
 
            gridDataResult.TotalPageCount = totalPages;
 
            //now do the sorting
            qryPeople = qryPeople.OrderBy(sidx + " " + sord);
 
            gridDataResult.GridData = qryPeople
                .Skip((page - 1) * rows)
                .Take(rows);
 
            return Json(gridDataResult);
        }

Because we are now using the Dynamic Linq helpers we can order qryPeople using strings, perfect for doing sorting!

Step 3 - The Html
The final step is modifying the html to make sure that when a column header is clicked the view model is notified to that we can reorder the grid. We do this by binding to the table header using knockout as follows:

<thead>
<tr>
    <th data-bind='click: function(data, event) { SetOrder(data, event, "FirstName")}'>
        <div class="sort_wrapper">First Name<span class="grid_order ui_icon"></span></div>
    </th>
    <th data-bind='click: function(data, event) { SetOrder(data, event, "LastName")}'>
        <div class="sort_wrapper">Last Name<span class="grid_order ui_icon"></span></div>
    </th>
    <th data-bind='click: function(data, event) { SetOrder(data, event, "Age")}'>
        <div class="sort_wrapper">Age<span class="grid_order ui_icon"></span></div>
    </th>
</tr>
</thead>

We now have a grid that supports paging, sorting and has been nicely styled. If you would like to download the code you can do so here.

ASP.net MVC - Handling json dates with a custom converter.

2012-04-06T01:14:00.000-07:00

Handling dates in json can be a real pain as it has no concept of a date datatype - however by using the jQuery ajax() method and specifying a custom converter you can easily turn dates sent from the server into Date objects on the client.

A date when it comes down from the server in json format looks like this:

"BirthDate":"\/Date(1507546800000)\/"

What is nice about this rather unfriendly format is that is has the /Date prefix (the backslashes are escape chars in json), this means we can look at a string and determine whether we should treat is as a date or not.

I typically use the jQuery ajax() method ($.ajax) to get a json payload from the server. By default if you specify a dataType of 'json' the ajax() method will use an inbuilt converter to turn the returned json string into a javascript object. Fortunately this method also takes a converters object which we can use to parse and transform the json before it is passed to the success() method.

In order for our converter to be called we need to specify a particular datatype - this cannot be one of the default in-built ones or it will be ignored (such as json) - in this instance I've called mine jsonWithDates. When you specify your converter the first option is a string which says what you're converter is going to take in and return. You need to provide two values in the string separated by a a space (this feels a bit clumsy!). In this case I've specified "text jsonWithDates" because I specified that the dataType I want to deal with is "jsonWithDates" and I want "text" passed into my converter. When the response is received from the server jQuery will look at the converters and see that I have a converter that knows how to do the necessary conversion. Be warned that if you specify "json jsonWithDates" your converter will be passed a javascript object to convert and not a json string as jQuery will do a conversion for you implicitly, that's why I've used "text jsonWithDates".

Ok - so now we know how to hook into the pipeline and set up a converter, that's the hard part done! The second option in the converter object is a function that takes in the payload from the response and provides a converted response. It's up to you now to handle the transformation as you see fit. For my purposes I've used the JSON.parse() method which handily takes in a function that we can use to map individual values when parsing json. In my function I do a check to see if it is a date using a regular expression, if it passes I convert it to a javascript date object and return it.

Now in my success method I will receive a javascript object that has properties that are of type Date. The full code looks like the following:

function LoadDataFromServer() {
        $.ajax({
            url: GetGridURL(),
            type: 'GET',
            dataType: 'jsonWithDates',
            contentType: 'application/json:charset=utf-8',
            //add a custom converter to handle dates and the way

            //they are sent back from the
            //server in .net
            converters: {
                "text jsonWithDates":
                function (jsonText) {
                    return JSON.parse(jsonText, function (key, value) {
                        // Check for the /Date(x)/ pattern
                        var match = /\/Date\((\d+)\)\//.exec(value);
                        if (match) {
                            var dateIn = new Date(parseInt(value.substr(6)));
                            return dateIn;
                        }
                        // Not a date, so return the original value
                        return value;
                    });
                }
            },
            success:
                function (data) { alert(data);  }
        });
    }

Json date conversion - done!

How to build a grid with knockout - Part 2: Paging

2012-03-24T23:50:00.001-07:00

In Part 1 of this tutorial we built a simple HTML table using knockout, in this post we're going to add paging functionality to it.

The code for the entire index.cshtml view now looks as follows:

@{
    ViewBag.Title = "Index";
}
 
<h2>Index</h2>
 
<table id="people">
    <thead>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Age</th>
    </tr>
    </thead>
    <tbody data-bind="foreach: people">
        <tr>
            <td><span data-bind="text: FirstName"></span></td>
            <td><span data-bind="text: LastName"></span></td>
            <td><span data-bind="text: Age"></span></td>
        </tr>
    </tbody>
</table>
<div class='grid_footer ui-helper-clearfix'>
    <div class='grid_info'>
        <span data-bind='text: pagesText'></span>
    </div>
    <div class='paging'>
        <a data-bind='visible: page() > 1, click: PageFirst' class='ui-button'>First</a>
        <a data-bind='visible: page() > 1, click: PageBack' class='ui-button'>Previous</a>
        <a data-bind='visible: page() < totalPages(), click: PageNext' class='ui-button'>Next</a> 
        <a data-bind='visible: page() < totalPages(), click: PageLast' class='ui-button'>Last</a>
    </div>
</div>
 
 
<script type="text/javascript">
    function peopleViewModel() {
        var _this = {};
 
        //pager data
        _this.page = ko.observable(1);
        _this.records = ko.observable(1);
        _this.totalPages = ko.observable(1);
        _this.rowsPerPage = ko.observable(1);
        _this.pagesText = ko.computed(function () { return _this.page() +

        " of " + _this.totalPages() + " pages"; });

        _this.people = ko.observableArray();
 
        /************************
        Public Functions
        ************************/
 
        function PageFirst(item) {
            _this.page(1);
            LoadDataFromServer();
        }
 
        _this.PageFirst = PageFirst;
 
        function PageLast(item) {
            _this.page(_this.totalPages());
            LoadDataFromServer();
        }
 
        _this.PageLast = PageLast;
 
 
        function PageBack(item) {
            _this.page(_this.page() - 1);
            LoadDataFromServer();
        }
 
        _this.PageBack = PageBack;
 
        function PageNext(item) {
            _this.page(_this.page() + 1);
            LoadDataFromServer();
        }
 
        _this.PageNext = PageNext;
 
        function LoadDataFromServer() {
            var url = '/people/data';
            //add paging params
            url += '?rows=' + _this.rowsPerPage() +
            '&page=' + _this.page();
 
            $.post(
                url,
                function (data) {
                    _this.records(data.TotalRowsCount);
                    _this.totalPages(data.TotalPageCount);
 
                    var results = ko.observableArray();
                    _this.people.removeAll();
 
                    ko.mapping.fromJS(data.GridData, {}, results);
                    for (var i = 0; i < results().length; i++) {
                        _this.people.push(results()[i]);
                    };
                },
                'json'
            )
        }
 
        /************************
        Initialization
        ************************/
 
        ko.applyBindings(_this, $("body").get(0));
        LoadDataFromServer();
 
        return _this;
    }
 
    var viewModel = peopleViewModel();
 
</script>

Step 1 - The HTML
If you look at the listing above you'll see I've added a <div> below the <table>, this is where the elements of the pager are going. Within the <div> I've added four <a>s for each of the paging buttons that will be required and a <span> to show some text. I've also introduced some new knockout binding methods: visible which determines if a span will be shown or not, and click which will call a function on our javascript model when the <a> is clicked.

Step 2 - The Javascript
Within our javascript view model I've added observables to track the information that we need to make the pager work. I've also added a pagesText variable which is a ko.computed() function. This means that when any of the observables that the function references are changed knockout will do a rebind, this is paricularly usefull in this instance.

The other major change is in the LoadDataFromServer() function where we now get an object back from the server that not only contains the rows for the grid but paging information including the total number of rows and the total number of pages.

I've set the number of rows per page in this instance to 1 so that the paging functionality is obvious with only 3 rows!

Step 3 - The Controller
The code for the controller method now looks as follows:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace knockoutGrid.Controllers
{
    public class PeopleController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
 
 
        public JsonResult Data(int rows, int page)
        {
            List<Person> people = new List<Person>();
            people.Add(new Person("Richie", "McCaw", 33));
            people.Add(new Person("Dan", "Carter", 32));
            people.Add(new Person("Owen", "Franks", 23));
 
            GridDataResult gridDataResult = new GridDataResult();
            gridDataResult.TotalRowCount = people.Count;
 
            int totalPages = 1;
            if (rows > 0)
            {
                totalPages = gridDataResult.TotalRowCount / rows;
                if (gridDataResult.TotalRowCount % rows != 0)
                    totalPages += 1;
            }
 
            gridDataResult.TotalPageCount = totalPages;
            gridDataResult.GridData = people.Skip((page - 1) * rows).Take(rows);
 
            return Json(gridDataResult);
        }
 
    }
 
 
    public class GridDataResult
    {
        public int TotalRowCount { get; set; }
        public int TotalPageCount { get; set; }
        public object GridData { get; set; }
    }
 
    public class Person
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public int Age { get; set; }
 
        public Person(string firstName, string lastName, int age)
        {
            this.FirstName = firstName;
            this.LastName = lastName;
            this.Age = age;
        }
    }
 
}

I've added a class called GridDataResult - this will enable us to send some more information about the paging back to the browser, because I want to use this class for all my controller methods that return data to a grid I have made the GridData property of type object (you could use generics if you wanted to). The MVC JSON serializer has no problems with serializing this into JSON properly.

The GridData() controller method is still straight forward with some added logic to work out the total rows and pages for the grid. The LINQ methods skip() and next() are used to get the correct subset of the data to be sent back . If you are using a database framework that supports LINQ (such as the Entity Framework) to retrieve your records from a database this is particularly usefull.

And that's it! A grid with paging - done!

How to build a grid with knockout and ASP.Net MVC

2012-03-24T21:49:00.000-07:00

Fairly recently the team at CBS decided to adopt knockout to help us build our UIs. One of our major undertakings was to replace the JQGrid with a knockout equivalent, we haven't regretted it for a minute. The ability to quickly adapt the functionality to meet the different demands of our various clients plus the ability to style easily and effectively (a big gripe with the JQGrid) has paid off handsomely.

This tutorial is broken into 3 parts:
Part 1 - building the basic HTML table using knockout and loading data from the server
Part 2 - implementing paging
Part 3 - implementing sorting

In this tutorial I'm going to take you through building a basic html table using knockout and retrieving data from a controller method on the server.

Step 1 - Install the knockout and knockoutMapping js files
You can either download these from the knockout website or use NuGet - if you're using NuGet then you need to install the knockoutjs package and the knockout.mapping package this will add a couple of js files to the scripts folder in your solution.

Once you have the js files added you need to reference them, I normally add them to my _Layout.cshtml file as I use them on virtually every page in my applications. Your _layout.cshtml file should look as follows:

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/knockout.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/knockout.mapping-latest.js")" type="text/javascript"></script>
</head>
<body>
    <div class="page">
        <div id="header">
            <div id="title">
                <h1>My MVC Application</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <div id="menucontainer">
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("People", "Index", "People")</li>
                </ul>
            </div>
        </div>
        <div id="main">
            @RenderBody()
        </div>
        <div id="footer">
        </div>
    </div>
</body>
</html>

Step 2 - Build a ViewThe view I added for this demo is called Index.cshtml and lives in a Views/People folder. The code looks as follows:

@{
    ViewBag.Title = "Index";
}
 
<h2>Index</h2>
 
<table id="people">
    <thead>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Age</th>
    </tr>
    </thead>
    <tbody data-bind="foreach: people">
        <tr>
            <td><span data-bind="text: FirstName"></span></td>
            <td><span data-bind="text: LastName"></span></td>
            <td><span data-bind="text: Age"></span></td>
        </tr>
    </tbody>
    
</table>
 
<script type="text/javascript">
    function peopleViewModel() {
        var _this = {};
 
        _this.people = ko.observableArray();
        ko.applyBindings(_this, $("#people").get(0));
 
        function LoadPeopleFromServer() {
            $.post(
                '/people/data',
                function (data) {
                    var results = ko.observableArray();
                    ko.mapping.fromJS(data, {}, results);
                    for (var i = 0; i < results().length; i++) {
                        _this.people.push(results()[i]);
                    };
                },
                'json'
            )
        }
 
        LoadPeopleFromServer();
 
        return _this;
    }
 
    var viewModel = peopleViewModel();
 
</script>

I've kept the HTML and Javascript in one file in order to make this easy to follow. If you have no experience of knockout I would strongly suggest you follow the excellent interactive tutorial on the knockout site. The HTML is vanilla knockout, it uses the data-bind attribute to specify how knockout binds values on the javascript model to DOM elements.

The javascript is more interesting: you'll notice that the peopleViewModel() object has a property _this.people which is an observableArray, this means that knockout will take notice when elements are added and removed from it and update the DOM accordingly. The LoadPeopleFromServer() method makes use of the jQuery ($.post) method to retrive data from the server in a JSON format, this JSON is returned to us as an array of javascript objects by JQuery, this is then taken by the knockout mapping utility and turned into an ko.observableArray of javascript objects. The beauty of using the mapping utlity is that we don't have to create any javascript objects to represent people, this is all done for us! This also has the advatage that if we add a new property to a person object on the server we don't need to change any javascript, only the HTML where we want the new value shown.

You may wonder why _this.people has been declared and we then push objects into it once they have returned from the server rather than just passing it into the mapping method. The reason for this is that the mapping method creates a new observableArray and assigs it to the variable you passed in. This ruins your knockout bindings as they were bound to the original array that you declared. You can get around this by only binding once you have got data back from the server but this gets more complicated once you introduce paging, etc. This pattern works and is easy to follow and implement.

Step 3 - The Controller Method

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace knockoutGrid.Controllers
{
    public class PeopleController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
 
 
        public JsonResult Data()
        {
            List<Person> people = new List<Person>();
            people.Add(new Person("Richie", "McCaw", 33));
            people.Add(new Person("Dan", "Carter", 32));
            people.Add(new Person("Owen", "Franks", 23));
 
            return Json(people);
        }
 
    }
 
    public class Person
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public int Age { get; set; }
 
        public Person(string firstName, string lastName, int age)
        {
            this.FirstName = firstName;
            this.LastName = lastName;
            this.Age = age;
        }
    }
 
}

The controller code is relatively simple, normally I would be retrieving data from a database but here I've hard coded it. The only things you really need to take heed of are the use of the JsonResult type that is being returned and the Json method that is needed to turn the list of people into valid JSON.

In Part 2 I will show you how to implement paging!

I have put the source code up on bitbucket, you can download it here.

How to add offline functionality to your web pages using ASP.net MVC

2011-11-10T00:51:00.000-08:00

I was recently tasked with creating an iPad client for our online survey product Prospero . My initial thoughts were that I was going to have to buy a Mac and a book on iPad programming, however after a bit of thought I realised that I could potentially use HTML5 and a combination of its offline caching and local storage capabilities.

The first issue that needs to be covered is geting the web browser to cache a version of a web page and all its required resources (images, scripts, etc) locally. Web browsers do this a lot of the time anyway in order to optimise performance, however in order for them to be used in an offline storage scenario they need to be stored in a separate cache. The way that you do this is by adding a manifest file to the page, this is done by adding a manifest attribute to the html tag.as follows:

<html manifest="/manifest.mf">

I choose to use an ashx (or web handler) to provide the manifest file so my code actually looks like the following:

<html manifest="/manifest.ashx">

The reason that I use a web handler is that you don't you need to make configuration changes to IIS in order to allow the manifest file extension to be associated with the correct content type. I like to keep IIS customisation to an absolute mimimum as it's just one more thing that can go wrong when deploying an app. The code for the web handler looks as follows:

using System;
using System.Web;
 
namespace Prospero
{
    public class Manifest : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/cache-manifest";
            context.Response.WriteFile(context.Server.MapPath("~/content/survey.mf"));
        }
 
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

In this example I have a manifest file survey,mdf in the content directory of my application.

The next rather daunting task is to work out what exactly needs to be written in the out in the manifest file. I realised that this should be pretty easy to work out by opening the web page and checking what resources had been downloaded using Firebug . I then wondered if someone has written a tool to automate this process and a quick Google turned up Manifested . This awesome little tool will analyse your web page and tell you exactly what should be in your manifest file - just cut and paste the results into your .mf file!

Now you're all set to go - all you need to do is browse to your web page and it will be cached locally. If you use Firefox to develop in you will get a warning bar at the top of the page asking you for permission to cache data locally - say yes and you're done. Now if you re-visit the page you will not be making any internet call except a call to retrieve the manifest file (if you are still online), this is done to check if there is a newer version on the server. The way the browser determins if the file is newer is by checking the revision number in the file - you can force the browser to download all newer versions of your cached files by incrementing the revision number.

If you would like to double check what Firefox has cached you can do so by typing about:cache in the browser URL bar, the Offline Cache Device section show what is stored.

How to format code in your blog - the easy way

2011-09-27T20:31:00.000-07:00

I've spend numerous hours trawling the internet looking for ways to make the code that I use in my blog easy to read and nicely formatted. Unfortunately I've never managed to find anything that cuts the mustard and I had resigned myself to having to use numerous hacks. That is until I saw a colleague cut and paste some code that he was working on into a Wiki and it came out perfectly formatted straight from Visual Studio!

"How the %$#@ did you do that?" I shouted
"Don't know - I just cut and pasted" was the reply
"Can't be. Visual Studio doesn't use HTML for it's code editor"

Sure enough when we cut and pasted the code into a text editor you could see that it was perfectly styled using CSS. Afer a bit of digging we discovered that he had Power Productivity Tools installed which has the capacity to enable HTML cut and paste - Eureka!

You can get this add on using NuGet (Tools -> Extension Manager -> Online Gallery and then search for Power Productivity Tools).

Now I can cust and paste code like this straight from Visual Studio:

<h2>Log On</h2>
<p>
    Please enter your pin and password. 
</p>
 
@Html.ValidationSummary(true, "Login was unsuccessful. Please correct the errors

and try again.")
 
@using (Html.BeginForm()) {
    <div>
        <fieldset>
            <legend>Account Information</legend>

.....

Enjoy!

ASP.Net MVC - validating if an email address is already in use

2011-08-21T02:05:00.000-07:00

Problem

The need to check if an email is already registered by a signed up user is a very common scenario that any application using Forms Authentication need to cater for. Ideally you want to make use of Ajax so that the user can get instant feedback and it should fit into your current client side validation framework. At CBSL we use the JQuery Validation plugin to achieve this, it is very well featured and infintely customisable and makes it easy to cater for this scenario.

Solution
The code in the .cshtml view file looks as follows (please note that I have removed the master page to make the code simpler to replicate):

<html>
<head>
    <title>@ViewBag.Title</title>
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function () {

            $("#testForm").validate({
                rules: {
                    "emailAddress": {
                        required: true,
                        email: true,
                        remote: {
                            url: "EmailValidation/checkEmail",
                            type: "post"
                        }
                    }
                },
                messages: {
                    "emailAddress": { remote: "This email address is already in use." }
                }
            });

        });

    </script>
</head>
<body>
    <form action='/EmailValidation' id='testForm'>
        <h1>
            Email Validation</h1>
        <span>Email address</span>
        @Html.TextBox("emailAddress")
        <br />
        <button type="submit">Save</button>        
    </form>
</body>
</html>

Of special interest in this code is the JQuery "validate" method that takes in a rules object where we can define what the validation rules for a field should be and what messages should be displayed if validation should fail. In particular we can specify that the field should be validated using the "email" rule, which means it will be checked for the correct formatting and we can specify the use of the "remote" rule which means there will be a callback to an action on a controller when performing validation.

The data that jQuery posts back to the controller will be the value of the field that is being validated, in return it will expect a JsonResult with the result being true if it is the validation passes or false if not. The content of the controller file looks as follows:

using System;
using System.Web.Mvc;
using System.Web.Security;

namespace Blog.Controllers
{
    public class EmailValidationController : Controller
    {

        public ActionResult Index()
        {
            return View();
        }

        public virtual JsonResult CheckEmail(string emailAddress)
        {
            JsonResult result = new JsonResult();

            result.Data = Membership.FindUsersByEmail(emailAddress).Count == 0;

            return result;
        }

    }
}

In the example above I've used the ASP.Net Membership service to test if there is a user with that email already in the system, easy!

For more information on the JQuery Validation plugin check out the documentation.

Javascript, read the manual!

2011-06-14T18:24:00.000-07:00

There is nothing more than frustrating than opening up a flat pack piece of furniture and finding that there is no manual. Sure you can put it together by trial and error but odds are it won't quite look the way you want, or it will break the first time something heavy is put on it. That has always been my relationship wth Javascript in the past, frustrated home DIY maintenance man!

Fortunately I managed to find the manual, Javascript the Good Parts by Douglas Crocker explains most of what you need to know about putting tother a decent piece of Javascript. As it turns out you can build maintainable, modular software using Javascript and enjoy doing it. Javascript is a very elegant and in parts well thought out language, but as with most things in life you need to out some effort in to get the most out of it.

Instead of dreading the next Javascript project arriving I now look forward to the experience. Get yourself a manual you won't regret it!

The story of a very long domain name

2011-05-30T01:31:00.000-07:00

Three months ago I started a new job at a flash company called Datasouth. Everyone had an iPhone and a fleet of new company cars was always in full view parked outside the brand new company HQ. Any reasonable person would assume that they had money, oodles of it.

At the interview I asked the usual questions about budgets and revenue forecasts and was assured that this was one company that was hitting the ball out the park. Hence I was somewhat taken aback when three weeks later we were called for a meeting and told that we no longer had jobs as the company was going into receivership! I won't go into detail other than noting that there were a number of members of the Serious Fraud Office on site in the following days gleefully rubbing their hands.

On the plus side I had the pleasure of forming some great relationships with a couple of Datasouth employees, Steve Knutson and Peter Cummins, and we decided to start our own company to service the Datasouth software clients. One day later we were registering the company and doing our first bits of paid work. Two months later we are still in business, having a great time and learning many lessons, one of which is to never rush into choosing a domain name - we are the proud owners of www.canterburybusinesssolutions.co.nz. Our email addresses take at least twenty seconds to type out and we have the dubious honour of having 3 consecutive "s"s in our name, something which never fails to get pointed out to us by new clients!

I am currently leading a team of contractors in building ASP.Net MVC applications for a range of clients. I continue to be amazed at the simplicity and joy of MVC compared to the traditional ASP.Net Web Forms and continually feel like a kid in a candy shop when faced with all the various tools that we can now make use of to build responsive, task focused applications. Over the coming year I plan to be blogging a lot on the lessons we are learning as a new software business and the joy of MVC.

ASP.Net MVC - How to switch javascript links between Debug and Release builds using Razor

2011-01-25T01:06:00.000-08:00

I use JQuery and numerous associated plugins in virtually every site I develop now days. Depending on what I am doing I want to be using a specific version of a file, for instance when debugging I often want to be using jquery.js so I can debug if required, while in the production version of the code I want to use the CDN to make use of caching on the browser. Currently there is no easy way to do this, so I sat down at the keyboard to see what I could come up with.

My requirements were:

it had to be very easy to use in the view page, much like the current URL.Content() method
it had to be easy to set up the paths for the files, no fiddling around with lots of strings in the web.config for this
it had to be easy to switch between debug and release versions of the strings
it had to perform well as it could be called a number of times

The entire code for the solution is included at the end of this post, to use it you need to do the following:

1. Set up the paths to your javascript and css files in your global.asx file as the following example shows:

protected void Application_Start()
{
   UrlHelperExt.Instance().AddUrls(
                new FileUrl("JQuery", UrlMode.Debug, "~/Scripts/jquery-1.4.4.js"),
                new FileUrl("JQuery", UrlMode.Release, "https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js")
                );
        }

The UrlHelperExt class makes use of the singleton pattern and is instantiated by the Instance() method. The AddUrls() method takes an array of FileUrl classes. The FileUrl class constructor takes the following parameters:

FileKey: this is the unique identifier for the script and what you will use to reference it in the view page
UrlMode: This is an enum which determines which Url is used depending on the UrlMode you configure in your web.config file.
UrlPath: This is the actual path to the script file. You can pass in a path using the ~ notation and it will be resolved to the correct path at runtime using the current HTTPRequest.

2. Use a UrlHelper extension method in your view pages as follows:

    <script src="@Url.ContentPath("JQuery")" type="text/javascript"></script>

3. Switch between the Urls that are used in your pages by adding the following to your web.config file:

<appSettings>
    <add key="URLMode" value="Release"/>
  </appSettings>

The URLMode key can be set to Release/Staging/Debug. If there is no key or it cannot be parsed correctly it will use the 'debug' mode strings.

So where are these strings cached? Well I decided that I would make use of HTTPApplication to store the UrlHelperExt class. This means that there is only one stored in memory independent of how many sessions you may have running. Any thread contention issues are taken care of by making sure that the dictionary that stores the FileUrl objects is locked each time a read takes place.

The entire code for the classes and extension methods is as follows:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Configuration;
using System.Web.Mvc;
using System.Web;

namespace DWC.MVC.Common
{
    public enum UrlMode { Debug, Staging, Release };
    
    public static class UrlHelperExtensions
    {
        public static string ContentPath(this UrlHelper helper, string urlKey)
        {
            return UrlHelperExt.Instance().GetURL(urlKey, helper);
        }
    }


    public class FileUrl
    {
        public string UrlPath { get; set; }
        public string UrlKey { get; set; }
        public UrlMode UrlMode { get; set; }


        public FileUrl(string urlKey, UrlMode mode, string urlPath)
        {
            this.UrlKey = urlKey;
            this.UrlPath = urlPath;
            this.UrlMode = mode;
        }

        public string GetKey()
        {
            return GetKey(this.UrlMode,this.UrlKey);
        }

        public static string GetKey(UrlMode mode, string urlKey)
        {
            return ((int)mode).ToString() + "_" + urlKey;
        }
    }

    public class UrlHelperExt
    {
        public UrlMode UrlMode { get; set; }
        Dictionary<string, FileUrl> Urls = new Dictionary<string, FileUrl>();

        object _syncLock = new object();

        public UrlHelperExt()
        {
            string configMode = ConfigurationManager.AppSettings["URLMode"];

            this.UrlMode = UrlMode.Debug;
        
            if (!String.IsNullOrEmpty(configMode))
            {
                UrlMode result;
                if (Enum.TryParse<UrlMode>(configMode, out result))
                    this.UrlMode = result;
            }
        }

        public static UrlHelperExt Instance()
        {
            if (HttpContext.Current.Application["URL_HELPER_EXT"] == null)
            {
                HttpContext.Current.Application["URL_HELPER_EXT"] = new UrlHelperExt();
            }
            return (UrlHelperExt)HttpContext.Current.Application["URL_HELPER_EXT"];
        }

        public void AddUrls(params FileUrl[] fileURLs)
        {
            foreach (var fileURL in fileURLs)
            {
                this.Urls.Add(fileURL.GetKey(), fileURL);
            }
        }


        public string GetURL(string urlKey, UrlHelper urlHelper)
        {
            FileUrl fileUrl = null;

            string key = FileUrl.GetKey(this.UrlMode,urlKey);

            //lock while we are reading from the dictionary as it is stored in appdata
            lock (this._syncLock)
            {
                fileUrl = this.Urls[key];
            }

            if (fileUrl.UrlPath.StartsWith("~"))
                return urlHelper.Content(fileUrl.UrlPath);
            else
                return fileUrl.UrlPath;
        }
    }
}

Of course this needn't be restricted to javascript files, you could also use it for your css files and if you were really keen you could even use it for things like displaying different messages to users, e.g. "This is the test website" or "This is the staging website".

Word of warning, this has not been tested in production yet, but it will be soon! I also blogged in an earlier post about how to easily add javascript and css links to web pages using Razor here.

Enjoy!

A Quick and Easy HTMLHelper for Google Charts

2011-01-13T16:54:00.000-08:00

Virtually every project I do now days needs some form of a chart in it. Up until now I’ve been using DevExpress for their great range of web controls including a very powerful Chart control. However recently I’ve been reading about the Google Charts API for quickly and easily creating charts on the fly, so I decided to give it a go. After all it’s free and there is no need to add any DLL’s to the project, two very good attributes in my book!

In order to make it easier to add charts to my MVC web pages I built an HTMLHelper extension method so now all I need to do is write the following for a chart:

<%= Html.GoogleChart(rdi.Series, ChartType.Pie, width: 400, height: 225) %>

The extension method and its associated classes look like the following:

  public enum ChartType { Pie = 1, Bar = 2 };
   public class SeriesData
   {
       public int Value { get; set; }
       public string Description { get; set; }
       public SeriesData(int value, string description)
       {
           this.Value = value;
           this.Description = description;
       }
   }
   public class GoogleChart
   {
       public int Height { get; set; }
       public int Width { get; set; }
       public ChartType ChartType { get; set; }
       public List<SeriesData> Series = new List<SeriesData>();
       public string GetURL()
       {
           string result = "http://chart.apis.google.com/chart?";
           //add the chart size
           result += String.Format("chs={0}x{1}&", this.Width, this.Height);
           //add the type
           result += String.Format("cht={0}&", ChartTypeAsString());
           //add the data
           string seriesValues = "chd=t:" ;
           string axisLabels = "chl=" ;
   
           foreach (var s in this.Series)
           {
               seriesValues += s.Value.ToString() + ",";
               axisLabels += s.Description + "|";
           }
           result += seriesValues.TrimEnd(","[0]) +"&"  + axisLabels;
           return String.Format("<img src='{0}' width='{1}' height='{2}' alt='' />", result, this.Width, this.Height);
       }
       private string ChartTypeAsString()
       {
           switch (this.ChartType)
           {
               case ChartType.Pie:
                   return "p";
               case ChartType.Bar:
                   return "bvs";
               default:
                   return "p";
           }
       }
   }
   public static class GoogleChartExtensions
   {
       public static string GoogleChart(this HtmlHelper helper, List<KeyValuePair<string,int>>   SeriesValues,
           int width, int height)
       {
           GoogleChart gc = new GoogleChart();
           gc.Height = height;
           gc.Width = width;
           gc.ChartType = ChartType.Pie;
           seriesValues.ForEach(x => gc.Series.Add(new SeriesData(x.Value,x.Key)));
           return gc.GetURL();
       }
   }

This is enough to get a pretty basic pie or bar chart showing on your web page. The Google Charts API is extremely powerful and their are a myriad of options available for customisation, I plan to add further capabilities to this helper and blog about them in the future.

Enjoy your charts!

ASP.Net MVC 3 - Is the ViewBag a good thing?

2011-01-10T22:48:00.000-08:00

MVC 3 introduces a ViewBag property to controllers. This is a dynamic data dictionary, which essentially means you can declare properties of the object on the fly and then reference them later, so you can write code like:

ViewData.Title = "Hi";

in the controller and then in the view reference it like:

<label>@ViewBag.Title</label>

Cool, right? Well no, not really. When I first came across the concept I was quite excited because I thought the compiler would throw a compile time error if you reference a property on a dynamic object that hadn't previously been assigned to. I know next to nothing about compilers but I'm guessing that isn't the case because it's too difficult to work out what happened first, the assignment or the use.

So essentially we don't get the benefits of compile time checking using a dynamic object. Semantically the code looks nicer than using the ViewData dictionary with it's strings and you don't have to typecast the whole time which is good. However I think that anything that allows, and indeed encourages, people to write poor code is a Very Bad Thing. I am going to put my purist hat on and say that when passing data to a view you should be using a dedicated class with strongly typed properties which will give you the major benefit of compile time checking.

Perhaps a T4 genius could write a script that will take all the ViewBag properties referenced in a view, create a class with the relevant properties and use the newly created class to strongly type the view. Wouldn't that be nice!

ASP.Net MVC - How to postback to the server when a dropdown changes

2011-01-10T15:59:00.000-08:00

Problem

I recently needed to call a controller action on the server when a dropdown list on a web page changed. This is a fairly common scenario and in this case I was needing to show a list of options from the database based on the value of the dropdown. If the dropdown was contained within a form element I could have called the form submit method and posted back that way, but it wasn't so I had to come up with another way.

Solution

We can trigger the web page to call back to the desired controller and action on the server by using some javascript to assign the desired URL to the window.location.href property of the page.

<script type="text/javascript">
  function ChangeLanguage() {
    window.location.href = <%= String.Format("'{0}'",
      Url.Content("~/FileUpload/Index/")) %> + $('#language').val();
  }
</script>

I've used some jQuery goodness here to grab the selected value of the dropdown list by using the val() method. This is then appended to the URL of the controller action and can be accessed by declaring the method on the server with an id parameter:

public ActionResult Index(int? id)
{
  //do something with the id
}

Now all we need to do is hook up the ChangeLanguage() function to the language dropdown list:

<%: Html.DropDownList("language", (SelectList)ViewData["LanguageList"],
            new { onchange = "ChangeLanguage(); return false;" })%>

This could have been done using jQuery to bind to the dropdown list change event but for this simple page I didn't see the need.

Posting back to the server when a dropdown list changes - done!

CSS and javascript links with Razor

2011-01-08T16:50:00.000-08:00

Problem
I've recently started work on an ASP.Net MVC project and I am using Razor as the view engine. So far I really like it, compared to the default view engine, the syntax is far cleaner and more concise. However one of the issues I have come across is the need to add CSS links to a web page. Unlike a javascript link which can be placed anywhere in the body of an HTML page CSS links always need to be added in the <head> section of an HTML page which we do not have access to in a child page. . What to do?

Solution
In VS2010 with each new Razor MVC project a _Layout.cshtml page is included in the Views/Shared folder, this is the Razor equivalent of a master page. In addition there is a dynamic data dictionary called the ViewBag which can be accessed by a controller or view.My first thought was to use the ViewBag to define a collection of links which could then be rendered in the _layout.cshtml page. This, however, would have been pretty clunky and semantically not very pretty. A while later I read an article about sections in Razor and realized that these very powerful constructs would be perfect for this scenario!

<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
    @RenderSection("head",false)
</head>

The important bit to note here is the addition of the @RenderSection method which will then cause any code that you created in a "head" section of a child page to be rendered here. It takes a parameter indicating whether every child page need to define the section in question or not, by default this parameter is set to true, I have set it to false as not every child page will have to define extra head content.

The code that was added to the child page looks as follows:

@section Head
{
    <link href="@Url.Content("~/Content/datePicker.css")" rel="stylesheet" type="text/css" />
}

Razor keeps on with the easy to use fluid syntax by allowing you to declare which section you are defining content for by simply writing @section and the name of the section. Nice! You can now add any content css links, javascript links, etc to your web page simply and easily.

CSS links in Razor - done!

I have also blogged on how to easily switch between different versions of javascript files here.

Edit 27 Oct 2010
A number of readers commented that they were getting an error stating "element link cannot be nested within element link", I personally haven't experienced this issue so I suggest trying a complete rebuild of your project if you do encounter it. Otherwise another reader has suggested you can get around it by switching the "Target Schema for Validation" to HTML5.

ASP.Net MVC - how to post values to the server that are not in an input element

2011-01-07T16:46:00.000-08:00

Problem

I am building a web page that allows the user to select dates in a calendar and then shows the dates in an unordered list. The problem now is that those dates need to be sent to the server on page submit so that they can be saved to the database. If I was storing the dates in an input element, say a textbox, that wouldn't be an issue but because they are in an html element whose contents are not posted to the server an alternative strategy needs to be developed.

Solution

The approach that I took to solve this problem is as follows:
1. Place a hidden input field on the form

ASP.Net MVC has an Html helper with a method called Hidden() that will do this for you

@Html.Hidden("hiddenDates").

2. Copy the values from the html element to the hidden input field before submitting the form

The following javascript is added to the page:

$(function () {
  $('#formCreate').submit(function () {
    PopulateHiddenDates();
  });
});

function PopulateHiddenDates() {
  var dateValues = '';

$($('#dateList').children('li')).each(function(index) {
    dateValues += $(this).attr("id") + ",";
  });

  $('#hiddenDates').val(dateValues);
}

I'm using jQuery to bind to the form submit event so that my method to populate the hidden field gets called before the form is submitted. The dateList element is an unordered list and by using the jQuery each function I can itterate through all the <li> items that it contains, get each items id attribute (to which I have assigned the value of the date in millisecs) and write them to the hidden field as a comma delimited string.

3. Process the dates on the server

[HttpPost]
public ActionResult Create(string hiddenDates, string utcOffset)
{
  List<DateTime> dates = GetDates(hiddenDates, utcOffset);
}

private List<DateTime> GetDates(string hiddenDates, int utcOffset)
{
  List<DateTime> dates = new List<DateTime>();

  var values = hiddenDates.Split(",".ToCharArray(),

StringSplitOptions.RemoveEmptyEntries);

  foreach (var item in values)
  {
    DateTime newDate = new DateTime(1970, 1, 1)

.AddMilliseconds(double.Parse(item)).AddMinutes(utcOffset*-1);

dates.Add(newDate);
  }

  return dates;
}

By declaring a parameter with the same name as the hidden field ASP.Net will take care of finding the corresponding entry in the form collection posted back to the server and binding it to the hiddenDates parameter! Excellent! I now have my dates the user selected and I can save them to the database.

I have also used the same technique to pass back a utcOffset so that I know what timezone the user is in and I can show the dates correctly to users in other timezones if necessary (this isn't strictly necessary at the moment but I plan to introduce times later).

Saving multiple dates from an unordered list - DONE!