Christophe Geers' Blog

Christophe Geers' Blog http://cgeers.com Christophe Geers' Blog about .NET programming Tue, 18 Jun 2013 09:09:55 +0000 en hourly 1 http://wordpress.com/ http://s2.wp.com/i/buttonw-com.png Christophe Geers' Blog http://cgeers.com AngularJS File Upload http://cgeers.com/2013/05/03/angularjs-file-upload/ http://cgeers.com/2013/05/03/angularjs-file-upload/#comments Fri, 03 May 2013 18:00:41 +0000 Christophe http://cgeers.com/?p=4722 ]]> Introduction

AngularJS

Recently I had some time to play around with AngularJS. More specifically I had to implement a jQuery based file upload widget.

The widget’s demo site already contains an AngularJS demo, but I wanted a minimum setup, so I started from scratch and figured out the necessary parts to implement the file upload using ASP.NET MVC as the server-side platform.

Let’s see which steps we need to take to implement a basic version.

Table Of Contents

Introduction
Server Side
Dependencies
Module
Layout
FileUploadCtrl
uploadManager Service
upload Directive
Progress bar
Summary

Server Side

Let’s focus on the server-side part first.

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
}

Can’t get much simpler.

Now you’ll just need to add one more action method which handles a file upload.

[HttpPost]
public ContentResult Upload(HttpPostedFileBase file)
{
    var filename = Path.GetFileName(file.FileName);
    var path = Path.Combine(Server.MapPath("~/uploads"), filename);
    file.SaveAs(path);

    return new ContentResult
    {
        ContentType = "text/plain",
        Content = filename,
        ContentEncoding = Encoding.UTF8
    }; 
}

The code is self-explanatory. When a file is uploaded (POST) the data is bound to the file parameter which is of type HttpPostedFileBase. The file name is extracted and the file is saved on the server. Finally we return the file name as plain text.

Voila, that’s all the server side code you’ll need.

Remark: I had to explicitly set the content type otherwhise IE will prompt you to download the result. Feel free to change the content type (e.g. JSON) and return something else than the filename instead.

Dependencies

When setting up a small demo site I developed the tendency to implement Twitter Bootstrap so that I can easily style it. If you are not familiar with Bootstrap, check out the following article to get started:

Getting started with Twitter Bootstrap

So if you see some unfamiliar CSS in the HTML listings you know where it’s coming from.

Apart from Bootstrap and the jQuery file upload widget you’ll need to include the following resources:

The download package of the jQuery file upload contains a couple of JS files, but you’ll only need the jquery.fileupload.js library.

Module

Let’s create a custom Angular module. Add a new script file called app.js to the project and add the following code to it:

(function () {
    'use strict';

    var myApp = angular.module('myApp', []);
}());

Don’t forget to bootstrap the application.

<html ng-app="myApp">
...
</html>

The root of our Angular application is now defined, let’s flesh out the rest.

Layout

The file upload control looks as follows:

Let’s compose the HTML to create this layout. First add a DIV and link it an Angular controller named FileUploadCtrl. Ignore the controller for now, we’ll get back to it later.

<h2>File Upload</h2>
<div ng-controller="FileUploadCtrl">
...
</div>

The remaining HTML can be split into three sections:

Select (files) button
List of selected files
Upload button

Start by adding the HTML for the select button.

<div class="control-group">
    <div class="controls">
        <span class="btn btn-success fileinput-button">
            <i class="icon-plus icon-white"></i>
            <input type="file" name="file" data-url="home/upload" 
                   multiple upload><span>Add files...</span>
        </span>
    </div>
</div>

Remark: You’ll need to include some additional CSS to properly style the file upload input, because by default it is designed to be butt-ugly (I borrowed this CSS from the file upload demo page).

Next add a list to display the selected files names. The list is bound to an array (files) of our Angular controller.

<div>
    <span ng-show="!files.length">No files selected</span>
    <ul>
        <li ng-repeat="file in files">{{file}}</li>
    </ul>
</div>

Last, but not least: the Upload button.

<div class="form-actions">
    <button type="submit" class="btn btn-primary pull-left" ng-click="upload()">Upload</button>
</div>

Clicking the button will invoke the upload function on the controller’s scope.

FileUploadCtrl

Time to add our FileUploadCtrl to our Angular module.

myApp.controller('FileUploadCtrl',
    ['$scope', '$rootScope', 'uploadManager', 
    function ($scope, $rootScope, uploadManager) {
    $scope.files = [];
    $scope.percentage = 0;

    $scope.upload = function () {
        uploadManager.upload();
        $scope.files = [];
    };

    $rootScope.$on('fileAdded', function (e, call) {
        $scope.files.push(call);
        $scope.$apply();
    });

    $rootScope.$on('uploadProgress', function (e, call) {
        $scope.percentage = call;
        $scope.$apply();
    });
}]);

We inject 3 dependencies into the controller: $scope, $rootScope and uploadManager. The latter being a custom service which manages the files that we want to upload. The scope has two properties, files (array) and percentage (int). The files array contains the name of the files to be uploaded. We’ll get back to the percentage later.

When you click the upload button the upload function on the scope is called. It informs the uploadManager service to start uploading the files and resets the files array.

Via the $rootScope we also listen to two events, fileAdded and uploadProgress, which are broadcast by the uploadManager service. Each time a file is added using the third-party jQuery plugin the fileAdded event is triggered. When this happens we add the filename to the files array. The uploadProgress event is triggered when the widget is busy uploading the files. Here we update the percentage property. Later we’ll bind this to a progress bar.

uploadManager service

The uploadManager service is fairly straightforward. It manages the files you wish to upload, it allows you to communicate between the third party file upload widget and your Angular controller.

Only the $rootScope is injected as a dependency. We use it to broadcast the two events (fileAdded and uploadProgress) we mentioned earlier.

myApp.factory('uploadManager', function ($rootScope) {
    var _files = [];
    return {
        add: function (file) {
            _files.push(file);
            $rootScope.$broadcast('fileAdded', file.files[0].name);
        },
        clear: function () {
            _files = [];
        },
        files: function () {
            var fileNames = [];
            $.each(_files, function (index, file) {
                fileNames.push(file.files[0].name);
            });
            return fileNames;
        },
        upload: function () {
            $.each(_files, function (index, file) {
                file.submit();
            });
            this.clear();
        },
        setProgress: function (percentage) {
            $rootScope.$broadcast('uploadProgress', percentage);
        }
    };
});

Top of page

upload Directive

So the uploadManager service triggers events to which our controller listens and consequently updates its scope. But who then notifies this service of events triggered by the file upload widget?

That’s where our custom upload directive comes into play. Take a look again at the input element for the file upload listed earlier.

 <input type="file" name="file" data-url="home/upload"
        multiple upload><span>Add files...</span>

The data-url attribute points to the URL the files are POSTed to. Note the upload attribute. This extends the input element. Let’s discover what it does.

myApp.directive('upload', ['uploadManager', function factory(uploadManager) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            $(element).fileupload({
                dataType: 'text',
                add: function (e, data) {
                    uploadManager.add(data);
                },
                progressall: function (e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    uploadManager.setProgress(progress);
                },
                done: function (e, data) {
                    uploadManager.setProgress(0);
                }
            });
        }
    };
}]);

First we have Angular inject the uploadManager service. We then use the link function to transform the DOM. Here our element is turned into a file upload widget. The widget supports a number of callbacks. Here we only use the add, progressall and done callbacks. When these are triggered by the widget we notify the uploadManager. For example when a file is added we pass this to the uploadManager which then broadcasts the fileAdded event. Since our controller is listening for this event, it’ll be notified when a new file has been selected.

Progress bar

Let’s get back to that progress property on the scope of our controller. Each time the uploadManager service broadcasts the uploadProgress event we update the percentage.

This way you can easily add a progress bar and show the upload progress. For example:

<div class="progress" ng-show="percentage">
    <div class="bar" style="width: {{percentage}}%;"></div>
</div>

Summary

To recapitulate, we have 3 components that make up our Angular application:

FileUploadCtrl: Our controller which is tied to a DIV which contains the file upload widget
uploadManager Service: This service manages the files we want to upload. It sends out a couple of events to which our controller listens and acts to accordingly.
upload Directive: This directive transforms the file input into a bonafide upload widget. It uses the widget’s callbacks to notify the uploadManager service.

And that’s basically all there is too it. I tested the code in Chrome and IE8. If you have any issues or suggestions please let me know.

Filed under: AngularJS, ASP.NET MVC, C#, Programming

]]> http://cgeers.com/2013/05/03/angularjs-file-upload/feed/ 6 cgeers AngularJS fileupload GitHub Service Hooks: AppHarbor http://cgeers.com/2012/10/30/github-service-hooks-appharbor/ http://cgeers.com/2012/10/30/github-service-hooks-appharbor/#comments Tue, 30 Oct 2012 05:30:39 +0000 Christophe http://cgeers.com/?p=4655 ]]> Introduction

AppHarbor

The last 7 posts discussed how you can create a single-page application using GitHub, Twitter Bootstrap, MongoDB and Knockout.js.

One last thing I touched briefly during my session in September is continuous deployment using AppHarbor. If you are not familiar with AppHarbor, it’s basically .NET as a service where you can deploy a .NET application to the cloud.

