Chronicling the Adventure that is software Development

Author: jesse

What is Dependancy Injection?

The type of Dependency Injection ill be looking at today can be categorized as “Constructor Injection”. The idea is that we will inject the needed classes into the constructor, rather than creating or instantiating new objects, thus achieving loose coupling between objects.

When classes are designed with DI in mind, they are more loosely coupled because they do not have direct, hard-coded dependencies on their collaborators. This follows the Dependency Inversion Principle, which states that “high level modules should not depend on low level modules; both should depend on abstractions.” Instead of referencing specific implementations, classes request abstractions (typically interfaces) which are provided to them when the class is constructed. Extracting dependencies into interfaces and providing implementations of these interfaces as parameters is also an example of the Strategy design pattern.
– MS Docs

Dependency Injection is setup in the ConfigureServices method of Startup.cs
This ConfigureServices method is responsible for setting the things that can be injected into our constructors.

In this example I will focus on setting up DB Contexts. To learn more about registering your own services check out Microsoft’s docs here.

Creating a New ASP.NET Core Web Application

When you create a new ASP.NET Core Web Application with Authentication your ConfigureServices method and appsetting.json are set up automatically for you. This is a good place to start. You will see that AddDBContext() is in ConfigureServices and the connection string is stored in appsettings.json. It should look something like this…

This is great, and if it is a part of a new web application, then migrations is auto setup for you. But what if you have another database that you want to build a model for, set up its context, then inject into your controllers…

Injecting an existing DB and DB Context

If you would like to learn how to “reverse engineer” your database tables into a c# model, check out this post.

If you ran the linked above “scaffold” command to create your model and context, you will see that the connection string is set in the OnConfiguring() method or you new context.

At this point everything should build!!
We now have the new context setup and ready to inject into a controller. The last step is very easy, just add our new service to ANY controller’s constructor, here is simple example.

It was hard to find a good Angular and ASP.NET example of server side grouping, sorting, and filtering. Kendo does have good documentation, and examples, but filtering through all the noise can be exhausting. So here I will show how to setup some basic kendo grid page sorting and filtering.

First you will need to add the following to your app

Kendo.Mvc

kendo.aspnetmvc.min.js

Setting Up Your Server Side Code

We will use a kendo object called “DataSourceRequest” which will hold information about sorting, grouping, filtering, and ordering. When used with “ToDataSourceResult()” the list we are returning will automatically be filter down to the parameters that are defined in “DataSourceRequest”. Its pretty slick.

After you add the Query, you will then need to “Connect”. In Power BI Desktop, a warning message pops up letting you know this. Click “Edit Credentials”

The Access Web content pop-up will show a few different ways to set up you API credentials. For this example, we just needed to include a “Key” in the header. Since we already did that, all we have to do is press “Connect”.

Thats it! You should now be connected and see the results of the api call. You can “drill” into the results and select what information and object are important to you. As you do this, check out “Advanced Editor” again. You will see that slight changes are made to it as you configure the data you want.

Using ASP.Net Core 1.0 Visual Studio 2015 I will walk through how to create a Web API. We will add some basic documentation and hook it up with Swashbuckle and Swagger. The end result is gonna be AWESOME!

Setup the Project

Open up Visual Studio and create a new .Net Core.

Select the “Web API” template.

After the project has been created we need to tell it to export an XML document when it builds. This will allow us to generate a XML doc that will hold our swagger info and comments.
Right Click the Project > Select “Properties” > Select “Build” > check XML documentation file > Save

Setup Project.json and Startup.cs

Open up your project.json file. This will be new to you if you haven’t played with previous releases of vNext.

What is project.json?

Introduced in the first versions of ASP.Net vNext (which is now called ASP.NET Core), 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 dependencies from this file. When you do, youre solution will automatically be updated to reflect those changes. You can also set what frameworks you want your app to compile across here! Note that Microsoft has stated that project.json may go away around the time Visual Studio 15 is released. The idea with that move is that settings will move back to the .csproj file to enable better integration with MSBuild in that time frame.

Since we selected the Web API template, the core API dependencies and tools were automatically added to both these files when this project was created. So all we need to do is add the Swashbuckle dependency to the project.json file.- “Swashbuckle”: “6.0.0-beta902”

Next, open up Startup.cs. In the ConfigureServices method you will need to know the path to your xml comments file which will be automatically generated for you. This path will come from GetSwaggerXMLPath(). Make sure to add the correct xml file name, it will be named [project name].xml. You also will need to add the swagger service and configure a few properties as shown below:

You should now be able to see your Swagger page. Run the project and navigate to http://localhost:XXXXX/swagger/ui/index.html

