Cooking with .Net

Main menu

Since being introduced to AngularJS, I have enjoyed how robust the framework is, and provide a great layer of abstraction to enable client-side unit testing. Creating an abstract factory that takes in parameters isolates the client-side data access point and makes it easily testable.

My reason for writing this is that I was unable to find any sources that gave a full end-to-end example (let alone integrating a KendoUI datasource with AngularJS and OData). KendoUI’s datasource transports make it really simple to connect to an OData endpoint, but I want to Angularize my data calls.

Setup

To manage ContentType data, I used a KendoUI grid to handle all CRUD operations from a simple, intuitive interface. Using Entity Framework, MVC5, WebAPI2, I exposed an OData endpoint at ~/odata/ContentType.

Setting up an OData endpoint through WebAPI is out of the scope of this article and using VisualStudio 2013 makes it quite simple to create default WebAPI/OData controllers.

Injected is ngResource, ngRoute (for use later and routes currently commented-out), and ngSanitize. I’ve got a bit of debugging code near the bottom to show if there is a problem with loading ngResource.

Since we are not using KendoUI’s datasource default transport functions which take care the data type serialization/formatting, etc. for OData compatibility, we have to do this manually, and send this off to the abstract angular factory that uses the $http service. I could have also used ngResource for RESTful service interaction support.

It is important to know what the data looks like coming back from the OData service. In this case, we have to tell the KendoUI datasource to look in data.value, which contains a collection of objects. This is done in the schema/data section.

If your datasource is populating a grid you and you want to introduce efficient paging, you also need to inform the datasource where to find the total number of items – schema/total. This value is returned when the query string parameter $inlinecount=allpages exists.

With abstractFactory3 injected into our controller, I looked at the initialization process to be similar to object instantiation with an overloaded constructor that takes in one parameter – the OData route:

In this article, we have walked through the setup and configuration of a KendoUI grid, and datasource that is hydrated by a RESTful OData endpoint through AngularJS and have briefly discussed the complexity in using AngularJS over the default KendoUI data transports to manage data flow to/from a KendoUI grid control.

I suggest using Fiddler to view the data coming to/from the client and setting breakpoints at key areas, looking at the stack to see what is contained in kendo.data.transports, and when parameterMap is called.

In following SOLID principles, we want to isolate the work that each object (file, class, etc.) does. We have setup our page controller that manages all the Angular/JS lifting, and the abstract factory to manage the data flow. This factory can be re-used by any controller by simply passing in the appropriate OData endpoint path upon initialization within a controller, rather than duplicating this code in all of our Angular controllers.

I used SQL Server for my data store, and frequently spin up the SQL Server Profiler to see the queries being executed on the database server.

A word of caution in setting up OData endpoints. You can specify client-side or server-side data filtering. Remember – you don’t usually want to return all your data from the server then filter on the client-side.

As there may be more efficient ways of doing things, I welcome any feedback and suggestions.

This article details with how to perform audits on merging data – checking for duplicates, and adding other validation rules, using SSIS. This method is much more efficient than writing validation code in VB or C#.

From an SEO standpoint, page size matters, as well as the location of text on your page. When creating a site with VS .Net, we end up with a ViewState variable, which in some cases, can take up a whole lot of space near the top of the page. This could, in fact, dilute the contents’ importance on a given web page. In terms of page size, some search engines only cache the first 120kb of data.

This project contains the modified base code of the SubSonic v2.3 ORM, originally written by Rob Conery, that now supports SQL Server 2008 TVP’s (table valued parameters). This modification allows you to generate your full DAL, access and manipulate data in an object-oriented fashion, and most-importantly, now gives you the ability to pass large chunks of data to your stored procedures, in the form of DataTables, rather than bulk inserts.

A requirement to track client-side mouse tracking was presented in order to control PTZ (pan, tilt, zoom) functions of a camera.

This small JavaScript library binds to a DIV, where mouse events are tracked. In this particular case, a DIV layover was created to sit on top of a live streaming VLC video feed.

Background

In controlling a camera’s PTZ, there may be other requirements, such as iris control. I wanted to maximize the amount of available events originating from the mouse.

Tracked Mouse Events

The following is a list of events that can be monitored:

single left-click

double left-click

triple left-click

middle click

single right-click

double right-click

triple right-click

mouse wheel + (zoom in)

mouse wheel – (zoom out)

Upon depressing a button, if movement is detected, the delta X and delta Y values are tracked. This can be used as acceleration factors, or any other control requirements.

If used for acceleration values, it is also important to ensure that an additional stop value is sent when the button is released. For this reason, a boolean stopEventWithMovement[{what type of click}] can be set.

