Web Developer

There are now Visual studio project templates for Nancy

Christiaan Baes (chrissie1) — Wed, 01 May 2013 11:11:00 +0000

We all know and love Nancy by now. I love it anyway.

Up until now you needed to create an empty ASP.Net project and go from there.

But now you there are templates to make it easier for you to start a new Nancy project.

For now only C#.

You will have to download the vsix from the visual studio gallery.

The restart your VS if it was open.

If you know try to create a new project you will see this list in the web category.

Here I created a Nancy project with ASP.Net hosting and Razor.

Here are the files it creates.

And here is the module it creates.

I'll leave it a surprise for you to discover what is in the other files and project. But needless to say I like.

Thanks to the whole Nancy team for all the hard work.

Original post blogged on LessThanDot.

Trying out Gibraltar's Loupe with Nancy

Christiaan Baes (chrissie1) — Sat, 23 Mar 2013 03:55:00 +0000

Introduction

I downloaded and tested Gibraltar's Loupe today and tried to find out what it could add to my application. And because Rachel Hawley asked me t review it, and who am I to refuse her anything.

I already add as much logging to my application as possible because it makes it a lot easier to find bugs and fix them once you go into productions.

But log files can get overwhelming sometimes.

This is where Gibraltar analyst can help.

Installation

I downloaded the 3.0 preview 3. Installation is easy and for now I only installed the desktopversion, but there is also a webversion.

I created a small nancy application with the razor viewengine.

With this as my view.

Code: html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<p>Welcome to OUR world!</p>
</body>
</html>

and this as my module.

Code: vbnet

Imports Nancy
Imports Gibraltar.Agent

Public Class MainModule
Inherits NancyModule

Public Sub New()
MyBase.Get("/") = Function(parameters)
Return View("Main")
End Function
End Sub
End Class

I saved all of it and then went into the loupe desktop.

YOu can now click the big green button that says Add Gribraltar now, point it to your project give it a name and whatnot and voila Gibraltar is there.

Logging

When I run it and go to live sessions.
I can see it.

No idea why it is there twice but you can click one of them.

That's already more information than we are used to, and we have yet to add logging.