In this tutorial let’s create a small web application, use GitHub for source control and automatically deploy any commits directly to our AppHarbor hosted site.

Table Of Contents

Introduction
Single-page Application
GitHub Repository
AppHarbor
Service Hook
MongoDB

Single-page Application

First we’ll need a site which we can add to GitHub. Let’s use the single-page application created earlier during the 4-part Knockout.js series. I’m using this site as it also uses MongoDB. When deploying to AppHarbor we’ll need to replace the connection string to reflect the new environment. We’ll get back to that later.

You can download the application here:

Single-page application using Knockout.js

If you haven’t followed the Knockout series you can have a quick look, but it’s not required to be able to follow along

GitHub Repository

Once you’ve downloaded the source code, go ahead and extract it.

Log in to your GitHub account and create a new (public) repository called MySinglePageApplication.

Make sure to initialize it with a README and a .gitignore file for C#.

Once the remote repository has been created, open up GitHub for Windows and clone it to a local repository.

When cloned, copy and paste the extracted files in this local repository.

Time to commit. Open up a GitHub shell for the repo and push the new files to the remote repository. You need to execute the following commands:

git add .
git commit -m "Initial commit"
git push

Once you execute the “git push” command your new code files will be uploaded to your remote repository. This will probably take a minute or two.

Alright, the remote repository now contains the code for our single-page application.

If you are new to GitHub, be sure to read my post on getting started with GitHub first.

Top of page

AppHarbor

If you haven’t signed up with AppHarbor yet, go ahead and create a free account. Once signed in create a new application called MySinglePageApplication. Be sure to select United States or Europe depending on your actual location.

When the application has been created you’ll automatically be redirected to its dashboard. On the lefthand menu you should see a button labelled BUILD URL.

Click it. This copies the application’s build URL to the clipboard. The URL has the following pattern:

https://appharbor.com:443/applications/mysinglepageapplication/builds?authorization=YOUR_AUTHORIZATION_ID

Copy the value of the authorization query parameter into your clipboard. You won’t need the rest of the URL.

Service Hook

Your application has now been configured in GitHub and AppHarbor. Time to link the two. Go back to your GitHub account and go the MySinglePageApplication repository’s admin section. In the lefthand menu click the service hooks option.

You’ll be presented with a very long list of available service hooks. Locate the AppHarbor hook and select it. To link GitHub to AppHarbor you need to complete the following form:

Just enter “MySinglePageApplication” for the application slug and copy / paste the authorization ID from AppHarbor’s build URL into the token field. Check the active checkbox and finally click Update Settings.

That’s it. Your GitHub account is now linked to your AppHarbor application. Each time you push your commits to your remote repository GitHub will trigger the service hook and notify AppHarbor. AppHarbor in its turn will pull in the source code, build your application and automatically deploy it.

MongoDB

There’s just one last thing we need to address. Our application uses MongoDB, this hasn’t been setup for the AppHarbor hosted application yet. Let’s rectify this. Go back to your application’s dashboard on AppHarbor and select the Add-ons menu item.

Locate the MongoHQ add-on and click the “See more” link.

Go ahead and install the free sandbox version which offers you 16 MB of storage.

Voila, you’ve just added MongoDB support to your application. How does AppHarbor know how to replace your MongoDB connection string with its own? A simple naming convention does the trick. Just make sure you add your MongoDB connection string under the Web.config’s appSettings node and call it MONGOHQ_URL.

Go ahead and rename the connection string for the single-page application demo (Web.config + TimesheetsController.cs). Save the changes, commit and push them to the remote repository.

GitHub’s AppHarbor service hook will now deliver the payload to AppHarbor which in its turn will build and deploy your application. Just check your application’s dashboard on AppHarbor. Here you can follow the build’s progress.

On the top of the page you’ll find a “Go to your application” link. Click and you’ll notice that within a couple of minutes your new changes will have been deployed.

If you have any questions or suggestions please drop me an e-mail or submit a comment.

Filed under: C#, Continuous Integration, GitHub, Programming

]]> http://cgeers.com/2012/10/30/github-service-hooks-appharbor/feed/ 0 cgeers AppHarbor Files New Repository Clone Repository Local Repository git push Initial commit New application Build URL Service Hooks AppHarbor Service Hook MongoHQ MongoHQ sandbox Build status Single-page Application with Knockout.js, Part 4 http://cgeers.com/2012/10/22/single-page-application-with-knockout-js-part-4/ http://cgeers.com/2012/10/22/single-page-application-with-knockout-js-part-4/#comments Mon, 22 Oct 2012 05:30:08 +0000 Christophe http://cgeers.com/?p=4609 ]]> Introduction

Knockout.js

Let’s wrap up our little Knockout powered single-page application. We already covered 3 out of 4 parts of the timesheets application.

Time to finish up with the fourth and final part, deleting timesheets. Using some Twitter Bootstrap and Knockout magic it shouldn’t take that long.

Table Of Contents

Introduction
Button Dropdown
Checkboxes
Are You Sure?
Nothing Selected?
Delete

Button Dropdown

Bootstrap is awesome, you know that by now, right? Let’s introduce another one of its components to help us delete timesheets. Download the source code of the previous part and open it in Visual Studio.

Open the index.cshtml view and copy / paste the following HTML above the table displaying the timesheets.

<div class="btn-toolbar" 
     data-bind="visible: viewModel.timesheets().length > 0">
    <div class="btn-group">
        <span class="btn btn-primary">Actions</span>
        <a class="btn btn-primary dropdown-toggle" 
           data-toggle="dropdown" href="">
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">Delete</a></li>
        </ul>
    </div>
</div>

This displays a button dropdown above the table if there is at least one timesheet present in our observable array. Notice the data-bind attribute on the div.

The dropdown is toggled when you click on the caret. Like Bootstrap’s modal it also has a data-toggle attribute. Currently our dropdown list only contains one item, but feel free to add more.

Checkboxes

Alright, we have given the user an action which he can execute when he wants to delete one or more timesheets. But we still need them to be able to select the timesheets they want to delete. Adding a checkbox to each row will serve this purpose.

First add a new empty header cell to the <thead>. Make sure it is the first cell.

<thead>
    <tr>
        <th></th>
        //...
    </tr>
</thead>

Then add a new cell to the row template. Also insert it before the other cells, so that it is nicely displayed beneath the empty header cell.

<tbody data-bind="foreach: viewModel.timesheets">
    <tr>
        <td><input type="checkbox" data-bind="checked: selected"/></td>
        //...
    </tr>
</tbody>

Your layout should now resemble this:

Take a look at the cell which contains the HTML for the checkbox. Here we make use of the checked binding. The checkbox is linked to a property on its coherent timesheet object, called selected. Add this new property to the timesheet class.

function timesheet(timesheet) {
    //...
    this.selected = ko.observable(false);
    //...
}

When the user checks the timesheet, the selected property on the timesheet object will be updated. This way each timesheet knows wether or not it is currently selected.

Are You Sure?

When deleting data, it’s best to ask the user if he is sure he wants to proceed. So when he selects one or more timesheets and clicks the delete action we want to alert him.

Add the following HTML to your page.

<div class="modal hide fade" id="timesheet-delete">
    <div class="modal-header">
        <button type="button" class="close" 
                data-dismiss="modal">×</button>
        <h3>Delete?</h3>
    </div>
    <div class="modal-body">
      <p>Are you sure you want to delete these timesheets?</p>
    </div>

    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Cancel</a>
        <input type="submit" class="btn btn-danger" value="Delete" 
               data-bind="click: function() { deleteTimesheets('timesheet-delete') }" />
    </div>
</div>

That’s right, another modal window. Initially hidden we’ll show this popup when the user is about to delete timesheets. Let’s hookup the delete action to this modal.

<ul class="dropdown-menu">
    <li><a id="new-timesheet" 
           data-toggle="modal" 
           href="#timesheet-delete">Delete</a></li>
</ul>

Now the delete action toggles the model through the data-toggle and href attributes.

If you take a look at the modal’s HTML you’ll notice that the Delete button is wired (data-bind) to the view model’s deleteTimesheets() function. For now just add the following stub function to your view model.

var viewModel = {
    //...
    deleteTimesheets: function (modalId) {
        //...
    }
}

Nothing Selected?

Before we can actually delete timesheets, there’s one little issue that we need to fix. Currently the delete action is also available when no timesheets have been selected. Let’s disable it in this case. Add a new computed observable to the view model.

viewModel.timesheetsSelected = ko.computed(function () {
    var selected = 0;
    $.each(this.timesheets(), function (index, timesheet) {
        if (timesheet.selected())
            selected++;
    });
    return selected;
}, viewModel);

This computed observable returns the number of selected timesheets. Let’s hook up the visibility of the button dropdown to it. Just remove the old data-bind attribute and put the following one in its place.

<div class="btn-toolbar" data-bind="visible: viewModel.timesheetsSelected() > 0">
...
</div>

Problem solved. Now the user can only select the Delete action if at least one timesheet has been selected. You might want to hook up the computed observable directly to the Delete action instead of hiding the whole dropdown, feel free to experiment.

Delete

