Release management with different configurations

So Visual Studio Team Services now has this automatic deployment option, where you can checkin your changes in source control to have the application deployed to a development/testing/production environment automatically. 

But how do you cope with each environment's different configuration? Read on...

What we want

As you are developing locally you probably want to develop on a local database. The easiest way to do this is to have everything in web.config (I am using a web project as an example here, but things are similar for other project types). This way developers can quickly change things locally, for easy testing with different databases, and even see how things work with live (I hope cloned from production) data.

But when deploying to a test environment (and other environments such as production) you want to use a different web.config, preferably NOT containing any production secrets (like the connection string to the production database).

VSTS release management makes this very easy.

How To

Let's say that I have application settings and connection strings that I want to give a different value in development, QA and release:

    <add key="Secret" value="DeveloperSecret"/>
    <add name="DB" connectionString="DeveloperDB"/>

I have already created a Build definition in VSTS, and I am using it to initiate a release with VSTS release management.

In my release definition I have three environments, one for dev, QA and production.

For each environment, click on the ellipsis (...) button and choose Configure variable

Add variables who's key matches the key from appSettings (or name for connectionStrings)

Select your deploy to azure task in release management

Look for the File Transforms & Variable Substitution Options section and make sure you check the XML variable substitution checkbox.

This will make the deployment task replace any key in appSettings and connectionStrings with your variable values.

That's it!

Using Microsoft Fakes with mscorlib.dll

Microsoft Fakes is a tool that allows you to replace any method of any .NET class. This makes it ideal for testing untestable code, for example code that uses DateTime.Now in its implementation...

However when using Microsoft Fakes with mscorlib.dll, the assembly that contains DateTime, you will encounter an error Error CS0234:

The type or namespace name 'EventSourceCreatedEventArgs' does not exist in the 
namespace 'System.Diagnostics.Tracing' (are you missing an assembly reference?)

This actually should not be a problem, because it is actually a sign of something else: that you're faking too much (no pun intended :). Using Microsoft Fakes will generate a fake type for every type in the target assembly, which is very wastefull of resources. You should actually only fake the type you're testing.

Open the fakes file (for example mscorlib.fakes):

<Fakes xmlns="">
  <Assembly Name="mscorlib" Version=""/>
    <Clear />
    <Clear />
    <Add FullName="System.DateTime!" />

As you can see here, you add each type you want to stub/shim in the <StubGeneration> and <ShimGeneration> section.

For more information about this, you can find more documentation at

Using Razor outside of MVC for building custom middleware or other generation stuff

Recently I have been building some core middleware which involves generating some html from a collection of elements.

Writing code to generate html is no fun at all, so I decided to see if I could not use Razor outside of the normal MVC stack.

Simple answer: yes! 

I've published this as a package on (scroll down for sources):


Use razor to generate files outside of the normal MVC Controller/View chain, for example in your middleware, or for sending dynamic email messages.

All you need is a HttpContext.

To generate contents from Razor as a string

Start by creating a viewModel instance. The ViewModel is used to pass data to the Razor file, ViewData or ViewBag is not supported.

Create a Razor file, using the ViewModel's class as the @model:

@model TestRazor.Models.RazorViewModel

Your message: @Model.Message

Then call the RenderToStringAsync method (which is an extension method on HttpContext) passing the path to the razor file and the viewmodel. You will get the result back as a string.

var viewModel = new RazorViewModel { Message = "Generated from razor!" };
var contents = await HttpContext.RenderToStringAsync("~/Views/Home/Razor.cshtml", viewModel);

To generate Razor contents to the response stream

Start by creating a viewModel instance. The ViewModel is used to pass data to the Razor file, ViewData or ViewBag is not supported.

Create a Razor file, using the ViewModel's class as the @model:

@model IEnumerable<U2U.AspNetCore.NotFound.NotFoundRequest>

<!DOCTYPE html>
  <h1>Fix 404s</h1>
    <thead id="requestHeader">
        <th class="path">Path</th>
        <th>404 Count</th>
        <th>Corrected Path</th>
      @foreach (var request in Model)
        <tr class="requestRow">
          @if (!String.IsNullOrEmpty(request.FixedPath))
            <input type="text" />
            <a href='@string.Format("?path={0}&fixedPath=", request.Path)' class="fixLink">Save</a>