We can do this by using the Gibraltar Agent logging (but we don't have to).

Just add a line like this.

Code: vbnet

MyBase.Get("/") = Function(parameters)
Log.TraceInformation("Opening mainmodule")
Return View("Main")
End Function

And next time you run this.

you will see this in your logging session.

You can even click on that link and go to your code.

Or see the code in the tab mainmodule.

That is simple enough.

Exceptions

So how do we deal with exceptions and unhandled exceptions?

Let's add this code to our module.

Code: vbnet

MyBase.Get("/test") = Function(parameters)
Try
Throw New Exception("some message loup should pick up")
Catch ex As Exception
Log.TraceError(ex, "something")
Return View("Main")
End Try
End Function
MyBase.Get("/test2") = Function(parameters)
Throw New Exception("some message loup should pick up")
End Function

If I now go to the page /test I will see this.

The exception is nicely logged.

But if I go to page /test2, I see nothing.

Gibraltar does not log unhandled exception automatically. We either need ELMAH or we need to add logging to an event somewhere.

Luckily in Nancy this is easy.

Just add a class that implements IErrorhandler and Nancy will do the rest.

Code: vbnet

Imports Nancy
Imports Nancy.ErrorHandling
Imports Gibraltar.Agent

Public Class Errorhandler
Implements IErrorHandler

Public Function HandlesStatusCode(ByVal statusCode As HttpStatusCode, ByVal context As NancyContext) As Boolean Implements IStatusCodeHandler.HandlesStatusCode
Return statusCode = HttpStatusCode.InternalServerError
End Function

Public Sub Handle(ByVal statusCode As HttpStatusCode, ByVal context As NancyContext) Implements IStatusCodeHandler.Handle
Dim errorObject As Object
context.Items.TryGetValue(NancyEngine.ERROR_EXCEPTION, errorObject)
Dim ex = CType(errorObject, Exception)
Log.TraceError(ex, "unhandled exception")
End Sub
End Class

And now we will see our exception.

Conclusion

Loupe was pretty easy to setup and get going. Loupe does however come at a price. Is that price to high? That depends on the value you place on your business.

Original post blogged on LessThanDot.

Crazy stuff I do with Nancy

Christiaan Baes (chrissie1) — Fri, 15 Mar 2013 12:58:00 +0000

No, not that.

I had the need to write documentation for my services. I thought having them as html would be nice and good enough.

So I made a bunch of vbhtml razorviews because I want my pages to be pretty and use the masterpage I already made for my main site. You know, to be consistent.

So I had this.

page1.vbhtml
page2.vbhtml
page3.vbhtml
page4.vbhtml
index.vbhtml

And to show those pages I just have this in my module.

Code: text

MyBase.Get("/{Title}") = Function(parameters)
Return Negotiate.WithView("documentation/" & parameters.Title)
End If

So calling page1 is as easy as

/documentation/page1

But what if someone did

/documentation/page12

They would get an error.

But, meh, I don't want that. I want them to return to the index instead.

So here is my solution.

Code: text

Public Sub New(viewlocator As IViewLocator)
MyBase.New("/documentation")
MyBase.Get("/{Title}") = Function(parameters)
If viewlocator.LocateView("documentation/" & parameters.Title, Context) IsNot Nothing Then
Return Negotiate.WithView("documentation/" & parameters.Title)
Else
Return Negotiate.WithView("documentation/index")
End If
End Function

With help from GrumpyDev.

Quick and easy.

I do not want to put to much work in the documentation since noone will ever read it anyway.

Original post blogged on LessThanDot.

Nancy, IIS 7 and the PUT command

Christiaan Baes (chrissie1) — Wed, 13 Mar 2013 06:49:00 +0000

When you use PUT in your Nancy application and you host your application on an IIS 7 server then you might get a 405 error (Method not allowed).

The solution to this problem is very simple but I will put it here for me.

The problem is that you might have the webdavmodule installed on your IIS and that is gobbling up all the PUT requests.

So the simple solution is to remove the webdavmodule.

You can do this via the IIS manager and just remove it from your site, but if you use webdeploy it will add it back in the next time you deploy.

So it is better to use the webconfig to tell IIS you really don't want it for your particular site.

So you add this to the web.config

Code: xml

<system.webServer>
<modules>
<remove name="WebDAVModule"/>
</modules>
</system.webServer>

Simple, and it works. Let's move on.

No TDD was involved in the making of this blogpost.

Original post blogged on LessThanDot.

Nancy and custom error pages.

Christiaan Baes (chrissie1) — Tue, 05 Feb 2013 09:59:00 +0000

Introduction

I wanted to show my users some prettier errorpages then the default you get from IIS or Nancy.

This being the default for Nancy. Because I know you guys like pictures.

Of course this was the first time ever in any webapp that I did that, So I had to look certain things up. And I thought this was pretty cool.

But of course that's not how Nancy works.

Nancy is a Lady, so we treat her like one.

Setting it up.

So first of we will have to change our webconfig so that it servers us custom errors.

You do this by adding the following.

Code: xml

Next up is to make a few html file that we can serve as our custom pages.

Something like this.

Code: html

<!DOCTYPE html>
<html>
<head>
<title>404</title>
</head>
<body>
<p>Special Chrissie 404 page</p>
</body>
</html>

I made a similar one for 500.

I named them 404.html and 500.html and made sure the properties of the files were set to embedded resource.

Now I just had to create a custom IStatusCodeHandler, like this.

Code: vbnet

Imports System.IO
Imports Nancy
Imports Nancy.ErrorHandling

Public Class CustomErrors
Implements IStatusCodeHandler

Private ReadOnly _errorPages As IDictionary(Of HttpStatusCode, String)
Private ReadOnly _supportedStatusCodes As HttpStatusCode() = {HttpStatusCode.NotFound, HttpStatusCode.InternalServerError}

Public Sub New()
_errorPages = New Dictionary(Of HttpStatusCode, String) From
{
{HttpStatusCode.NotFound, LoadResource("404.html")},
{HttpStatusCode.InternalServerError, LoadResource("500.html")}
}

End Sub

Public Sub Handle(statusCode As HttpStatusCode, context As NancyContext) Implements IStatusCodeHandler.Handle
If context.Response IsNot Nothing AndAlso context.Response.Contents IsNot Nothing AndAlso Not ReferenceEquals(context.Response.Contents, Response.NoBody) Then
Return
End If

Dim errorPage As String

If Not _errorPages.TryGetValue(statusCode, errorPage) Then
Return
End If

If String.IsNullOrEmpty(errorPage) Then
Return
End If

ModifyResponse(statusCode, context, errorPage)
End Sub

Public Function HandlesStatusCode(statusCode As HttpStatusCode, context As NancyContext) As Boolean Implements IStatusCodeHandler.HandlesStatusCode
Return _supportedStatusCodes.Any(Function(s) s = statusCode)
End Function

Private Shared Sub ModifyResponse(statusCode As HttpStatusCode, context As NancyContext, errorPage As String)

If context.Response Is Nothing Then
context.Response = New Response() With {.StatusCode = statusCode}
End If

context.Response.ContentType = "text/html"
context.Response.Contents = Sub(s)
Using writer = New StreamWriter(s, Encoding.UTF8)
writer.Write(errorPage)
End Using
End Sub
End Sub

Private Shared Function LoadResource(filename As String) As String
Dim resourceStream = GetType(CustomErrors).Assembly.GetManifestResourceStream(String.Format("WebApplication3.{0}", filename))
If resourceStream Is Nothing Then
Return String.Empty
End If
Using reader = New StreamReader(resourceStream)
Return reader.ReadToEnd()
End Using
End Function

End Class

Normally one would expect Nancy to pick this file up, because Nancy is a good girl. (One of the many benefits of giving your framework a woman's name is all the nice cliches bloggers can use, Thank you for that) (One of the disadvantages is that Google has a dirty mind.)

But Nancy has a bug, so you have to register it yourself. You can do this in the bootstrapper. I logged the bug in the github issuetracker so this might be resolved by the time you want to use this. For your information, this bug was fixed 3 hours after logging it.

Code: vbnet

Imports Nancy.Bootstrapper

Public Class MyBootStrapper
Inherits Nancy.DefaultNancyBootstrapper

Protected Overrides ReadOnly Property InternalConfiguration As NancyInternalConfiguration
Get
Return NancyInternalConfiguration.WithOverrides(Sub(b)
b.StatusCodeHandlers = New List(Of Type) From {GetType(CustomErrors)}
End Sub)
End Get
End Property

End Class

I'm sure I killed a few puppies along the way. But it works. And here is the smoking gun.

Pretty, no?

I have to thank Steven Robbins and Phillip Haydon for their kind and generous help.

And you can make it even better by using a masterpage.

Just create a Master.html.

Code: html

<!DOCTYPE html>
<html>
<head>
<title>[Title]</title>
<link href="/Content/Css/main.css" rel="stylesheet" />
</head>
<body>
[Details]
</body>
</html>

And see how I reference the css in my content folder.

And then you can adapt the 404 and 500 page.

Code: html

<h2>Page not found</h2>
<p>We could not find the page you were looking for. Are you sure this is where you left it? This error is logged but I'm pretty sure the administrator can not fix it.</p>
<p>If it is urgent you can contact you admin by shouting real loud.</p>
<p>BTW: You can find a link in the footer to the logfiles if you want to fix the error yourself.</p>

Now we go back to our CustomErrors class. And change the LoadResource method to this.

Code: vbnet

Private Shared Function LoadResource(ByVal filename As String, ByVal httpStatusCode As HttpStatusCode) As String
Dim masterPageStream = GetType(CustomErrors).Assembly.GetManifestResourceStream(String.Format("BeCare_Server.{0}", "Master.html"))
Dim masterPage As String
Using reader = New StreamReader(masterPageStream)
masterPage = reader.ReadToEnd()
End Using
masterPage = masterPage.Replace("[Title]", String.Format("Error {0}", httpStatusCode.ToString("D")))
Dim resourceStream = GetType(CustomErrors).Assembly.GetManifestResourceStream(String.Format("BeCare_Server.{0}", filename))
If resourceStream Is Nothing Then
Return String.Empty
End If
Dim details As String
Using reader = New StreamReader(resourceStream)
details = reader.ReadToEnd()
End Using
masterPage = masterPage.Replace("[Details]", details)
Return masterPage
End Function

And you can change your Handle method to this.

Code: vbnet

Public Sub Handle(statusCode As HttpStatusCode, context As NancyContext) Implements IStatusCodeHandler.Handle
If context.Response IsNot Nothing AndAlso context.Response.Contents IsNot Nothing AndAlso Not ReferenceEquals(context.Response.Contents, Response.NoBody) Then
Return
End If

Dim errorPage As String

If Not _errorPages.TryGetValue(statusCode, errorPage) Then
Return
End If

If String.IsNullOrEmpty(errorPage) Then
errorPage = LoadResource("500.html", statusCode)
End If

ModifyResponse(statusCode, context, errorPage)
End Sub

So that now every statuscode in the known world is handled by your custom errorpages. Of course this is optional.

And now you get pretty page.

Cooooooooooollll!!!

Original post blogged on LessThanDot.

Nancy and adding the windows authenticated user to your page.

Christiaan Baes (chrissie1) — Mon, 04 Feb 2013 11:49:00 +0000

So I have been using Nancy and my IIS is configured to use windows authentication.

Now how do I get the current authenticated user onto my webpage.

But first of all how do I get the name of the current authenticated user.

Well that was the simple part.

Code: vbnet

HttpContext.Current.User.Identity.Name

And there you have it.

Now we all know that we can do this in Nancy with Razor to get the current logged in user when using formsauthentication or basic authentication.

Code: vbnet

Url.RenderContext.Context.CurrentUser

Of course we could do this in our Module.

Code: vbnet

Context.CurrentUser = New User With {.UserName = HttpContext.Current.User.Identity.Name}

And that would work, but it would become very tedious to repeat this for every module we have. So we have to look for a better way of doing this. And of course there is.

We can make our own bootstrapper and change it in the nancy pipleine.

Code: vbnet

Imports Nancy
Imports Nancy.Security

Public Class BootStrapper
Inherits DefaultNancyBootstrapper

Protected Overrides Sub ApplicationStartup(container As TinyIoc.TinyIoCContainer, pipelines As Nancy.Bootstrapper.IPipelines)
MyBase.ApplicationStartup(container, pipelines)
pipelines.AfterRequest.AddItemToEndOfPipeline(Sub(ctx)
ctx.CurrentUser = New User With {.UserName = HttpContext.Current.User.Identity.Name}
End Sub)
End Sub

Private Class User
Implements IUserIdentity

Public Property Claims As IEnumerable(Of String) Implements IUserIdentity.Claims

Public Property UserName As String Implements IUserIdentity.UserName
End Class

End Class

So I added this to the AfterRequest hook And that changes the currentuser on every request for me.

I also created a class User because CurrentUser needs a class that implements IUserIdentity.

Cool huh.

Original post blogged on LessThanDot.

Angularjs and ng-grid

Christiaan Baes (chrissie1) — Sun, 03 Feb 2013 17:23:00 +0000

Introduction

Today I tried out Angularjs and posted about it. After that it was time to add a grid to make my data look better. And I picked ng-grid.

Installation

These are the packages I am using.

angularjs 1.0.4
jQuery 1.9.0
Moment.js 1.7.2
ng-grid 1.6.0

But the ng-grid package does not contain the scripts. So I had to get those manually. I took the ones on github. The ng-grid.1.6.3.js and ng-grid.css.

Server

See my previous post on angularjs for this.

Client

My app.js changes a little.

Line number Off | Hide | Select all

angular.module('plantsapp', ['ngGrid']).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/plants', { templateUrl: 'partials/plants.html', controller: PlantsController }).
when('/plants/:Id', { templateUrl: 'partials/plant.html', controller: PlantController }).
otherwise({ redirectTo: '/plants' });
}]);