We’re only one Ajax call away from deleting the timesheets and completing our timesheets application. So without further ado, here’s the implementation for the deleteTimesheets() function.

deleteTimesheets: function (modalId) {
    var ids = new Array();
    $.each(this.timesheets(), function (index, timesheet) {
        if (timesheet.selected())
            ids.push(timesheet.id());
    });

    var self = this;
    $.ajax({
        url: '@Url.RouteUrl("DefaultApi", new { httproute = "", controller = "timesheets" })',
        type: 'DELETE',
        data: ko.toJSON(ids),
        contentType: 'application/json; charset=utf-8',
        success: function () {
            $.each(ids, function (index, id) {
                var match = ko.utils.arrayFirst(self.timesheets(), function (item) {
                    return id === item.id();
                });
                self.timesheets.remove(match);
            });
            $('#' + modalId).modal('hide');
        }
    });
},

First we loop through our observable array and check which timesheet is selected. We add the IDs of those to an array. Then we serialize this array to JSON and pass it via an Ajax call to our REST service. Notice the DELETE HTTP verb.

I did make on little change to the REST controller though. Instead of deleting each timesheet one by one I now allow users of the API to pass in more than one ID.

public HttpResponseMessage Delete(params string[] ids)
{
    foreach (var id in ids)
    {
        _repository.Remove(Query.EQ("_id", new ObjectId(id)));
    }
    return Request.CreateResponse(HttpStatusCode.NoContent);
}

And that wraps up the Knockout CRUD application. Hope you find it useful. I’d like to point out another thing though, here’s the code for the controller behind the page.

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
}

Maybe we’ll clean that one up in the next part .

You can download the source code accompanying this article from the download page. If you have any questions or suggestions please drop me an e-mail or submit a comment.

Filed under: ASP.NET MVC, Knockout.js

]]> http://cgeers.com/2012/10/22/single-page-application-with-knockout-js-part-4/feed/ 0 cgeers Knockout.js Button dropdown Caret Checkboxes Are you sure? Single-page Application with Knockout.js, Part 3 http://cgeers.com/2012/10/15/single-page-application-with-knockout-js-part-3/ http://cgeers.com/2012/10/15/single-page-application-with-knockout-js-part-3/#comments Mon, 15 Oct 2012 05:30:28 +0000 Christophe http://cgeers.com/?p=4564 ]]> Introduction

Knockout.js

In part 3 of this series we’ll implement another feature of our little Knockout.js powered CRUD application. We already talked about read and create in the first two articles, skim through them if you want to get up to speed.

The next logical step after enabling users to add timesheets is to allow them to edit the new records. Time to implement some update functionality.

Table Of Contents

Introduction
Edit Link
ObjectId
Modal Form
Populating the Form
Submitting the Form

Edit Link

Start where we left off last time. Download the source code of the previous part, unzip it and open it up in Visual Studio.

Compile and run it. After adding a couple of timesheets you should see a similar list.

Let’s make the first- and lastname clickable.

Open the Index.cshtml view, locate the table’s body and replace the following two cells:

<td data-bind="text: firstname"></td>
<td data-bind="text: lastname"></td>

with

<td><a href="#" data-bind="text: firstname, click: edit"></a></td>
<td><a href="#" data-bind="text: lastname, click: edit"></a></td>

First we turned the first- and lastname into anchors. The text attribute of these anchors is bound to our timesheet objects as before. Then we hooked up the click events of both anchors to the edit() function of the timesheet object. Let’s declare it.

function timesheet(timesheet) {
    //...

    this.edit = function() {
        console.log(this.id());
        //...
    }
}

When editing a timesheet we’d like to know the ID of the timesheet. Easy, the edit() function will automatically be called on the correct timesheet object. This object already knows the ID of the timesheet.

function timesheet(timesheet) {
    this.id = ko.observable(timesheet.id);
    //...
}

ObjectId

On the server-side our Timesheet type descends from the abstract Entity class. This base class contains the Id property of type ObjectId. This is a MongoDB specific type provided by the MongoDB C# driver.

If you open the Entity.cs code file you’ll notice that it is decorated with a couple of attributes.

[JsonObject(MemberSerialization = MemberSerialization.OptIn)]
public abstract class Entity
{
    [JsonProperty(PropertyName = "id")]
    [JsonConverter(typeof(ObjectIdConverter))]
    public ObjectId Id { get; protected set; }
}

Nothing special here, just a few JSON.NET specific attributes to specify how to serialize the data. The only special case is the ObjectIdConverter attribute. It’s a custom JSON.NET converter to help serialize the ObjectId.

The ObjectId is a 12-byte binary value consisting out of:

4-byte timestamp (seconds sinds epoch)
3-byte machine id
2-byte process id
3-byte counter

Check out the implementation of the custom converter if you want to. Nothing special, basically we just call ToString() on the ObjectId to retrieve a more readable format.

For example:

5079220fb4075a041495e119
50792206b4075a041495e118
50792218b4075a041495e11a
…

Voila, the last- and firstname have now been turned into anchors. When clicking upon them the edit() function of their coherent timesheet object will be called.

Top of page

Modal Form

When a user clicks edit we want the modal timesheet form to popup pre-populated with the selected timesheet’s data. But first let us modify something that we introduced in the previous part, namely resetting the form.

The “Add timesheet” button is currently bound to the view model’s resetForm() method. Go ahead and remove this binding.

<a id="new-timesheet" class="btn btn-success" 
   data-toggle="modal" href="#timesheet-modal">Add timesheet</a>

Now remove the entire resetForm() method from the view model. Just go ahead and delete it. We’ll use one of the modal’s events, provided by Bootstrap, to reset the form. Not only do we need to reset the form each time after we’ve added a timesheet, now we also need to reset after each modification.

Copy / paste the following JavaScript below your view model.

$('#timesheet-modal').on('hide', function () {
    var form = $('#Timesheet');
    form.validate().resetForm();
    form.get(0).reset();
    form.removeData('timesheet');
    form.find("input[type='hidden'][id='id']").remove();
});

When the modal is hidden (hide event) it now resets the form. Doesn’t matter if we were adding or modifying an existing timesheet. Each time the modal is hidden it will reset the Timesheet form. No need to manually call this code anymore each time you show the modal.

Remark: Notice that when resetting the form we also remove a hidden input element with the id ‘id’ (if present). This hidden stores the ID of the timesheet we’re currently editing. We’ll get back to this later.

Currently the modal timesheet form is only displayed when someone clicks the “Add timesheet” button, but we also want to show it when a user click upon the first- or lastname of a timesheet. To achieve this you need to correctly setup the anchors to trigger the modal.

Add the following two attributes to both the first- and lastname anchors:

<a href="#timesheet-modal" data-toggle="modal" ... >

Now the modal will also be shown when you click upon the first- or lastname.

Populating the Form

OK, the modal form is displayed when editing a timesheet, but the fields aren’t filled in. Let’s rectivy this.

Modify the click databinding of both anchors as follows:

<a data-bind="text: firstname, click: function(form) { edit('Timesheet') }" ...></a>

We still call the timesheet object’s edit function, but now we pass in an additional parameter, namely the ID of the form.

Now we can link the timesheet object to the form using jQuery’s data() method.

function timesheet(timesheet) {
    //...

    this.edit = function (formId) {
        var form = $('#' + formId);
        form.data('timesheet', this);
    }
}

Now when you click on one of the links the timesheet object will be associated with the form which resides in the modal.

We can easily pre-populate the form now using another one of the modal’s events.

$('#timesheet-modal').on('show', function () {
    var form = $('#Timesheet');
    var timesheet = form.data('timesheet');
    if (!timesheet)
        return;

    $('<input>').attr('type', 'hidden')
                .attr('id', 'id')
                .attr('name', 'id')
                .val(timesheet.id()).prependTo(form);
    form.find('#FirstName').val(timesheet.firstname());
    form.find('#LastName').val(timesheet.lastname());
    form.find('#Month').val(timesheet.month());
    form.find('#Year').val(timesheet.year());
});

When the modal form is shown we check if a timesheet object has been associated with the form. If so, we take use the timesheet object’s properties to pre-populate the form with data. Note that we also add a hidden input element to the form which stores the timesheet’s ID. This way we know which timesheet to update it when we submit the form.

Submitting the Form

As you may remember the form’s submission is already bound to the view modal’s postTimesheet() function thanks to the magic that is Knockout. Let’s modify this function so that it can handle adding (POST) and updating (PUT) timesheets.

postTimesheet: function (form, modalId) {
    form = $(form);
    if (!form.valid())
        return;

    var json = JSON.stringify(this._getTimesheetFromFrom(form));

    var update = form.find("input[type='hidden'][id='id']").val();
    var httpVerb = !update ? "POST" : "PUT";

    var self = this;
    $.ajax({
        url: '@Url.RouteUrl("DefaultApi", new { httproute = "", controller = "timesheets" })',
        type: httpVerb,
        data: json,
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        success: function (jsonObject) {
            if (update) {
                var match = ko.utils.arrayFirst(self.timesheets(), function (item) {
                    return jsonObject.id === item.id();
                });
                match.update(jsonObject);
            }
            else {
                self.timesheets.push(new timesheet(jsonObject));
            }
            $('#' + modalId).modal('hide');
        }
    });
}