Then call the RenderToStringAsync method (which is an extension method on HttpContext) passing the path to the razor file and the viewmodel. The resulting razor content is written to the result stream.

var viewModel = tracker.NotFoundRequests.OrderByDescending(r => r.Hits).ToList();
await context.RenderAsync("~/Views/Shared/NotFound.cshtml", viewModel);


Sources of this package are available on github repository

Any bugs, remarks, etc... can always be sent to

Simpler checking of arguments with C# 7 throw expressions

Simpler checking of arguments with C# 7 throw expressions

C# 7 has made a simple and important change to C# throw statements. They are now expressions.

So what does that mean for you? It means that now you can check your arguments with a simpler statement.

One such recurring pattern is in the constructor of a class, where you get passed some mandatory dependency. This dependency cannot be null, and then needs to be stored. If the dependency is null, you want to throw an ArgumentNullException.

Here is an example in C# 6

if( context != null )
  throw new ArgumentNullException(nameof(context));
this.context = context;

Compare this with the C# 7 version:

this.context = context ?? throw new ArgumentNullException(nameof(context));

We assign the context field a value with the null-coalescing operator which takes the left side if it is null (and doesn't evaluate the right side). If the left side is null, it evaluates the right side, which throws an ArgumentNullException.

Way simpler and elegant!

Markdown taghelper


Markdown MVC6 taghelper

This taghelper will replace itself with markdown converted to html.

You can learn more about this handy syntax here:

You can choose between

  • Path to a markdown file on disk
  • Url to markdown contents
  • Embedded markdown

To convert a local markdown file to html:

<md path="~/md/">

To convert some markdown content from the internet use:

<md href="">

And of course you can simply embed markdown:

<md class="row">
  ## This is a test

  This is a test

  With some code


I you're interested in how this packages works, it is available on github at

Any bugs, remarks, etc... can always be sent to

Getting rid of "String based programming" style in dotnet core

String based programming

I really don't like the coding style of using strings instead of identifiers... For example in MVC you can redirect to another action using


However, using the string "Index" instead of the name of the method (an action typically corresponds to a method in MVC right?!) make your code harder to maintain. Renaming the method will not rename the string for example. That is why I like to use


However, this does not work with Controller names. Because of the way routing is implemented, using the full name of the controller confuses routing and you end up with an invalid Uri.

RedirectToAction(nameof(HomeController.Index), nameof(HomeController))

This problem is fixed by U2U.AspNetCore.Mvc.NameOf


This package updates Mvc6 to allows the use of the nameof() keyword in your views

For example, instead of using strings for the name of the controller and action

<a asp-controller="Home" asp-action="Index" class="navbar-brand">Index</a>

you can use nameof()

<a asp-controller="@nameof(HomeController)" asp-action="@nameof(HomeController.Index)" class="navbar-brand">Index</a>


All you need to do extra is to add a using to your _ViewImports.cshtml

@using WebApplication2.Controllers

and in Startup.ConfigureServices add a call to AddNameOf after the call to AddMvc.



I you're interested in how this packages works, it is available on github at

Any bugs, remarks, etc... can always be sent to

Building the quickstart with ASP.NET Core

When you start to explore angular 2, probably the best place to start is taking the quick start on

In this post I will show you how you can setup the project to use Visual Studio 2015 and ASP.NET Core, since the quick start from doesn't work as described with ASP.NET Core. Some of the changes are different conventions (putting the libraries in the wwwroot/lib folder for example), and some changes are because we will be using gulp...


I will give you step by step instructions on how to setup the project, explanations about why can be found on


Start by creating a new ASP.NET Core project in Visual Studio:


Click OK. In the next screen pick the Empty template.

Open project.json and add a dependency to the StaticFiles package:

"dependencies": {
  "Microsoft.NETCore.App": {
    "version": "1.0.0",
    "type": "platform"
  "Microsoft.AspNetCore.Diagnostics": "1.0.0",
  "Microsoft.AspNetCore.Server.IISIntegration": "1.0.0",
  "Microsoft.AspNetCore.Server.Kestrel": "1.0.0",
  "Microsoft.Extensions.Logging.Console": "1.0.0",
  "Microsoft.AspNetCore.StaticFiles": "1.0.0"

Save your changes so NuGet will install the package.

Open Startup.cs and add the StaticFiles middleware:

app.UseDefaultFiles(new DefaultFilesOptions
  DefaultFileNames = new string[] { "index.html" }

Now add a new JSON file to the project (next to project.json) called package.json:

  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "postinstall": "typings install",
    "typings": "typings"
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0-rc.5",
    "@angular/compiler": "2.0.0-rc.5",
    "@angular/core": "2.0.0-rc.5",
    "@angular/forms": "0.3.0",
    "@angular/http": "2.0.0-rc.5",
    "@angular/platform-browser": "2.0.0-rc.5",
    "@angular/platform-browser-dynamic": "2.0.0-rc.5",
    "@angular/router": "3.0.0-rc.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.5",
    "angular2-in-memory-web-api": "0.0.15",
    "bootstrap": "^3.3.6",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.12"
  "devDependencies": {
    "typescript": "^1.8.10",
    "gulp": "^3.9.1",
    "path": "^0.12.7",
    "gulp-clean": "^0.3.2",
    "gulp-concat": "^2.6.0",
    "gulp-typescript": "^2.13.6",
    "typings": "^1.3.1",
    "gulp-tsc": "^1.2.0"
Save this file to make visual studio do a npm install.

Add another JSON file called typings.json

  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160807145350"
Right-click the Dependencies folder and choose Restore packages. This will install the typings.
Now add a gulp configuration file (gulpfile.js):
var ts = require('gulp-typescript');
var gulp = require('gulp');
var clean = require('gulp-clean');
var destPath = './wwwroot/lib/';
// Delete the dist directory
gulp.task('clean', function () {
  return gulp.src(destPath)
gulp.task("scriptsNStyles", () => {
  ], {
    cwd: "node_modules/**"
var tsProject = ts.createProject('app/tsconfig.json');
gulp.task('ts', function (done) {
  //var tsResult = tsProject.src()
  var tsResult = gulp.src([
      .pipe(ts(tsProject), undefined, ts.reporter.fullReporter());
  return tsResult.js.pipe(gulp.dest('./wwwroot/app'));
gulp.task('watch', ['watch.ts']);
gulp.task('watch.ts', ['ts'], function () {
  return'app/*.ts', ['ts']);
gulp.task('default', ['scriptsNStyles', 'watch']);

Open Task Runner Explorer and run the default task (you might need to refresh it first).

This will setup a watch that will look for typescript (.ts) files in the app folder of your project, compile them and then copy them into wwwroot/app.

Time to add this app folder, so right-click your project, choose Add New Folder, and name it app:

In it add the TypeScript Configuration file (tsconfig.json):

  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "noEmitOnError": true,
    "noImplicitAny": false,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "moduleResolution": "node"
  "exclude": [

NOTE: If you don't like the compiler output to end up in your source folder you can actually use the outDir to put them somewhere else, for example:

    "outDir": "../wwwroot/app/"

Now add a new TypeScript file called app.component.ts:

NOTE: If you get compile errors, right-click the Node Dependencies folder and restore them.

import { Component } from '@angular/core';
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1>'
export class AppComponent { }
Add another TypeScript file called app.module.ts:
///<reference path="./../typings/globals/core-js/index.d.ts"/>
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
  imports: [BrowserModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
export class AppModule { }
Add another one called main.ts:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
Almost there...
Open wwwroot and look for (or create) the js folder.
Add a new javascript file in this folder called systemjs.config.js:
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
(function (global) {
  // map tells the System loader where to look for things
  var map = {
    'app': 'app', // 'dist',
    '@angular': 'lib/@angular',
    'angular2-in-memory-web-api': 'lib/angular2-in-memory-web-api',
    'rxjs': 'lib/rxjs'
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app': { main: 'main.js', defaultExtension: 'js' },
    'rxjs': { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  var ngPackageNames = [
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  var config = {
    map: map,
    packages: packages
This file differs from the one on in where it will look for things (lib instead of node_modules)...
Now add a html file under the wwwroot folder called index.html:
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/styles.css">
    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="lib/core-js/client/shim.min.js"></script>
    <script src="lib/zone.js/dist/zone.js"></script>
    <script src="lib/reflect-metadata/Reflect.js"></script>
    <script src="lib/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="js/systemjs.config.js"></script>
      System.import('app').catch(function(err){ console.error(err); });
<!-- 3. Display the application -->
And don't forget to add a .css style (web developers always have style right?!).
Create a css folder under wwwroot, and add a css file called styles.css:
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
body {
  margin: 2em;

Hit F5 to run your angular 2 web site. If all goes well you should see:


And if you want to learn a lot more about Angular 2, we have an excellent training on it!

Using nameof() in MVC6 razor views

C# 6 introduces the new nameof() operator, which allows you to embed the name of a class, method or property easily into your code without degrading to string-based programming... String-based programming is where you use strings, where it would be better to use code...

Razor is one of those places where there are too many strings. For example, using the new tag-helpers:

<a asp-controller="HomeController" asp-action="About">About</a>

A better, more maintainable way of doing this would be

<a asp-controller="@nameof(HomeController)" asp-action="@nameof(HomeController.About)">About</a>

You might ask why? Because, for example, renaming the About method will result in Visual Studio renaming the method in your Razor views too! And if you have a typo, the compiler will warn you. That is why!

However, out of the box MVC6 does not allow this. So I've written and published a NuGet package that allows you to use this nameof() operator in MVC6 razor views.

Simply add it to your project's dependencies in project.json:

"dependencies": {
  "U2U.NameOf": "1.0.0"

Add the namespace of your controllers to _ViewImports.cshtml:

@using <YourProject>.Controllers

Finally open Startup.cs and add a using statement:

using U2U;

and in the ConfigureServices method add :


Now open _Layout.cshtml and change all your archors to use nameof(...):

<a asp-controller="@nameof(HomeController)" asp-action="@nameof(HomeController.Index)">

You can also use this with the old-style Html helper methods:

@Html.ActionLink("test", nameof(HomeController.Contact), nameof(HomeController))

and also in code:

Url.Action(action: nameof(HomeController.About), controller: nameof(HomeController));

I hope you like it!

Next blog post will explain how it works.

.NET Core 5 event

So yesterday at U2U we had a little Post-/BUILD event, where I did a session on the new stuff in Visual Studio 2015, such as C# 6, .NET Core 5, and ASP.NET 5.

Anyone interested in the slides I used can find them here.

Slides.pdf (648.3KB)

ASP.NET 5 Configuration

So I've been playing around with ASP.NET 5 and of course I encountered the new configuration model. And a lot of things are nicely documented. But one thing I could not find on the internet (maybe I am just bad at binging/googling): how to get these configuration settings in your controller/viewmodel.

So what is the problem? For starter you setup your configuration(s) in the Startup class, for example:

public Startup(IHostingEnvironment env)
  var configuration = new Configuration().AddJsonFile("config.json");
  Configuration = configuration;

This code sets the configuration as the Startup class's Configuration property. This property is not easily accessible in your Controller, which is a good thing.

What?! A good thing? Yes, because it you should not use Configuration directly anywhere else. Dependency Injection to the rescue!

First thing you want to do is to think about which configuration settings you need (per viewmodel/controller), and then wrap this into a class:

public class MemConfig
  public string FromMem1 { get; }
  public string FromMem2 { get; }

This example will wrap two settings from configuration.

Now I want need these settings in my viewmodel (or controller, same technique), so we will add the MemConfig class to the viewmodel as a dependency:

private MemConfig mem;

public ConfigurationViewModel(MemConfig mem)
  this.mem = mem;

Now we only need to tell dependency injection how to create MemConfig. We do this again in the Startup class:

public void ConfigureServices(IServiceCollection services)
  services.AddSingleton<MemConfig>((isp) =>
   new MemConfig
      FromMem1 = Configuration["FromMem1"],
      FromMem2 = Configuration["FromMem2"]

So how does this work. Each time my controller needs a viewModel I make DI inject my viewmodel into the controller. The viewmodel also has a dependency, so DI will inject a MemConfig instance into the viewmodel.

I configured DI to use a singleton instance for the MemConfig class, and I told it how it should be initialized from Configuration. This last part is centralized in the Startup class, and we don't need any specific configuration logic anywhere else.