I just added the ngGrid string.

My controller.js will change a little too. And then specifically my PlantsController.

Line number Off | Hide | Select all

function PlantsController($scope, $http) {
$scope.plants = [];
$scope.myOptions = {
data: 'plants'
};
$http.get('http://localhost:59025/plants').success(function (thisdata) {
$scope.plants = thisdata;
});
}

See how I instantiate my plants outside the get. And then I add the myOptions line.

In the Index.html I will add these two lines.

html

Line number Off | Hide | Select all

href="css/ng-grid.css" rel="stylesheet" />
src="/Scripts/jquery-1.9.0.min.js">
src="/Scripts/ng-grid.js">

And the plants.html file changes to this.

html

Line number Off | Hide | Select all

ng-grid="myOptions">

The myOptions is the same as what property I added in my PlantsController.

And tada.

But you might see that the date is not well formatted. Let's fix that.

Formatting the date

First we need to add moment.js import to our index.html.

Then we need to add a filter to our app.js.

Like this.

Line number Off | Hide | Select all

angular.module('plantsapp', ['ngGrid']).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/plants', { templateUrl: 'partials/plants.html', controller: PlantsController }).
when('/plants/:Id', { templateUrl: 'partials/plant.html', controller: PlantController }).
otherwise({ redirectTo: '/plants' });
}]).filter('moment', function () {
return function (dateString, format) {
return moment(dateString).format(format);
};
});;