Only a few things have changed. First we check if the form contains a hidden ID input element. If so we’ll be updating (POST) a timesheet instead of adding (POST) one. Then when our Ajax call successfully returns we check if we need to add a new timesheet to our observable array or update an existing one.

Note that Knockout monitors an observable array for additions and removals of objects, but it doesn’t actually monitor the properties of the objects that you’ve added to the array. Imagine how many resources it would require if it were to scan and monitor each object’s entire graph.

We need to manually update the object the modified object which resides in the observable array. For this purpose I’ve added an update() method to the timesheet class.

function timesheet(timesheet) {
    //...

    this.update = function (timesheet) {
        this.id(timesheet.id);
        this.firstname(timesheet.firstname);
        this.lastname(timesheet.lastname);
        this.month(timesheet.month);
        this.year(timesheet.year);
    };
}

After updating a timesheet we first locate it in the observable array and then call it’s update method passing in the JSON object (= timesheet) which we received from our REST controller.

And that wraps up the third article of this Knockout.js series. The first post showed you how to implement the READ part, the second demonstrated the CREATE part and this one explained the UPDATE part. Only one remaining, namely DELETE, but I’ll keep that one for the fourth and final part.

You can download the source code accompanying this article from the download page. If you have any questions or suggestions please drop me an e-mail or submit a comment.

Filed under: ASP.NET MVC, Knockout.js, Programming

]]> http://cgeers.com/2012/10/15/single-page-application-with-knockout-js-part-3/feed/ 0 cgeers Knockout.js Timesheets Empty form Single-page Application with Knockout.js, Part 2 http://cgeers.com/2012/10/10/single-page-application-with-knockout-js-part-2/ http://cgeers.com/2012/10/10/single-page-application-with-knockout-js-part-2/#comments Wed, 10 Oct 2012 19:30:04 +0000 Christophe http://cgeers.com/?p=4504 ]]> Introduction

Knockout.js

Let’s start where we left off. Go ahead and download the source code of the previous part, unzip it and open it up in Visual Studio.

Last time we retrieved a list of timesheets, pushed it into an observable array and used declarative bindings (data-bind) to associate DOM elements with our view model. In other words we databound it to a table. Knockout then automagically rendered a row for each timesheet in the array.

Let’s proceed with the next step in our little CRUD application and add support for creating new timesheets.

Table Of Contents

Introduction
Modal
The Form
Resetting the Form
POST-it

Modal

Let’s present the user with an option to add a new timesheet. Copy / paste the following HTML code just below the table on the Index.cshtml view.

<div class="pull-right">
    <a id="new-timesheet" class="btn btn-success"
       data-toggle="modal" href="#timesheet-modal">Add timesheet</a>
</div>

This will render the following button beneath the bottom right hand corner of the table.

This demonstrates some of Twitter Bootstrap’s base CSS for quickly rendering cool looking buttons.

The button here is a simple anchor. Notice the data-toggle and href attributes on the anchor? Bootstrap magic at work again. The data-toggle attribute basically tells Bootstrap to show a modal window with the id (href) “timesheet-modal” when the button is clicked. The button (data-)toggles the modal window.

Time to add the actual modal. Insert the following HTML beneath the button.

<div class="modal hide fade" id="timesheet-modal">
    <div class="modal-header">
        <button type="button" class="close" 
                data-dismiss="modal">×</button>
        <h3>Timesheet</h3>
    </div>
    
    <form id="Timesheet" 
     data-bind="submit: 
       function(form) { postTimesheet(form, 'timesheet-modal') }">

    <div class="modal-body">
    </div>

    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Cancel</a>
        <input type="submit" class="btn btn-primary" value="Save" />
    </div>
    </form>
</div>

The modal div is initially hidden due to the CSS hide class. It consists out of three parts, namely:

header (modal-header)
body (modal-body)
footer (modal-footer)

Each part is decorated with a Bootstrap CSS class (modal-header, modal-body…etc.). The header contains a caption and a button (X) that allows the user to close the modal. The button’s data-dismiss attribute informs bootstrap that this button closes the modal. The body is empty for now, while the footer contains a regular submit button and another button to close the modal.

Before you run the application there are two other things you need to modify.

First add the following CSS to the site.css file which is included between bootstrap.css and bootstrap-responsive.css to remove the bottom margin of 20px that bootstrap adds to forms. Notice that the modal’s body and footer are wrapped in a form.

form { margin: 0; }

This form is also bound to our view model.

 <form id="Timesheet" 
  data-bind="submit: function(form) { postTimesheet(form, 'timesheet-modal') }">
...
</form>

This attribute instructs Knockout to call the view model’s postTimesheet function when the form is submitted. Add this new function to the view model.

Remark: Notice that here I passed the ID of the modal to the submitTimesheet() function by wrapping the handler in a function literal that takes in the necessary parameters. Knockout supplies the form by default for form submissions, I just added a literal which contains the modal’s ID. You’ll see later on why we need it.

postTimesheet: function (form, modalId) {
        
}

Alright, the modal is now completely setup. Compile and run. If you click on the “Add timesheet” button now, the modal window will appear.

Five minutes of work and you’ve got a working modal window!

The Form

We can now add a form to the body of the modal which the user can fill in to add a new timesheet. Create a partial view called _Timesheet.

Render the partial view in the modal’s body.

...
<div class="modal-body">
@{ Html.RenderPartial("_Timesheet", new Timesheet()); }
</div>
...

The partial view _Timesheet uses the Timesheet type as its model. It renders some input controls for the first name, last name, month and year properties.

@model MvcApplication.Models.Timesheet

@Html.LabelFor(m => m.FirstName)
@Html.TextBoxFor(m => m.FirstName)
@Html.LabelFor(m => m.LastName)
@Html.TextBoxFor(m => m.LastName)

@Html.LabelFor(m => m.Month)
@Html.DropDownListFor(m => m.Month, Model.Months)
@Html.LabelFor(m => m.Year)
@Html.TextBoxFor(m => m.Year, new { disabled="disabled" })

Remark: If you take a look at the Timesheet model’s code you’ll notice that I added some data annotations (required, display…etc.) and an IEnumerable of SelectListItem for the months.

Your modal should now look like the following screenshot:

Let’s add some CSS to the site.css file to make sure required fields are nicely marked with a red border.

select.input-validation-error,
input.input-validation-error {
    border-color: #FF0000;
    border-radius: 7px;
}

select.input-validation-error:focus,
input.input-validation-error:focus { 
    outline: none;
    border-color: #FF0000;
    box-shadow: 0 0 10px #FF0000;
}

If you submit the form without filling out a single field you’ll notice that the first- and last name field will be marked as required.

Resetting the Form

Close the modal and re-open it. What do you notice? Yup, the fields are still marked as required, red border and all. Same thing if you enter some data, it will be still there next time you re-open the modal. When opening the modal we need to wipe the slate clean; we need to reset the form.

Bind the “Add timesheet” button’s click event to the view model’s resetForm function as follows:

<div class="pull-right">
    <a id="new-timesheet" class="btn btn-success" 
       data-toggle="modal" href="#timesheet-modal" 
       data-bind="click: resetForm.bind($data, 'Timesheet')">
    Add timesheet</a>
</div>

We pass a literal parameter to the resetForm function using the bind function, which attaches a specific parameter value to a function reference. Here we pass the ID of the form which we want to reset.

As for the resetForm function’s implementation, it’s pretty straightforward. Just add the following function to your view model.

resetForm: function (formId) {
    var form = $('#' + formId);
    form.validate().resetForm();
    form.get(0).reset();
}

Using jQuery validation the form’s validation information is reset and the the actual form itself. If you re-open the modal now the fields are empty and no longer marked as required.

POST-it

Everything is in place now. The form is finished, let’s post the data entered by the user and create a new timesheet. Time to implement the view model’s postTimesheet function we added earlier.

Let’s go through it step by step. First we check if the form passes the required validation.

form = $(form);
if (!form.valid())
    return;

Then we extract the entered information form the form and serialize it as JSON.

var json = JSON.stringify(this._getTimesheetFromFrom(form));

The _getTimesheetsFromForm() is a “private” method on our view model which is implemented as follows:

_getTimesheetFromFrom: function (form) {
    form = $(form);
    var timesheet = {};
    form.find('input[type!=submit],select').each(function () {
        timesheet[this.name] = $(this).val();
    });
    return timesheet;
}

It takes all the INPUT and SELECT input elements from the form and returns the information as a JSON object.

{"FirstName":"Dan","LastName":"Harrington","Month":"11","Year":"2012"}

OK, let’s continue with the implementation of the postTimesheet() function. The form’s data has been validated, the JSON payload has been assembled. Time to POST the data to our Timesheets API controller (REST).

Easy Peasy Lemon Squeezy. Just perform an $.ajax call and POST the JSON data. When you get a reply, which is the newly added timesheet serialized as JSON, we push it on our observable array of timesheets. Last, but not least we use the modalId parameter to hide the modal window.

var self = this;
$.ajax({
    url: '@Url.RouteUrl("DefaultApi", new { httproute = "", controller = "timesheets" })',
    type: 'POST',
    data: json,
    dataType: 'json',
    contentType: 'application/json; charset=utf-8',
    success: function (jsonObject) {
        self.timesheets.push(new timesheet(jsonObject));
        $('#' + modalId).modal('hide');
    }
});

