Thursday, July 26, 2012

Visual Studio 2012 comes with a new small light-weight database named LocalDB\v11.0. You can find out the default database used by Visual Studio 2012 by checking out TOOLS >> Options… >> Database Tools >> Data Connections:

If you have a SQL2005 or SQL2008 database and wish to use it in a Visual Studio 2012 application, you should upgrade it to LocalDB\v11.0 format. Here’s what I did when I came across this predicament. I used the usual Northwind.mdf SQL2008 database for this post.

Step 1:

Step 2:

We will retrieve data from an oData source at odata.org. In “Solution Explorer”, right-click on References and select “Add Service Reference…”. Enter the address http://services.odata.org/Northwind/Northwind.svc then click on the “Go” button. After the service is found, give the Namespace the name “NorthwindServiceReference” then clock OK.

At this point a proxy to the service is created for us.

Step 3:

Open the “MainPage.xaml” document and paste the following XAML code inside of the “Grid” element:

The above markup produces a listbox control that will hold records from the “Categories” table in the Northwind database. We will display the CategoryID, CategoryName, and Description database columns in Green, Red, and Blue colors respectively just so that they are easily distinguishable.

Step 4:

Place the following declaration in MainPage.xaml.cs just before the constructor:

Friday, July 6, 2012

I am now a registered community speaker with INETA. If you are organizing a technology conference or a user group leader, you can make a request for me to come over and deliver a talk by clicking on the link below:

Tuesday, July 3, 2012

In my previous post I demonstrated how one can easily render data on the client side from the Categories table in the Northwind database using KnockoutJS. This post is a slight variation of my previous post whereby the source of the data is an oData feed originating from http://services.odata.org/Northwind/Northwind.svc.

Pre-requisites:

Visual Studio 2010

MVC 3.0

NuGet

KnockoutJS

DataJS

Step 1:

Start a new New Web Site project in Visual Studio 2010 using the ASP.NET Empty Web Site template.

Step 2:

In Solution Explorer, right-click on the top node and select “Manage NuGet Packages …”.

Step 3:

Enter “knockout” in the search field on the top right-hand-side of the next screen. Select “knockoutjs” then click on the “Install” button.

Step 4:

In addition to knockoutjs, we will be using other JavaScript libraries jQuery and DataJS. DataJS facilitates access to oData. Therefore, repeat Step-3 for jQuery and DataJs libraries.

Ensure that the jQuery, DataJs and KnockoutJs libraries are installed into your project under the Scripts folder as shown below:

Step 5:

Add a new page named “Default.htm” to your website.

Open the Default.htm file. Drag and drop the JavaScript files jquery-1.7.2.js, knockout-2.1.0.js and datajs-1.0.3.js from the Scripts folder into the Default.htm file just below the ending </title> tag. This produces the <script> tag pointing to the respective JavaScript files. The page should resemble the following:

The OData.read() function comes from the “DataJS” library. Its first argument is an oData URL, and the second argument is a callback function that is called once a response is received from the server. Notice that the oData URL contains “$format=json” so that data returned from the service is in JSON format.

The callback function reads the JSON data encapsulated in property data.results into the categories property of the KnockoutJS viewModel. Finally, the viewModel is bound to the view with the function call ko.applyBindings(viewModel).