And now we need to change our controller so that we can add this filter to our column definition for DateAdded.

Like this.

Line number Off | Hide | Select all

function PlantsController($scope, $http) {
$scope.plants = [];
$scope.myOptions = {
data: 'plants',
columnDefs: [
{field:'Id', displayName:'Id'},
{field:'Name', displayName:'Name'},
{ field: 'Genus', displayName: 'Genus' },
{ field: 'DateAdded', displayName: 'Date added', cellFilter:"moment:'DD/MM/YYYY h:m'" }
]
};
$http.get('http://localhost:59025/plants').success(function (thisdata) {
$scope.plants = thisdata;
});
}

Of course we could set our fofrmat straight in the filter and and then just use the moment filter.

For this we just need to change the filter to this.

Line number Off | Hide | Select all

return moment(dateString).format('DD/MM/YYYY h:m');

and the columndefinition then becomes this.

Line number Off | Hide | Select all

{ field: 'DateAdded', displayName: 'Date added', cellFilter:"moment" }

And tada!!!!

Conclusion

Once you get it ng-grid is pretty easy to set up. I just didn't get it for the first hour or so. Because I had my $scope.myOptions in my Get function, because that looked so much like what they did in the getting started things. But I was wrong.

Original post blogged on LessThanDot.

Trying out Angularjs