Thanks to the magic of Knockout our list of timesheets will update automatically.

The previous post showed you how to implement the READ part of our CRUD application, while this part demonstrated the CREATE. In the third article of this series we’ll reuse much of what we learned here and implement the UPDATE. The fourth and last post will wrap everything up with the DELETE.

You can download the source code accompanying this article from the download page. If you have any questions or suggestions please drop me an e-mail or submit a comment.

Top of page

Filed under: ASP.NET MVC, Knockout.js, Programming

]]> http://cgeers.com/2012/10/10/single-page-application-with-knockout-js-part-2/feed/ 2 cgeers Knockout.js Add timesheet Modal Partial View Timesheet Form Required field New timesheet Single-page Application with Knockout.js, Part 1 http://cgeers.com/2012/10/06/single-page-application-with-knockout-js-part-1/ http://cgeers.com/2012/10/06/single-page-application-with-knockout-js-part-1/#comments Sat, 06 Oct 2012 12:38:16 +0000 Christophe http://cgeers.com/?p=4453 ]]> Introduction

Knockout.js

The last two posts were introductory posts to Twitter Bootstrap and MongoDB. Let’s combine these two technologies with ASP.NET MVC 4, Web API and Knockout.js to create a simple Single-page Application.

The goal is to fit all the necessary code – HTML, JavaScript and CSS on one single page, hence the name. This results in a more fluid user experience. We will not be doing any full page reloads or transfer control to another page. All interaction with the server will consist solely out lightweight JSON communication.

Table Of Contents

Introduction
Project Template
Timesheets API
Data
A Simple List with Knockout.js

Project Template

The last two posts discuss how you can quickly bootstrap a site and get up and running with MongoDB. To avoid repeating these steps I created an ASP.NET MVC 4 project which already contains a Bootstrap enabled layout and a REST service (Web API) which uses a MongoDB database to store and fetch its resources.

Download the solution and open it in Visual Studio.

Single-page Application Project

Before you compile and run the project make sure you’ve set up MongoDB correctly.

When you compile and run the application you should get the following page:

The site contains a basic navbar which contains two menu items, Timesheets and About. The About page just contains some Lorem Ipsum speak. We’ll be focussing on the Timesheets page for our SPA application.

Apart from using Twitter Bootstrap, I also included a couple of JavaScript libraries such as jQuery, jQuery Validation and ofcourse the latest version of Knockout.js.

Timesheets API

Our SPA will be a simple CRUD application which allows the user to manage timesheets. Now a timesheet in our case in a very simple object.

public class Timesheet : Entity
{
    public string FirstName { get; set; }

    public string LastName { get; set; }

    public int Month { get; set; }

    public int Year { get; set; }
}

Per timesheet you can specify a name, month and year. That’s it, very basic. We won’t go as far as to specify individual days per month. That’s beyond the scope of this article. Let’s keep it simple.

As you can see, the Timesheet object descends from the Entity base class.

public abstract class Entity
{
    public ObjectId Id { get; protected set; }
}

Nothing special here, it just contains one property, namely the ObjectId that comes with each document in a MongoDB collection. Check out the post “An Introduction to MongoDB” for more information if required.

I used Web API to create a TimesheetsController.

public class TimesheetsController : ApiController
{
    private readonly MongoDatabase _mongoDb;
    private readonly MongoCollection<Timesheet> _repository;

    public TimesheetsController()
    {
        var connectionString = 
          ConfigurationManager.AppSettings["MongoDBTimesheets"];
        _mongoDb = MongoDatabase.Create(connectionString);

        _repository = _mongoDb.GetCollection<Timesheet>(
          typeof (Timesheet).Name);
    }

    //...
}

When an instance of the TimesheetsController is created it establishes a connection to MongoDB and creates a repository (MongoCollection) for our timesheets.

The controllers supports the default HTTP verbs:

GET: Retrieve all (or one) timesheet
POST: Add a timesheet
PUT: Update a timesheet
DELETE: Delete a timesheet

For example:

// GET /api/timesheets/4fd63a86f65e0a0e84e510de
[HttpGet]
public Timesheet Get(string id)
{
    var query = Query.EQ("_id", new ObjectId(id));
    return _repository.Find(query).Single();
}

A very basic implementation of a REST API that uses MongoDB to persist its resources. Check out the source code if you are interested in seeing how the other HTTP verbs are implemented. A bit of Web API knowledge is required though, but there are plenty of good tutorials on that topic available.

Remark: If you download the code you’ll notice that I use these two entities as the actual models of the MVC app. They are decorated with some data annotations and JSON.NET serialization attributes. You can split this up if you want to, to avoid any dependencies, and create your own dedicated models and entities. I just want to keep the project as simple as possible. The main purpose is to demonstrate Knockout.js.

Data

We’ll be demonstrating the data binding features of Knockout in a bit, but in order to bind some data, we actually need some data. So place the following code in your Index action of the HomeController and fire up the site.

var mongoDb = MongoDatabase.Create(ConfigurationManager.AppSettings["MongoDBTimesheets"]);
var repository = mongoDb.GetCollection<Timesheet>(typeof(Timesheet).Name);
var timesheets = new List<Timesheet>
{
    new Timesheet { FirstName = "Christophe", LastName = "Geers", Month = 8, Year = 2012},
    new Timesheet { FirstName = "Ruben", LastName = "Geers", Month = 8, Year = 2012 }
};
foreach (var timesheet in timesheets)
    repository.Insert(timesheet);

This will populate the Timesheet collection with a couple of timesheets. Feel free to add as many as you like. Just delete the code after you are done. Voila, we’ve now got some data we can work with.

A Simple List with Knockout.js

OK, we’ve got our skeleton application up and running. Let’s display a simple list of timesheets using Knockout.js. Open up the Index.cshtml file in Visual Studio and add the following HTML to render a basic table.

 <table id="timesheets" class="table table-striped table-hover table-condensed">   
<thead>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Month</th>
        <th>Year</th>
    </tr>
</thead>
    <tbody>
    </tbody>
 </table>

This renders a basic table, using some bootstrap CSS, which has one row to display the column captions.

The actual rows containing the timesheets aren’t being rendered yet. We’ll get to them soon.

We now need to create a view model for our page. Add the following JavaScript at the bottom of the index.cshtml file.

<script type="text/javascript">

$(function () {
    ko.applyBindings(viewModel);
    viewModel.loadTimesheets();
});

var viewModel = {
    timesheets: ko.observableArray([]),
    
    loadTimesheets: function () {
        //...
    }
};

</script>

Here you declare a view model which has one property, timesheets, which is an array. Using Knockout you instruct the application to observe this array.

timesheets: ko.observableArray([])

This instructs Knockout to monitor the array for any changes. If you add or remove elements from the array then Knockout will automatically update any UI elements bound to this array.

Using jQuery you instruct Knockout to bind the view model (viewModel) to the page using the ko.applyBindings(viewModel) call. Once bound you instruct the view model to load the timesheets (viewModel.loadTimesheets()).

Let’s bind the rows of our table to this array. Replace the <tbody> tag of the table with the following HTML.

<tbody data-bind="foreach: viewModel.timesheets">
    <tr>
        <td data-bind="text: firstname"></td>
        <td data-bind="text: lastname"></td>
        <td data-bind="text: month"></td>
        <td data-bind="text: year"></td>
    </tr>
</tbody>

Notice the data-bind attribute on the row and cells. This is a HTML5 data- attribute used by Knockout to bind your data to DOM elements. First your instruct Knockout to render a row for each timesheet in the view model’s timesheets array.

When a row is being rendered, the context switches from the view model to an individual timesheet object. Hence you can bind each cell of a row to the properties of a timesheet.

Timsheet object? This is the type of object we’ll eventually add to the timesheets observable array. Let’s define the object in JavaScript.

function timesheet(timesheet) {
    this.id = ko.observable(timesheet.id);
    this.firstname = ko.observable(timesheet.firstname);
    this.lastname = ko.observable(timesheet.lastname);
    this.month = ko.observable(timesheet.month);
    this.year = ko.observable(timesheet.year);
}

A very simple JavaScript object, which initializes 5 properties (id, firstname, lastname…etc.) based on a timesheet object we pass into its “constructor”. Now let’s complete the loadTimesheets() function of our view model.

loadTimesheets: function () {
    var self = this;
    $.getJSON(
        '@Url.RouteUrl("DefaultApi", new { httproute = "", controller = "timesheets" })',
        function (timesheets) {
            self.timesheets.removeAll();
            $.each(timesheets, function (index, item) {
                self.timesheets.push(new timesheet(item));
            });
        }
    );
}

A single $.getJSON call to our Timesheets API controller. This will perform a GET request and thus will be handled by the Get(…) method defined on the TimesheetsController. It will retrieve all of the timesheets and return them as JSON data.

[{"firstname":"Christophe","lastname":"Geers","month":7,"year":2012},
 {"firstname":"Ruben","lastname":"Geers","month":8,"year":2012}]

Once we receive this data we foreach over it and add an object to our observed array for each timesheet. If you refresh the page now you’ll notice that Knockout automatically rendered a row for each of our timesheets and that each individual property is bound to its respective cell.