For example if stopEventWithMovement[“leftSingleClick”] = true:

left single-click with no movement – no delta (0, 0) is sent when button released

left single-click with movement – delta (0, 0) is sent is sent when button released

HTML Code

The client-side HTML code is quite simple. We simply wire up the jQuery, CSS, and mouseTracker.js references:

You can see where we setup the content containers. In this case, centerContent contains the video plugin along with the mouseLayer – the main DIV/CANVAS that we are binding to to track our mouse events.

Finally, we have some diagnostic information that is displayed:

CSS Code

The following CSS code is pretty self-explanatory. The #mouseLayer can be moved around the screen, to suit your own needs, and is visible as a light-red transparency area on the screen:

Enabling Auto Code Generation of Entity Framework Database First for use with a Generic Repository

Introduction

In a related post, we discussed accessing data through a generic repository with Entity Framework. Here, we will elaborate further on this and show how to modify the the Model.Context.tt file to auto-generate the refactored Model.Context.cs code for use with a generic repository.

Background

We want to modify the Model.Context.tt file as any changes we make to Model.Context.cs will be overwritten by Entity Framework Database First. If you wish, you can update the *.cs file directly, but be warned that those changes may be overwritten.

If you are not comfortable with overwriting the *.tt template, one suggestion I can make is to keep a separate copy of your code as a comment section in your project’s App.config file.

Updated Template (*.tt) Code

You can simply overwrite your Model.Context.tt code with the following and your Entity Framework data access will be compatible with a repository and unit of work pattern:

It is recommended that you are proficient with using .Net, dependency injection, MVC, Fiddler, and SQL Server Profiler – ie. good debugging skills, and can use the Kendo UI Grid extension for data display purposes. Otherwise, you can access the OData URL paths for viewing the raw data.

Introduction

As a part of this solution I created a generic queryable repository that I accessed Entity Framework Database First Entities through a repository and unit of work pattern: DOWNLOAD.

The starting point for this article was a requirement for a new UI POC, for which Kendo UI (http://www.kendoui.com/) was chosen. An existing SQL database was used as a data source and a RESTful OData (http://www.odata.org/) API endpoint was created for data access.

Explaining how to setup Kendo UI and what OData is are out of scope for this article.

The purpose of this article is to identify a clean-cut way of using OData and hierarchical data. One of the most commonly asked questions is, “How do I only return the rows needed from my database server, and not 100,000 records then filter?” (or variations there-of). This article will identify how to accomplish this.

We are using OData because it represents an efficient way of retrieving data, as requested directly from the client, without having to write specific associated controller action methods for things like paging and filtering.

For reads, the client sends query parameters that are received by a single Get() method. The query options are then handled on the server, and can be passed directly through to SQL Server (in this case, through Entity Framework).

All CRUD operations are quite simple through OData as well, but are out of scope of this article (other than Reads).

Note: If you don’t want to use Dependency Injection, and the generic repository included – simply use Entity Framework directly, I include a controller action method at the end of this article that allows you to do this.

Background

The basis for any data-driven application is the DAL, and it’s important to know how the data is accessed and make sure it is done efficiently, as such, I have worked on several projects including rewriting a popular ORM to make use of SQL Server’s TVP’s (http://subsonic23tvp.codeplex.com/).

I am always cautious when controls automatically “do things”, especially when it comes to data access.

I initially setup a Kendo UI Grid with a details grid containing users. Everything looked fine – I expanded a group, and was able to navigate through a list of associated users.

In using the browser console and SQL Server Profiler, I noticed that all users were being returned from SQL Server, then filtering occurring before it reached the client.

In another attempt, I noticed that all records were returned to the client, an the control was paging through the entire data set.

What I wanted to see was that SQL Server was only returning, say 10 records at a time and applying the filtering options.

For this article I am using and making reference to two tables USERS and USERGROUPS. Use this article as a reference for your own data sets.

I typically put a lot of comments in my code to help others understand exactly what’s going on. These comments usually include some alternate examples and helpful URLs for additional background details.

Not everything is described in the text of this article, and most-likely some of your questions will be answered by actually reading through the code itself – highly recommend it.

Solution Setup

Next, we see the differences between our two sets of control classes – we have two sets:

We will be using Entity Framework Database First to generate our database entities. However, for testability, we will first use a generic repository pattern and dependency injection / IoC to access our entities through EF.

Explaining how this works and why it is important is out of scope of this article, but I have included the Repository project as a part of the article’s code. The Repository uses generics and as such is not tightly-coupled on either end. Use freely as needed.

The repository project can be added to any .Net solution and referenced in your associated projects.