Christiaan Baes (chrissie1) — Sun, 03 Feb 2013 12:50:00 +0000

Introduction

It's superbowl Sunday and between the snacks it is time to learn something new. Today my eye fell on Angularjs. Angularjs is an MVC framework for javascript. It kinda puts the controllers and model on the clientside and not on the serverside like ASP.Net MVC does. I will use Nancy as our service to provide us with json data.

Server

Our server is pretty simple.

Just make an empty asp.net application and add a Models folder.
Here is my model.

Code: csharp

using System;

namespace NancyJTable.Models
{
public class PlantModel
{
public int Id { get; set; }
public string Name { get; set; }
public string Genus { get; set; }
public string Species { get; set; }
public DateTime DateAdded { get; set; }
}
}

And here is my module, which I put in the Modules folder.

Code: csharp

using System;
using System.Collections.Generic;
using System.Linq;
using Nancy;
using NancyJTable.Models;

namespace NancyJTable.Modules
{
public class PlantsModule:NancyModule
{
public PlantsModule()
{
Get["/plants/{Id}"] = parameters => Response.AsJson(GetPlantModels().SingleOrDefault(x => x.Id == parameters.Id));
Get["/plants"] = parameters =>
{
return Response.AsJson(GetPlantModels());
};
}

private IList<PlantModel> GetPlantModels()
{
var plantModels = new List<PlantModel>();
for (var i = 1; i <= 25; i++)
{
var j = i.ToString("000");
plantModels.Add(new PlantModel()
{
Id = i,
Name = "name" + j,
Genus = "genus" + j,
Species = "Species" + j,
DateAdded = DateTime.Now
});
}
return plantModels;
}
}

}