Add Swag Documentation to your API controllers!

First lets quickly go over what Swagger and Swashbuckle are:

Swagger is a simple yet powerful representation of your RESTful API. With the largest ecosystem of API tooling on the planet, thousands of developers are supporting Swagger in almost every modern programming language and deployment environment. With a Swagger-enabled API, you get interactive documentation, client SDK generation and discoverability.

-swagger.io

Swashbuckle is basically, a implementation of Swagger for ASP.NET

In addition to its Swagger generator, Swashbuckle also contains an embedded version of swagger-ui which it will automatically serve up once Swashbuckle is installed. This means you can complement your API with a slick discovery UI to assist consumers with their integration efforts. Best of all, it requires minimal coding and maintenance, allowing you to focus on building an awesome API!

-Swashbucket git repo

Now, to get our shiny new Swagger UI to show documentation of our API lets open up ValuesController.cs and add a new method to play with its comments and attributes.

and if we try to pass it a non integer into this new endpoint we will get this:

Finished! Congrats!

There is still much to learn, I’d recommend checking out the dotNetConf videos for more .Net Core info. Also is should be noted that our project above just used the default response formatting which is JSON. The response data can be configured to things like XML by setting formatters in Startup.cs

After successfully running the above command, your project should now look something like this:

Run Auto Scaffold Command in Command Prompt (Second Option)

Another way to run these commands is through the Command Prompt. To run the scaffold command, open up your command prompt and navigate to the projects root folder. Then run a command that looks like this:

A quick walk through of ASP.NET Core 1.0 on how to set up a MVC application from a “Blank” project. Part 2, will demonstrate how to add Angular to your Core 1.0 App.

Create your web app!

Open up Visual Studio and select File > New > Project. If you have ASP.NET Core 1.0 or higher installed (here is the .Net Core Installation guide) you should see and exciting new category under Templates > Visual C# called .Net Core!

Setup Project.json

Open up your project.json file. This will be new to you if you haven’t played with previous releases of vNext.

What is project.json?