Nice huh? That concludes the first part of the series on Knockout.js. In the next part I’ll start where we left off and show you how you can add timesheets using Knockout.js and Twitter Bootstrap’s modal.

You can download the source code accompanying this article from the download page. If you have any questions or suggestions please drop me an e-mail or submit a comment.

Filed under: ASP.NET MVC, C#, Knockout.js

]]> http://cgeers.com/2012/10/06/single-page-application-with-knockout-js-part-1/feed/ 12 cgeers Knockout.js Timesheets knockout2 DataBound Table An Introduction To MongoDB http://cgeers.com/2012/09/29/an-introduction-to-mongodb/ http://cgeers.com/2012/09/29/an-introduction-to-mongodb/#comments Sat, 29 Sep 2012 11:16:56 +0000 Christophe http://cgeers.com/?p=4380 ]]> Introduction

MongoDB

Next up, after GitHub and Bootstrap, in the session I presented last month during a company trip, is MongoDB.

MongoDB is a NoSQL database, instead of storing data in tables, it stores structured data in JSON-like documents, also known as BSON (Binary JSON).

This article isn’t about NoSQL, it just shows you how you can quickly set up MongoDB and work with it in a .NET environment. Let’s walk through the necessary steps to get MongoDB up and running.

Table Of Contents

Introduction
Installation
Run as Windows Service
MongoVUE
MongoDB C# Driver
Driver in Action

Installation

Once you’ve downloaded MongoDB for Windows (32 or 64-bit), extract the archive to C:\mongodb (or another drive / directory).

Notice the bin subdirectory. MongoDB is self-contained and does not have any other system dependencies. You can run it from any folder you choose.

MongoDB requires a data folder to store its files. Start a Command Prompt and execute the following commands:

cd \
md data
md data\db

You can place the new data directory on any drive (or in any subdirectory) you want. To start MongoDB, execute the following command from the Command Prompt:

c:\mongodb\bin\mongod.exe

Top of page

Run as Windows Service

Using this setup you have to manually start MongoDB each time you reboot your PC. This is a bit inconvenient, but it works. If you don’t want to do this, then you can run MongoDB as a Windows Service. This way it will automatically be started on each reboot.

Open a Command Prompt (Run as Administrator) and execute the following commands:

md c:\mongodb\log
echo logpath=c:\mongodb\log\mongo.log > c:\mongodb\mongod.cfg
c:\mongodb\bin\mongod.exe --config c:\mongodb\mongod.cfg --install
net start MongoDB

First you create a new folder inside the mongodb folder called “log”. The second command creates a MongoDB configuration file and instructs it to store its log files inside the newly created folder. Next you install MongoDB as a Windows service. Last, but not least you start the service.

If you now open the Services app, you should see the Mongo DB service listed.

Be sure to check that the startup type is set to Automatic. If not, open the service’s properties and change it.

MongoVUE

There are a couple of tools out there that allow you to manage MongoDB. Personally I prefer MongoVUE. It is an easy to use desktop application for Windows. There is a paying version (35$) and a free version. The free one has fewer features, but for our purpose it more than suffices. Go ahead and download it.

Remark: During the installation process be sure to allow the Windows Firewall exception.

When you start MongoVUE it shows you a list of available connections.

We need to add one for our localhost development environment. Click the + button and enter the following data:

Name: localhost
Server: localhost
Port: 27017

After you’ve established a connection you can use the Database Explorer in the lefthand pane to navigate through your MongoDB databases. By default you’ll only see one database called local which doesn’t contain any collection (sort of like tables in a RDBMS).

No need to create them manually, let’s write some code to do that.

MongoDB C# Driver

Start Visual Studio and create a new blank solution called MongoDB. Next add a Console Application “Timesheets” to it. Your solution structure should resemble the following screenshot:

In order to work with MongoDB in .NET you can use the MongoDB C# driver developed by the creators of MongoDB (10gen). The driver is available as a NuGet package. At the time of writing it is at version 1.6.

Go ahead and install the NuGet package.

PM> Install-Package mongocsharpdriver

We’re now ready to start working with MongoDB.

Driver in Action

Let’s see the driver in action. First we setup a connection.

const string connectionstring = "mongodb://localhost/my_first_mongodb_db";
var database = MongoDatabase.Create(connectionstring);

Now add a simple class called Person to the project.

public class Person
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
}

We’ll be storing instances of this class in a MongoDB collection. But first we’ll need to obtain a MongoCollection instance. Each collection has a name, here we’ll use the type name of Person, but you can use any name you like.

 var collection = database.GetCollection<Person>(typeof (Person).Name);

Remark: Notice the generic parameter type Person passed to the GetCollection(…) method. Here we specify that this collection will be working with the Person type.

Let’s create a new instance of Person and add it to the MongoDB collection.

var person = new Person
{
    FirstName = "Bruce",
    LastName = "Wayne"
};

collection.Insert(person);

Compile and run the application. Afterwards open MongoVUE and check out the Database Explorer. You’ll notice that a new database called “my_first_mongodb_db” has automatically been created for you.

It contains one collection called Person and this collection contains one document which represents the instance we inserted into the collection.

Notice that although our Person class does not contain an Id property MongoDB automatically assigned an _id (ObjectId) to the newly created document. Almost every MongoDB document has an _id field as its first attribute. ObjectId is the most common type used for it. _id must be unique for each document in a collection.

ObjectId is a 12-byte binary value consisting out of:

4-byte timestamp (seconds sinds epoch)
3-byte machine id
2-byte process id
3-byte counter

Let’s add an Id property of type ObjectId to the Person class type.

public class Person
{
    public ObjectId Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
}

Copy the value of this _id in your clipboard. The value of your _id will of course be different. You can now use this value to retrieve a person from the Person collection.

var query = Query.EQ("_id", new ObjectId("5066d3e332eb55739e8ac5a3"));
var person = collection.Find(query).Single();
Console.WriteLine(string.Format("{0} {1} {2}", person.Id, person.FirstName, person.LastName));

The output:

Want to update a person? No problem, just retrieve the person from the collection, modify the necessary properties and save it back to the collection.

person.FirstName = "Clark";
person.LastName = "Kent";
collection.Save(person);

As a last example let’s clean up after ourselves, let’s delete the person from the collection.

collection.Remove(Query.EQ("_id", new ObjectId("5066d3e332eb55739e8ac5a3")));

I hope you enjoyed this quick introduction to MongoDB. Be sure to check it out in more detail. It’s very easy to setup and use, has a great community…etc. Might come in handy when you don’t want to go through the hassle of setting up (and paying for an) SQL Server / Oracle database.

Filed under: C#, NoSQL, Programming

]]> http://cgeers.com/2012/09/29/an-introduction-to-mongodb/feed/ 0 cgeers MongoDB MongoDB extracted Windows Service Startup Type Available Connections MongoDB Connection MongoDB databases Solution Explorer MongoDB C# driver First MongoDB DB Person Collection Retrieve by ObjectId Getting Started with Twitter Bootstrap http://cgeers.com/2012/09/23/getting-started-with-twitter-bootstrap/ http://cgeers.com/2012/09/23/getting-started-with-twitter-bootstrap/#comments Sun, 23 Sep 2012 12:17:39 +0000 Christophe http://cgeers.com/?p=4295 ]]> Introduction

Twitter Bootstrap

Last week I wrote a post on how to get started with GitHub. It was part of a session I presented during a company trip early September. The second part of the session showed how you can quickly setup an ASP.NET MVC application and integrate Twitter Bootstrap into it.

For those not familiar with Bootstrap, it is a collection of CSS and HTML conventions for helping you out with typograpghy, forms, buttons, navigations…etc. Included as well is a collection of (optional) JavaScript extensions.

Table Of Contents

Introduction
Download
ASP.NET MVC Project
Bootstrapping a Site
Navbar Component
Responsive Design

Download

Download the latest version of Twitter Bootstrap. Go ahead and click the big download button. It’ll download one archive called bootstrap.zip. You can also customize the Twitter Bootstrap download. Choose the components, jQuery plugins and default look and feel. But for now, the default package will do.

The archive contains a folder called “bootstrap”, which in turn contains 3 sub-folders.

The css folder contains 2 cascasding stylesheets:
- bootstrap.css (+ bootstrap.min.css)
- bootstrap-responsive.css (+ bootstrap-responsive.min.css)
The js folder contains 1 JavaScript library:
- bootstrap.js (+ bootstrap.min.js)
The img folder contains 2 images:
- glyphicons-halflings.png
- glyphicons-halflings-white.png

As you can see both a debug and a minified version of the stylesheets and JavaScript library have been included. The glyphicons-halflings.png image contains about 140 icons. The glyphicons-halflings-white.png is just a white variant of the icons. Bootstrap uses the icons from GLYPHICONS. They are referenced in the stylesheets.

Remark: If you customize the download you’ll get the same files, but the bootstrap.css and bootstrap-responsive.css have been merged into one file (bootstrap.css). The contents of the bootstrap-responsive.css files have been appended to the bootstrap.css file.

ASP.NET MVC Project

