Entity Framework Core 1.0 – Speed up the retrieval of large data sets with .AsNoTracking()

If you are experiencing performance issues with Entity Framework Core 1.0 when you try to include related objects in your LINQ and lambda expressions on record sets of just a few thousand records, (More about Lazy and Eager Loading here) then check out these examples on how to improve it. Of the many ways, the best way that I have found to negate those performance problems and to optimize your requests is by using .AsNoTracking()

What is AsNoTracking()
When you use .AsNoTracking() you are basically telling the context not to track the retrieved information. Sure, this turns off a useful EF feature, but in many cases (like building an api in my case) this feature is unneeded.

In summary, Tracking is turned on by default and is great if you want to retrieve and save objects all within the same context. But if this is not required, you should use AsNewTracking(). AsNoTracking() decouples the returned records from the context, making your queries much faster!


IList<Player> playerList = db.Player.AsNoTracking().ToList()

Example with Joins

IList<Player> playerList = (from p in db.Player
                        select p)
                        .Include(p => p.Team)
                        .ThenInclude(t => t.League)


It is also worth noting that there is another way to decouple your objects from EF.  This other way can be done by adding .AsEnumerable().  That would look like this:

var decoupledList = from x in TableA<strong>.AsEnumerable()</strong>

Using Different Frameworks in your ASP.Net Core 1.0 App

This was written for the RC1 version of ASP.Net Core, but the idea of using multiple frameworks is still a core concept of ASP.Net Core 1.0. 
Also, Microsoft has recently stated that project.json will go away around the time the new version of Visual Studio is released. The idea is that settings will move back to the .csproj file to enable better integration with MSBuild in that time frame.

ASP.NET Core 1.0 can run on top of both ASP.NET 4.x and ASP.NET Core 1.0 frameworks.

This is REALY cool.  It can also be very confusing. Why would you want to use both?  Currently the Core 1.0 is limited and there are tools that we just dont have available to us yet.  Also you may be porting over old code or referencing a old class library that depends on specific resources built around ASP.NET 4.x and you dont want to go through the hassle of upgrading and rewriting everything.  Check out your project.json file to configure these options.

what is project.json?

New to ASP.Net Core 1.0! The project.json file defines your package metadata, your project dependencies and which frameworks you want to build for.  (relatively similar to ASP.NET 4x’s package.config).  You can remove or add a dependency from this file. When you do, you’re solution will automatically be updated to reflect those changes. You can also set what frameworks you want to app to compile across here!

what is DNX (.Net Execution Enviroment)

The DNX is a runtime environment that has everything you need to create a .Net application.  Next time you create a new core 1.0 project, what your essentially creating is a DNX project, whether its a web app or api.  From the ASP.Net Docs…

The RC1 release of .NET Core and ASP.NET Core 1.0 introduced DNX tooling. The RC2 release of .NET Core and ASP.NET Core 1.0 moved from DNX to the .NET Core CLI.

The majority of this post was written using .Net Core RC1.  BIG changes were made between versions RC 1 and RC 2.  Those are documented here.  The details in the following example are obsolete but the idea of incorporating multiple frameworks still exists.

Here is how project.json would look in an app relying on multiple frameworks


So as you can see, this give you a lot of flexibility.

  • Targeting older frameworks like dnx451 will be great porting over existing code and ensuring compatibility with other existing code or class libraries you may have build in the past.
  • Targeting the new dotnet5 or net core frameworks will let you take advantage of the new Core CLR. Thus setting you up with many new features as well as the ability to develop and run your apps on Windows, Linux, and OS/X!

Good luck!

Entity Framework Core 1.0 -Lazy Loading and Eager Loading

EF Core 1.0 does not support automatic lazy loading and eager loading related objects in the same way that EF6 did. Lazy loading does make data access easier and it cuts the code you have to write to reach that data significantly,  so its good to see that it is still listed as a priority item here on EF’s  Roadmap.

Until then, the way to eager load related objects, is by the .Include() and .ThenInclude() methods.  Here are two examples.

var leagues = db.Leagues
            .Include(l => l.Teams)
            .ThenInclude(t => t.Players)
var leagues = from d in db.Leagues.Include(l => l.Teams) select d;

Kendo UI Grid and AngularJS

Lets walk through some ways to set up a basic Kendo UI Grid with AngularJS. For a run down of more advanced Kend UI Grid properties, check out this post.

Ive been using Kendo UI on one of my more recent ASP.NET with AngularJS projects and I have been very happy with it.  They offer a wide variety of customizable controls, styles, and support, but the Control that I found most useful in their toolbox, and the one that makes this product worth it for me, is the Kendo Grid control.