Client

First I added another empty ASP.Net web application project to our solution.

I added angularjs to my project. It is on nuget so no problems there.

I want to add a list of plants and I want a details page.

First I need to start with adding my app.j in the js folder. This will take care of the routes.

Code: text

angular.module('plantsapp', []).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/plants', { templateUrl: 'partials/plants.html', controller: PlantsController }).
when('/plants/:Id', { templateUrl: 'partials/plant.html', controller: PlantController }).
otherwise({ redirectTo: '/plants' });
}]);

You already see that I have two partial views and 2 controllers.

The controllers are in my controllers.js file.

Code: text

So I have a Plantscontroller that uses a get to get my json from my nancy service. And I have a PlantController that uses the routeparameter to tell which plant to get from my service.

See how I inject http and how it magically gets injected for me.

The next thing is to create an index.html which is the base of our views.

Code: html

<!DOCTYPE html>

<html lang="en" ng-app="plantsapp">
<head>
<title>Plants</title>
<script src="/Scripts/angular.js"></script>
<script src="/js/controller.js"></script>
<script src="/js/app.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>

In the html tag I added an ng-app with the name I provided in my app.js.

I import angular.js, controller.js and app.js.

And I added a div with an ng-view attribute.

Now I need the partials which I put in the partials folder.

Code: html

<table id="table_id">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Genus</th>
</tr>
</thead>
<tbody ng-repeat="plant in plants">
<tr>
<td>{{plant.Id}}</td>
<td><a href="#/plants/{{plant.Id}}">{{plant.Name}}</a></td>
<td>{{plant.Genus}}</td>
</tr>
</tbody>
</table>

This is my plants.html file and it uses the plants object which I have added to the scope in my controller.

See how I add the link (the # is important).

The next file is the detail view, plant.html.

Code: html

<table id="table_id">
<tr>
<th>Id</th>
<th>{{plant.Id}}</th>
</tr>
<tr>
<th>Name</th>
<th>{{plant.Name}}</th>
</tr>
<tr>
<th>Genus</th>
<th>{{plant.Genus}}</th>
</tr>
</table>

Here I use plant because that is what I used to add the the scope in my controller.

And that is it.

Here are the screenshots. Look also at the url in the addressbarr.

The plants.

And here the detail view.

Conclusion

Yeah, uhm. Not sure. Not saying this is bad, but how will this scale ;-). One thing is for sure, the documentation was very good to get my started. Not that I read it before beginning but once I did, it helped.

Original post blogged on LessThanDot.

Nancy and jquery datatables; formatting data

Christiaan Baes (chrissie1) — Sun, 03 Feb 2013 07:25:00 +0000

Introduction

Yesterday I started using jquery datatables and today I will play some more. I did this blogpost using jtable before. And now I'm gonna try the same thing and maybe a little more using datatables.

This should be the result if everything goes well, which it never does from the first time, because Murphy is pairing with us.

Isn't it purdy?