Integrating Twitter Bootstrap into an ASP.NET MVC site is a piece of cake. Let’s quickly iterate through the necessary steps. Start Visual Studio and create an new ASP.NET MVC 4 project (empty template), called TwitterBootstrap. Afterwards you should see the following files in your Solution Explorer.

Extract the bootstrap.zip you downloaded earlier and copy the css, js and image folders into the root of the web application.

Back in the Solution Explorer click the “Show All Files” button and include the 3 new folders into your project.

You also need to download the latest jQuery version. Save it in the js folder and include it in your project.

Bootstrapping a Site

The ASP.NET MVC project now includes all the necessary Bootstrap resources. Let’s create a page which contains a Bootstrap component.

Add a basic master layout (Views\Shared\_master.cshtml) to the project. Add a new folder called Shared to the Views folder and add a new view named _master to it.

A basic page containing some boilerplate HTML will be generated for you. Make sure the DOCTYPE declaration is set to the HTML 5 DOCTYPE as Bootstrap uses certain HTML 5 tags.

<!DOCTYPE html>

Include bootstrap.css (or bootstrap.min.css) and jQuery in the HEAD element.

<head>
    <title>Twitter Bootstrap</title>
    <link href="@Url.Content("~/css/bootstrap.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/js/jquery-1.8.2.min.js")" type="text/javascript"></script>
</head>

Just before you close the BODY element include the bootstrap.js (or bootstrap.min.js) file.

<body>
...
<script src="@Url.Content("~/js/bootstrap.min.js")"></script>
</body>

Alright, we’ve got a basic master layout now. We need to add at least one page. Add a new controller, HomeController, to the Controllers folder. Make sure the controller has one actoin method called Index.

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
}

Next add a new folder called Home to the Views folder and add a view named Index into this new folder. When creating the view select the _master.cshtml page as its master page.

OK, one remaining task. You’ve got to add the @RenderBody() method somewhere on the _master.cshtml page in order to render the Index view.

For example:

<body>
    <div>
    @RenderBody()    
    </div>
    ...
</body>

If you compile and run the project you should get the following output:

Navbar Component

Now we can finally start using Twitter Bootstrap. Let’s demonstrate it using Bootstrap’s Navbar component.

Just copy the following HTML directly below the BODY’s opening tag in the _master.cshtml file.

<div class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <button type="button" class="btn btn-navbar" 
                    data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="brand" href="#">Euricom</a>
            <div class="nav-collapse">
                <ul class="nav">
                    <li class="active"><a href="#">GitHub</a></li>
                    <li><a href="#">Bootstrap</a></li>
                    <li><a href="#">MongoDB</a></li>
                    <li><a href="#">Knockout</a></li>
                    <li><a href="#">AppHarbor</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

It’s just a div containing a list of menu items. A couple of Bootstrap CSS classes are used here (navbar, navbar-inner, brand, nav, active). Bootstrap takes care of the rest and turns into a beautiful navigation bar. Go ahead and run it.

Bootstrap contains a a chuckload components, JavaScript plugins…etc. which you can readily use. Just check out the Twitter Bootstrap site to discover them.

Responsive Design

Just one last thing I want to address is the responsive design of Bootstrap. If you run the web application now and resize the browser to a small size you’ll get the following effect:

Readable, but not really a nice effect. Let’s remedy this. You only need to do one thing to achieve this. Include the bootstrap-responsive.css (or bootstrap-responsive.min.css) file just below the bootstrap.css link in the HEAD section.

<link href="@Url.Content("~/css/bootstrap-responsive.css")" rel="stylesheet" type="text/css" />

Refresh the page.

The menu items have been hidden (collapsed). Instead a button is shown. You can click this button to toggle the menu items.

Very easy if you quickly want to create a site which renders nicely on a desktop, tablet or smart phone.

If you take a look at the HTML code for the navbar you’ll notice that it contains a button which is initially hidden if the browser window is large enough, but is shown once the viewport is too small too display all the menu items.

Notice the HTML5 data- attribute (data-toggle) on the button. The menu items on the other hand are contained within a div that has the css class nav-collapse attributed to it. Using this information Bootstrap knows it should hide the menu items and show the button once the viewport is too small.

Remark: If you want to include your own CSS file, it’s best to insert it between the bootstrap.css and bootstrap-responsive.min.css file to prevent the responsive part of Bootstrap from messing up your custom style.

I hope you enjoyed this quick introduction to Twitter Bootstrap. Be sure to check it out in more detail. It’s very easy and contains a ton of useful components, plugins…etc.

Filed under: ASP.NET MVC, C#, Programming, Twitter Bootstrap

]]> http://cgeers.com/2012/09/23/getting-started-with-twitter-bootstrap/feed/ 5 cgeers Twitter Bootstrap Bootstrap Archive ASP.NET MVC Project (Empty Template) Bootstrap Resources Include In Project jQuery Master Layout Index View Index Navbar Responsive Design Responsive Navbar Navbar button Getting Started with GitHub http://cgeers.com/2012/09/15/getting-started-with-github/ http://cgeers.com/2012/09/15/getting-started-with-github/#comments Sat, 15 Sep 2012 11:28:01 +0000 Christophe http://cgeers.com/?p=4236 ]]> Introduction

Been a couple of months since I got around to writing a new post for this blog…busy times. Just got back from a company team building event in Tunisia last weekend. During this event we held 6 sessions about various topics such as Web API (@JefClaes), Roslyn (@svenschelfaut), Solid…etc.

I gave a session about using various alternative technologies (read as: non Microsoft) to build a web application from scratch. These included:

So we’ve got everything from source control (GitHub), to layout (Bootstrap), database (MongoDB), client-side data binding / UI refreshes / … (Knockout) and deployment (AppHarbor).

Let’s discuss the first part in this article, namely GitHub. If you are already familiar with it, then you won’t learn anything new here. However if you are a Windows developer and have never used Git, this might be an easy way to get familiar with it.

Table Of Contents

Introduction
Signup at GitHub
Your First Repository
Cloning
Working with the Shell
Shell Commands

Signup at GitHub

Of course you need to signup at GitHub. For open source it’s free. With a free account, you can create unlimited public repositories. Paying (and thus private repositories) range from 7$/mo to 200$/mo.

Once you’ve signed up and your account is in order, go ahead and download the GitHub for Windows client. It’s the easiest way to use Git on Windows.

The installation is straightforward. Wizard-style, click next, next, next…etc. After you’ve started the application log in using your GitHub credentials. If you are familiar with Zune you’ll recognize the UI design.

On the lefthand side you see two categories, local and github. The local category lists the repositories that you’ve copied (or cloned in git terms) to your PC. The github category lists the repositories that you’ve stored remotely on GitHub. As it stands now we don’t have any local or remote repositories.

Your First Repository

Let’s create our first repository. I usually do this via the GitHub site. Just go to the main page, you’ll find a “New repository” button somewhere on the righthand side.

Name the new repository “HelloWorld” and click “New repository”. You’ll be redirected to a new page where you’ll have to specify a few details about the new repository.

You need to enter the following data:

Repository name (HelloWorld)
Description (optional)
Public or Private (only available if you have a paid account)
Initialize the repository with a README file
Specify a .gitignore file

Most of these settings are-self explanatory. Make sure you specify a .gitignore file for the programming language in which your application will be written. Obviously I opted for C# here.

Using the .gitignore file you can specify the file types you do not wish to include in the repository (binaries, ReSharper files, archives…etc.). I always keep a .gitignore file for C# laying around that includes most of the file types that I want to ignore. You can download it here:

https://dl.dropbox.com/u/40603470/.gitignore

Once all the details have been filled out go ahead and click on the “Create repository” button. Once the repository has been created you’ll see that it contains two files, namely a README.md and the .gitignore file. Using the Web UI you can directly edit the .gitignore file and copy/paste the contents of my C# .gitignore file. Go ahead and do so if you want.

Cloning

Alright, you’ve now created your first remote repository. Time to clone it to your local hard drive. First you need to specify a default storage directory. Go back to the GitHub Windows client and select “Tools > Options”. Specify your default storage directory and click Update to save the settings.

Back in the main screen select your account under the “github” category. You’ll get a list of your remote repositories. Select the HelloWorld repository, right click it and select the Clone option. The remote repository will now be cloned to your local hard drive.

The remote repository is now cloned to your local storage directory. You should see a HelloWorld directory, that contains two files (README.md & .gitignore) and also a hidden .git folder.

Working with the Shell

Up until now we’ve been using the GitHub site and the Windows client to interact with GitHub. The rest of the work will be done using the git shell or for Windows users the PowerShell that is installed with the Windows client. You can always change the default shell in the options section.

I’m used to working with the PowerShell, so let’s stick with that one for now. Basically I only use the Windows client to clone my remote repositories. The rest of the git interaction is done via the shell. You can quickly open a shell for a repository by selecting the local repository in the Windows client, right-clicking on it and selecting the option “Open a shell here”.

Voila, you’ve now opened a shell for the HelloWorld repository. As you can see in the screenshot below you’re currently located on the master branch of the repository.

Shell Commands

Let’s learn the basic commands you can issue in the shell.

git status

Use “git status” to query the state or your project. Right now we have a clean working directory as we’ve changed nothing.

Let’s add a file called “helloworld.txt” to the working directory.

If you run the “git status” command again, you’ll get the following result.