There are alot of examples and documentation out there for this control, but I found it difficult to find a good example of how I envisioned utilizing it within our application.
– I wanted the grid to be reusable by different objects,for example a grid of teams and a grid of players.
– I needed it to have customizable rows and columns so that I can add buttons, checkboxes, images, and whatever else to the grid.
– I needed the grid to be de-coupled from any html elements. Mainly to be more DRY and to avoid the error message I describe below.

Many of the examples online do not meet those needs. Instead they direct you to create one similar to this

              dataSource: exampleData,
              height: 550,
              groupable: true,
              sortable: true

The problem: $(“#gridName”)
To us, this line is a design problem because it limits how this chunk of code can be re-used.
It also gives the browser a problem because the browser will throw an error if there is not a element with the name “gridName”.
So why not just name you grid or any other element? Well, what if i want to put 2 grids on one page? They both cannot have the same name, and with that, I loose the re-usability. Because of this I make it a point to never reference Element IDs and Element Names in my javascript, this ensures that there will be no “element does not exist” errors in my browser.

There are a few ways to solve this, but I will go over two of them here. In the end I ended up using example 2 in our application.

Example 1:

-Set your options and row template in the HTML
-Set your datasource in your angular controller

<kendo-grid k-data-source='kendoGridData'               
{ field: "Team_Name", title: "Team Name" },    
{ field: "Team_City", title: "City" },    
{ field: "Team_State", title: "State" }   ]'               

<!--Row Template-->
<div k-row-template data-uid="#: Team_ID #">
<tr data-uid="#: uid #">
<td><a href="../teams/details/#: Team_Name #">#: Team_Name #</a></td>
<td>#: Team_City #</td>
<td>#: Team_State #</td>


And then you set kendoGridData in your AngularJS code like this

$scope.kendoGridData = [example data here.......]

Example 2:

-Minimize what you put in the html.
-Set your options, rows, and datasource in your angular controller.

The minimal HTML

<div kendo-grid k-options="kendoGridOptions" ></div>

Setting everything else using AngularJS