Ok it isn't but it works.

Adding a link

Making a column linkable is as easy as it was in jtable.

In our aoColumns definition we just use mRender which takes a function.

Code: text

{
"mData": "Name", "sTitle": "Name", "sWidth": "30%", "bSortable": false,
"mRender": function (data, type, row) {
return '<a href="/plants/' + row.Id + '">' + data + '</a>';
}
}

So data is the data for that cell, row is the object (in our case, could be an array too if your json datasource returns an array of arrays) and type is... not yet found a use for that.

Formatting our dates with time

As far as I can tell datatables has no way to format dates built in like jtable did. So we jump straight to moment.js.

Code: text

{
"mData": "DateAdded", "sTitle": "Date added", "sWidth": "20%", "bSortable": false,
"mRender": function (data, type, row) {
return moment(data).format('DD/MM/YYYY HH:mm:ss');
}
}

Don't forget to add the moment.js nuget and import the moment.js file.

Color a row based on something

In Excel they call this conditional formatting. In the example above I made all the rows lightcoral where the id was divisable by 3.

My first attempt was this.

Code: text

"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
if ( aData.Id % 3 == 0 )
{
$(nRow).css('background-color', 'lightcoral');
$(nRow).css('color', 'white');
}
}

And that is not the desired result because someone is overriding my nice formatting with their own on a td level, bad, bad people.

But I can be mean too. And this will work.

Code: text

"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
if ( aData.Id % 3 == 0 )
{
$('td', nRow).css('background-color', 'lightcoral');
$('td', nRow).css('color', 'white');
}
}

Conclusion

It's fairly easy to bend the data to your will and format things as you desire.

Original post blogged on LessThanDot.

Nancy and jquery datatables

Christiaan Baes (chrissie1) — Sat, 02 Feb 2013 17:03:00 +0000

Introduction

Another weekend, another bit of testing to do. Lately I have been doing a lot of webdev so I am looking to improve my skills and test things during the weekend. Last weekend I tested jtable and even have it in production. But we are always on the lookout for better and it was suggested to me to try datatables. Which I did.

Installation

Documentation for datatables is kind of lacking in that it leaves out important information to get all the bits working.

So here is the list of nuget packages I used.

jQuery 1.9.0
jquery.datatables 1.9.4
jQuery.UI.Combined 1.10.0
Nancy 0.15.3
Nancy.Hosting.Aspnet 0.15.3
Nancy.Viewengines.Razor 0.15.3

One thing that is on nuget but does not really work are the jquery-ui themes for the themeroller. But not to worry you can download them from the site and just add them manually (yuck).

Don't forget to copy your Scripts folder to the Content folder. Not sure if I can tell nuget how to do this in future but that would be nice. Anyway.

Now we have all the bits. Here is the code.

Nancy

I will use my PlantModel from the previous blogpost.

But I will have to change my PLantsmodule to look like this.

Code: csharp

using System;
using System.Collections.Generic;
using System.Linq;
using Nancy;
using Nancy.ModelBinding;
using NancyJTable.Models;
using System.Linq;

namespace NancyJTable.Modules
{
public class PlantsModule:NancyModule
{
public PlantsModule()
{
Get["/"] = parameters => View["Plants"];
Get["/plants/{Id}"] = parameters => View[GetPlantModels().SingleOrDefault(x => x.Id == parameters.Id)];
Get["/plants"] = parameters =>
{
int start = Convert.ToInt32(Request.Query.iDisplayStart.ToString());
int length = Convert.ToInt32(Request.Query.iDisplayLength.ToString());
var totalRecords = GetPlantModels().Count;
var secho = Request.Query.sEcho;
var sorting = Request.Query.sSortDir_0;
if (sorting == "asc")
{
return Response.AsJson(new { aaData = GetPlantModels().OrderBy(x => x.Id).Skip(start).Take(length), sEcho = secho, iTotalRecords = totalRecords, iTotalDisplayRecords = totalRecords });
}
else
{
return Response.AsJson(new { aaData = GetPlantModels().OrderByDescending(x => x.Id).Skip(start).Take(length), sEcho = secho.ToString(), iTotalRecords = totalRecords, iTotalDisplayRecords = totalRecords });
}
};
}

private IList<PlantModel> GetPlantModels()
{
var plantModels = new List<PlantModel>();
for (var i = 1; i <= 25; i++)
{
var j = i.ToString("000");
plantModels.Add(new PlantModel()
{
Id = i,
Name = "name" + j,
Genus = "genus" + j,
Species = "Species" + j,
DateAdded = DateTime.Now
});
}
return plantModels;
}
}
}