Introduced in the first versions of ASP.Net vNext (which is now called ASP.NET Core), the project.json file defines your package metadata, your project dependencies and which frameworks you want to build for. (relatively similar to ASP.NET 4.x’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 your app to compile across here! Note that Microsoft has stated that project.json may go away around the time the next 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.

To create a basic MVC app you will need to add the following dependencies to project.json:

“Microsoft.AspNetCore.Mvc”: “1.1.0”

“Microsoft.AspNetCore.StaticFiles”: “1.1.0”

“Microsoft.Extensions.Configuration.FileExtensions”: “1.1.0”

“Microsoft.Extensions.Configuration.Json”: “1.1.0”

And you will need to make sure “buildOptions: preserveCompilationContext” is set to true. After making these changes, your project.json should now look like this:

I just went the past year without using GitHub 😦 The projects I have been working on since then have relied only on TFS. This blog post is an attempt to re-remember how to publish and existing project (In my case, an ASP.NET Web App) and now that its written I wont have to re-remember it next time!

Getting Set Up

After you’re connected, navigate back to the Team Explorer’s Home page. Select “Settings”.

Next, enter your GitHub Username and Email. Also, set your default repository location. This is where your projects should be in order to publish them up to GitHub.

Publish a Project or Solution to GitHub

Create any project or solution you like, or open up and existing one. Either move or save your new project to the Default Repository Location that you entered above. For this example I’m going to create a new ASP.NET Web Application and I will save it to C:\WorkSpace\GitHub

Right click the Solution and select “Add Solution to Source Control”.

You should see this in the output window

Next, reopen Team Explorer and select “Sync”. You should see a few different option, since we are publishing to GitHub choose that option.

Enter some comments and then click “Publish”!

After you click “publish”, log into GitHub and you should see your project there!

Commit and Push changes

Open up your solution and make any change you want to it or any projects within it. Save those changes > Right-Click solution > select “Commit”
You should see the changes dialog, similar to below.
If you don’t see this, then go back to the Team Explorer and click “Changes”.

After entering some comments, select “Commit All”. You can also select “Commit All and Push”, but I’m going to split this up into two separate steps for this tutorial.

Next, let’s push this commit to our GitHub repository. To do this go to the Team Explorer and click “Sync”.

Check it out above, its your commit! Now just click “Push” to publish it to GitHub! That’s the last step. If you go to your GitHub page you should see your commit and its comments.

I want to go over some more advanced Kendo UI Grid settings when using Angular and when receiving a list of records in a JSON format. For some examples of setting up a simpler/basic Kendo Grid with Angular.js check out this blog post.

One of the best things about the Kendo UI Grid is how customization it is. But with great flexibility comes some complication. I’ve found it easiest to split my angular grid variables into 2 separate pieces:

The Kendo Data Source

The Kendo Grid Options

The HTML

Defining the Kendo Data Source

Add the following to your angular controller. You will see that we are dealing with an array of JSON objects. By default, the JSON object is treating each field as a string and so we will need to tell the data source which fields to define as numbers and dates.

What did we just do?

toolbar: [“excel”,”pdf”]: Here I am adding two buttons to the top of the grid. One to export the grid data as a excel spreadsheet and the other as a PDF. Just below the “toolbar:” property I am setting the file name and page properties of each export.

columnMenu: true – I like to have all of the search, sort, and filter actions tucked away inside a drop-down for every column. To do this set the “columnMenu” property.

filterable: {} – I only want to show a few filter options depending on the field type. It is within here that I set those filter operators.

column links – To have text in a column show up in the grid as a link, check out the “Record_Name” template above. This example displays the name, but creates a link based upon its “Record_ID”.

column dates – Check out the templates of “Created_Date” and “Start_Date” to see how to format dates javascript dates to ‘MM/dd/yyyy’. You’ll notice that I have to first check for a null date value and then convert it into a string otherwise the grid would display unwanted date information.

This post has been updated to reflect Core 1.0 RC2 which was release mid may 2016.

Getting Started

A full list of environment variables can be founder here.
In RC 1, the environment variables are set up in Properties > launchSettings.json.

What are Environment Variables?

“ASP.NET Core introduces improved support for controlling application behavior across multiple environments, such as development, staging, and production. Environment variables are used to indicate which environment the application is running in, allowing the app to be configured appropriately.” – from docs.asp.net

In short, its common and easy to set up different environments such as:

Development

Staging

Production

And these “environments” have “environment variables” that can affect what your application does during run-time. Further more, you can build logic into your application, instructing it to perform different behaviors based upon its “environment”.

The ASPNETCORE_ENVIRONMENT variable

The ASPNETCORE_ENVIRONMENT (formerly known as ASPNET_ENV) variable defines what environment you are running in, and if you have a startup class ending with this name then it will be call the configure method of that class instead of Startup.cs. e.g. StartupDEV if ASPNETCORE_ENVIRONMENT is equal to DEV

Startup.cs

To reference your hosting environment in Startup.cs you will need to inject IHostingEnvironment. IHostingEnvironment is needed because it contains a property name “EnvironmentName”. You can inject this into any method, but we want to inject it into the Startup() method.

Setting your Environment Variable and launchSettings.json

There are a few ways to set your Environment Variables. You can add the variable to your machine in your control panel under Advanced System Settings > Environment Variables (but you would have to do this to all of the places you run/test/develop) OR you can hard code some variable values in launchSetting.json for certain situations.

I prefer to do the latter for dev and staging.
The below example will set your ASPNETCORE_ENVIRONMENT to “Development” when running in Visual Studio, it will set it to “Staging” when published to a staging site. For production, if you have a system environment variable named ASPNETCORE_ENVIRONMENT (set to “Production”) wherever you host your production site, your app will then be set to “Production”.
Note: the variables them-self are case insensitive.

This post is based on EF Core 1.0 and it will be strictly about adding SQL Views to your Model and Data Context. If you are interested on how to connect your EF Core 1.0 project to a SQL Server DB then check out this other post about how to reverse engineer and scaffold your SQL Server DB.

The state of EF Core 1.0 and VS2015
Unfortunately, that nice UI you were used too that allowed you to connect and select the tables and views to be mapped out, does not yet exist. After setting up your project and project.json file you will run a script in the Command Prompt or in the Nuget Package Manager to connect and build out you EF model. Will look a lil something like this:

The above commands hook you up to your DB and creates a Model folder that contains all your newly generated classes and DataContext.cs. But what about my views!?!? Well, since your DataContext.cs is connected to your DB, you do technically have access to everything in that DB, including SPROCs and Views. These Views just dont get created for you and there is no real way to access them except through inline SQL or manually adding them. So lets manually add them together!

Create a new Class for your View

Your project should have a Models folder (if you did everything here). Right click that Models folder and select Add > New Item.. > Class

Also, note that the DataContext is a “Shared” class. So if you don’t want to re-write this code every time you run the update scaffold command, putting code like this Team_View code in a separate shared DataContext.cs file may be the way to go.

Thats It!
You now have access you your View! AND you now have a Class for that view! You can now call it from any lambda/LINQ query that your want.