$scope.kendoGridOptions= {
    dataSource: [Example Data Source....],
    sortable: true,
    groupable: true,
    selectable: true,
    pageable: true,
    filterable: true,
    columnMenu: true,
    columns: [
                             field: "Team_Name",
                             title: "Name",
                             filterable: true,
                             template: "&amp;amp;lt;a href='#'&amp;amp;gt; #: Team_Name # &amp;amp;lt;/a&amp;amp;gt;",
                         { field: "Team_City", title: "City" },
                         { field: "Team_State", title: "State" }

NuGet vs. NPM vs. Bower

Many of us .NET developers have spent the majority of our lives living in the cozy NuGet Package Manager bubble.  With the release of Visual Studio 2015 and NET5 we, Microsoft Devs, are introduced to 2 new package managers that really show how the love is shifting to the client side. Don’t worry NuGet fans, these new package mangers wont replace Nuget, instead they will provided exciting new support to the font end of our web applications.

Now, each of these package managers are designed with specific needs in mind and they each handle specific tasks better than the others.  Because of their different strengths, it is common to use all three of them within the same .Net web application.


What is it?   .Net developers are likely to be very familiar with this.  It is a package manager that mainly deals with .NET assemblies.

What it is good for?  It is nicely integrated within Visual Studio and great for loading .Net assemblies and libraries such as Entity Framework and ASP.NET Identity.

NPM (Node Package Manager)

What is it?  Designed specifically for node modules, but is also ideal for loading packages that are used during development time. Unlike Bower, NPM supports nested dependency trees. Meaning, NPM may actually load multiple versions of a component on your machine.

What it is good for?  Great for managing developer tools like Yeoman, Grunt, Gulp, and testing tools. Its nested dependency tree makes it great for avoiding dependency conflicts.


What is it?   Bower is optimized for front-end components. Bower uses a flat dependency tree, requiring only one version for each package, reducing page load to a minimum. So where NPM aims for stability, bower aims for a smaller/faster footprint.

What it is good for?  Created specifically for managing front-end components like javascript and css files.


Creating your first AngularJS – ASP.NET Core 1.0 application

This post will work off a project I created in a previous post – Creating Your First ASP.NET Core 1.0 Application from Scratch – and it will get you set up with AngularJS, Grunt, and Bower.

Add an NPM Configuration File and install Grunt and Bower

1. Right click the project and select Add > New Item. Select NPM Configuration File and name it package.json

2. Open up package.json and add the following 4 dependencies

    "version": "1.0.0",
    "name": "ASP.NET",
    "private": true,
  "devDependencies": {
    "grunt": "0.4.5",
    "grunt-contrib-uglify": "0.11.0",
    "grunt-contrib-watch": "0.6.1",
    "bower": "1.7.2"

What did we just do?

In our package.json file, we’ve indicated that we need three NPM packages named grunt, grunt-contrib-uglify, and grunt-contrib-watch. After the name of each package, we’ve specified the version of the package that we need.  Grunt and Bower are now installed in our project!


Add a Grunt Configuration File

1. Right click the project and select Add > New Item. Select Grunt Configuration File and name it gruntfile.js

What is Grunt?

Grunt is an open-source tool that you can use to build all of the frontend resources for your project. For example, you can use Grunt to compile your Less or Sass files into CSS. You can also use Grunt to combine and minify CSS and JavaScript files.

2.  Open up gruntfile.js and load your plugins by adding the following.


3. Next add your configurations to the grunt file

    uglify: {
        my_target: {
            files: {
                'wwwroot/app.js': ['Scripts/app.js', 'Scripts/**/*.js']
    watch: {
        scripts: {
            files: ['Scripts/**/*.js'],
            tasks: ['uglify']
grunt.registerTask('default', ['uglify', 'watch']);

4. Your gruntfile.js should now look like this


What did we just do?

We told Grunt to look for a javascript file named app.js and then, on build, we want it to minify (uglify) the app.js file and put it into our wwwroot  (we will create the app.js file later in this tutorial).

Add JQuery and Bootstrap to our project using Bower

What is Bower?

Bower is a package manager created by Twitter that is designed to support front-end development. You can use Bower to manage resources such as AngularJS, jQuery, and Bootstrap.

1. Right click the project and select Add > New Item. Select Bower Configuration File and name it bower.json

2. Open up bower.json and add JQuery and Bootstrap to its dependencies

    "name": "ASP.NET",
    "private": true,
  "dependencies": {
    "jquery": "2.2.0",
    "bootstrap": "3.3.6"

3. Your bower.json file and projectfolder structure should now look like this:



Wow, now we have Nuget, NPM, and Bower package managers in our project.  Why do we need all of them and what do they do?  Check out my blog post about that here – Nuget vs NPM vs Bower.


Installing AngularJS

1. Open up bower.json and add these AngularJS modules to its dependencies. For this project we will just be using the “angular package”, but I wanted to show here that “angular-resource” and “angular-route” are added in the same way.

  "name": "ASP.NET",
  "private": true,
  "dependencies": {
    "jquery": "2.2.0",
    "bootstrap": "3.3.6",
    "angular": "1.4.8",
    "angular-resource": "1.4.8",
    "angular-route": "1.4.8"

2. Save and compile the project and you will see that the above modules were added to you wwwroot folder and your Bower folder.  Should look like this:



Add Scripts

1. Right click the project and select Add > New Folder.  Name it “Scripts”.

2. Right click the Scripts folder and select Add > New Item…  Select JavaScript File and name is app.js

3.  This is the same app.js file that we look for in our gruntfile.js code a few steps above.  The next thing we will do is initialize the angular application.  To do this, add the following to app.js

var app = angular.module("myApp", []);

4. To have Grunt uglify app.js and add it to our wwwroot folter, do the following. Open up Visual Studio’s Task Runner Explorer (View > Other Windows > Task Runner Explorer)

5. Refresh the Task Runner Explorer.  You should see your Gruntfile.js there.  Drill down into Alias Tasks. Right click and run default.  This will minify (uglify) your app.js file and add it to your wwwroot.


Use static files

1. You want to tell your app to use static files like app.js and the other angular and bootstrap files. To do this open up Startup.cs and add this to the Configure(IApplicationBuilder app) method.


2. The method Configure(IApplicationBuilder app) should now look like this:


Writing some AngularJS!

1. Open up Views/Home/Index.cshtml

2. Replace what is in Index.cshtml with the following

<!DOCTYPE html>
<html ng-app="myApp">
    <meta name="viewport" content="width =device-width" />
    <title>AngularJS and ASP.NET 5 Example</title>
    @*add styles here*@
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <h2>Hello Home Index Page</h2>
    Name : <input type="text" ng-model="name">
    Hello {{name}}
    @*add javascript files here*@
    <script src="~/lib/angular/angular.js"></script>
    <script src="~/app.js"></script>

What did we just do?

In the above html we are loading Bootstrap, JQuery, AngularJS, and app.js.  We are then adding ng-app=”myApp” to the HTML tag. The ng-app directive defines an AngularJS application and its module is created in app.js.  If these angular terms are unfamiliar to you, please check out  http://www.w3schools.com/angular/angular_intro.asp for a more detailed explanation of the Angular code seen here.


You now have a working ASP.NET Core 1 AngularJS Application.

Check it out on GitHub