Git noticed you’ve added one new untracked file (helloworld.txt).

git add

To have git track the new file you need to use the “git add” command.

If you change a file that’s already being tracked you also need to “re-add” it using the “git add” command. You can add each new (or changed) file manually or you can use the shorthand command “git add .”. This will add all the new / changed files in one go.

git commit

Let’s make our first commit. When committing something in git you are always required to enter a comment to describe your commit. Luckily it’s not optional. It’s still up to you to enter a good commit message. “Fixed bug” or “So my boss wanted this button…” are not good example of commit messages.

git push

If you perform the “git status” command, you’ll see that you have a clean working directory once again. But if you check the commit history on your remote repository using the GitHub site you won’t find the commit anywhere. That’s because all the commits happen locally. You need to issue the “git push” command to effectively push your local commits to your remote repository.

If you check the commit history now, you’ll see that your local commits have been pushed to the remote repository.

git pull

What if someone else pushed commits to the remote repository and you are working on a outdated local version? Easy, just open the shell and issue the “git pull” command. This will fetch from a remote repository and try to merge the changes into the current branch.

You can try this by first editing the helloworld.txt file using the GitHub site. If you then issue the “git pull” command git will merge the changes into your local repository.

I hope you enjoyed this quick introduction to GitHub / Git. If you want to learn more about the git command-line interface, check out the Git Reference. In the next post I’ll discuss how you can quickly get a basic site up and running using Twitter Bootstrap. Until then, happy coding.

Filed under: C#, GitHub

]]> http://cgeers.com/2012/09/15/getting-started-with-github/feed/ 1 cgeers Octocat GitHub for Windows New repository Repository Details HelloWorld repository Default storage directory Clone repository Local repository Default shell Open a shell here HelloWorld master branch git status New file Untracked file git add git commit git push Commit history git pull SkyDrive: Listing Folders and Files http://cgeers.com/2012/05/01/skydrive-listing-folders-and-files/ http://cgeers.com/2012/05/01/skydrive-listing-folders-and-files/#comments Tue, 01 May 2012 17:56:41 +0000 Christophe http://cgeers.com/?p=4198 ]]> Introduction

Live SDK

The previous article, Getting Started with the Live SDK: Authorization, shows you have to request a user’s permission to access parts of their Live ID, including SkyDrive.

Time to take a closer look at what we can do with the REST API and SkyDrive. Listing a user’s folders and files stored in his SkyDrive seems like as good as any place to start.

Table Of Contents

Introduction
Scopes
Folders, Albums, Files, Photos, Videos…
Listing Folders
Other Content Types
Folder Contents

Scopes

When the user authorizes your application you can specify the scopes to which you want access. Their profile, work information, postal addresses…etc. The list goes on, you can find it here:

http://msdn.microsoft.com/en-us/library/live/hh243646

If you want to list the folders and files of the user’s SkyDrive account you need to make sure you request access for the following scopes:

wl.skydrive: Read access to a user’s files stored in SkyDrive.
wl.photos: Read access to a user’s photos, videos, audio, and albums.

So let’s quickly generate a new access token:

var uri = "https://login.live.com/oauth20_authorize.srf";

var authorizeUri = new StringBuilder(uri);

authorizeUri.AppendFormat("?client_id={0}&", "your_client_id");
authorizeUri.AppendFormat("scope={0}&", 
    "wl.signin%20wl.photos%20wl.skydrive");
authorizeUri.AppendFormat("response_type={0}&", "token");
authorizeUri.AppendFormat("redirect_uri={0}", 
UrlEncode("http://redirect_uri.com"));

Remark: Each scope value needs to be separated by a space (%20). For brevity’s sake I’ve put them in there directly.

The user will asked to grant the necessary permissions:

Permissions to which you already have access will not be listed again. Need more information on authorizing your application? Check ouf the first article.

When the user authorizes your application you will be redirected to the URL you specified and it will contain an authorization token. Get it. Even if it is ridiculously long.

Folders, Albums, Files, Photos, Videos…

If you take a look at the REST reference you’ll find a couple of objects connected to SkyDrive such as Folder, Album, File, Photo, Video…etc. Most of them share a lot of properties, so let’s create a base class for them.

[JsonObject(MemberSerialization.OptIn)]
public class FileSystemInfo
{
    [JsonProperty(PropertyName = "id")]
    public string Id { get; set; }

    [JsonProperty(PropertyName = "name")]
    public string Name { get; set; }

    [JsonProperty(PropertyName = "created_time")]
    [JsonConverter(typeof(IsoDateTimeConverter))]
    public DateTime CreatedTime { get; set; }

    [JsonProperty(PropertyName = "type")]
    public string Type { get; set; }

    //...
}

I’ve not listed all the properties here, there are too many. Check out the REST reference, compare the objects and add the common properties. The JSON.NET attributes will help us later when deserialing the response.

Photos have a couple of different properties. Let’s add those to a descendant class.

[JsonObject(MemberSerialization.OptIn)]
public class Photo : FileSystemInfo
{
    [JsonProperty("size")]
    public int Size { get; set; }

    [JsonProperty("when_taken")]
    public DateTime? WhenTaken { get; set; }

    [JsonProperty("location")]
    public Location Location { get; set; }

    //...
}

Again not all properties are listed. Check out the Photo Object if you want to add more.

The same goes for the Video object. I’ll not list it here, just check out the source code that comes with this article.

Did you notice the Type (string) property on the FileSystemInfo class? This type will tell us what type of object we are dealing with. Folder, photo, video…etc. It will come in handy when deserializing the returned data.

Listing Folders

To list all the folder of a user’s SkyDrive account you simply sent a GET request to:

https://apis.live.net/v5.0/me/skydrive/files

Just don’t forget to append the access token.

var requestUri = new StringBuilder("https://apis.live.net/v5.0/me/skydrive/files");
requestUri.AppendFormat("?access_token={0}", "access token");
var request = (HttpWebRequest)WebRequest.Create(requestUri.ToString());
request.Method = "GET";

The response will, as always, be JSON-formatted. Let’s deserialize it to an IEnumerable of Folder. But first add the following SkyDrive type to your project.

[JsonObject(MemberSerialization.OptIn)]
public class SkyDrive
{
    [JsonProperty(PropertyName = "data")]
    public IEnumerable<Folder> Folders { get; set; }
}

Now you can easily deserialize the list of folders.

var response = (HttpWebResponse)request.GetResponse();
using (var reader = new StreamReader(response.GetResponseStream()))
{
    var json = reader.ReadToEnd();

    var skyDrive = JsonConvert.DeserializeObject<SkyDrive>(json);

    foreach (var folder in skyDrive.Folders)
    {
        Console.WriteLine(String.Format("{0}: {1}", folder.Id, folder.Name));
    }
}

This will output all the folders in the user’s SkyDrive root.

Other Content Types

The previous example is a bit hopeful. Only store folders and you’ll be fine. No files please. They will be treated as folders.

To use the other content types (album, photo, video, file…etc.) you have to inspect the type property. Once you have the JSON response, parse it and inspect the returned data.

For example:

var json = JObject.Parse(reader.ReadToEnd());

var contents = new List<FileSystemInfo>();
foreach (var item in json["data"])
{
    var type = item["type"].ToString();
    switch (type)
    {
        case "photo":
            contents.Add(JsonConvert.DeserializeObject<Photo>(item.ToString()));
            break;

        case "video":
            contents.Add(JsonConvert.DeserializeObject<Video>(item.ToString()));
            break;

        case "folder":
        case "album":
            contents.Add(JsonConvert.DeserializeObject<Folder>(item.ToString()));
            break;
    }
}

Then you can list all the content types and use their specific properties.

foreach (var item in contents)
{
    Console.WriteLine(String.Format("{0} : {1}", item.Type, item.Name));
    if (item is Photo)
    {
        Console.WriteLine(String.Format("Size: {0} bytes", ((Photo) item).Size));
    }
}

Folder Contents

One last thing I want to address for this post is how to list a folder’s contents. Listing the folders of the root folder will not return the contents (files, subfolders…) of these folders.

However requesting the contents of a folder is very similar. Instead of sending a GET request to:

https://apis.live.net/v5.0/me/skydrive/files

You need to send a request to:

https://apis.live.net/v5.0/{folder_id}/files

Just replace {folder_id} with the ID of the folder for which you want to list the contents and you are set.

var uri = "https://apis.live.net/v5.0/{0}/files";
var requestUri = new StringBuilder(String.Format(uri, "your_folder_id"));
requestUri.AppendFormat("?access_token={0}", "your_access_token");
var request = (HttpWebRequest)WebRequest.Create(requestUri.ToString());
request.Method = "GET";

var response = (HttpWebResponse)request.GetResponse();
using (var reader = new StreamReader(response.GetResponseStream()))
{
    var json = JObject.Parse(reader.ReadToEnd());

    // Parse the JSON data here
    // ...
}

You can download the source code accompanying this article from the download page. If you have any questions or suggestions please drop me an e-mail or submit a comment.

Filed under: C#, Live SDK, Programming

]]> http://cgeers.com/2012/05/01/skydrive-listing-folders-and-files/feed/ 9 cgeers Live SDK SkyDrive Scopes SkyDrive Folders