See how use a Get? See how I get the paging parameters (iDisplayStart and iDisplayLength). I only allow the user to resort the Id column so I am slightly cheating here. You can find all the parameters here. You also need to get sEcho and just pass it back out.

The output will look something like this in json.

Code: text

{
"sEcho": 3,
"iTotalRecords": 57,
"iTotalDisplayRecords": 57,
"aaData": [
{
"Id": "1",
"Name": "Name1",
"Genus": "Genus1",
"Species": "Species1",
"DateAdded": "",
},
...
]
}

Which is an objectnotation. Let's remember that fact because it is pretty important later on. ;-)

Datatables

And here is the view code.

Code: html

@using Nancy
<!DOCTYPE html>

<html>
<head>
<title>Plants</title>
<link href="@Url.Content("~/Content/themes/smoothness/jquery-ui.css")" rel="stylesheet" />
<link href="@Url.Content("~/Content/themes/smoothness/jquery.ui.theme.css")" rel="stylesheet" />
<link href="@Url.Content("~/Content/DataTables-1.9.4/media/css/jquery.dataTables_themeroller.css")" rel="stylesheet" />
<script src="@Url.Content("~/Content/Scripts/jquery-1.9.0.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/Scripts/jquery-ui-1.10.0.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/Scripts/DataTables-1.9.4/media/js/jquery.dataTables.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/Scripts/DataTables-1.9.4/media/js/jquery.dataTables.ColumnResizeAndReorder.js")"></script><script type="text/javascript">
$(document).ready(function () {
$('#table_id').dataTable({
"bProcessing": true,
"bStateSave": true,
"bServerSide": true,
"bJQueryUI": true,
"bFilter": false,
"sAjaxSource": "/plants",
"sDom": 'R<"dataTables_HeaderWrapper"<"H"lfr>><"dataTables_BodyWrapper"t><"dataTables_FooterWrapper"<"F"ip>>',
"aoColumns": [
{ "mData": "Id", "sTitle": "Id", "sWidth": "20%", "bSortable": true },
{ "mData": "Name", "sTitle": "Name", "sWidth": "40%", "bSortable": false },
{ "mData": "Genus", "sTitle": "Genus1", "sWidth": "40%", "bSortable": false }
],
"sPaginationType": "full_numbers",
"fnServerData": function (sSource, aoData, fnCallback) {
$.getJSON(sSource, aoData, function (jsondata) {
fnCallback(jsondata);
});
}
});
});
</script>
</head>
<body>
<table id="table_id">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Genus</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3" class="dataTables_empty">Loading data from server</td>
</tr>
</tbody>
</table>
<div id="dataoutput"></div>
</body>
</html>

I also have a plugin to resize the columns because that is not something that is builtin with datatables. You can find that plugin on the extras page of the datatables website.

It is important that we use mData for our columns for because we use objectnotation in our json. The fnServerData has the function that gets our json data.

Look at the html. You need a lot more html than most other frameworks. But it works. Well not actually sure you need that much html because this is one of the parts where the docs are a bit lacking.

It was also lacking on which libraries to import (js and css) but you now have all of them in the code above.

And this is the result.

Conclusion

Is datatables better than jtable? Pff, nah. But I can use a Get instead of a Post to get my data and that is an improvement.

Original post blogged on LessThanDot.