Bootstrap 3, LESS, Bundling, and ASP.NET MVC

Until Twitter Bootstrap v3, I would have recommend that you use dotLess to compile and bundle your LESS files. However, it is now a known issue that the current build of dotLess does not support Bootstrap 3, or more specifically that it does not support LESS 1.4; and worse yet, there is no fix in sight.

So, how can you use Bootstrap LESS with MVC?

I recommend using BundleTransformer. It is an amazingly feature rich set of extensions for System.Web.Optimization. The BundleTransformer.Less extension provides easy to use LESS transformations (already up to LESS 1.5) and bundling support that wires up straight into your pre-existing BundleCollection configuration. For more information about everything that BundleTransformer has to offer, check out this article.

Now here is how you setup Bootstrap 3 and BundleTransformer for ASP.NET:

Required NuGet Packages

1. Twitter.Bootstrap.Less
2. BundleTransformer.Less
3. BundleTransformer.MicrosoftAjax
4. JavaScriptEngineSwitcher.Msie

Unit Testing and Dependency Injection, with xUnit InlineData and Unity

Inversion of control is great because it makes your code more testable; but you usually still have to write tests for each implementation of your interfaces. So what if your unit testing framework could just work directly with your container to make testing even easier? Well, xUnit can!

Below we define a custom data source for our xUnit theories by extending the InlineDataAttribute. This allows our data driven unit tests to resolve types via a container, and then inject those resolved objects straight into our unit tests.

Bottom line: This allows us to test more with less code!

The rest of post is very code heavy, so I strongly recommend that you start out by taking a look at sections 1 and 2 to get an idea of what we are trying to accomplish. :)

1. Example Interfaces and Classes
2. Example Unit Tests
3. IocInlineDataResolver
4. UnityInlineDataAttribute

Check Properties of a Dynamic Object in .NET

How can you avoid a RuntimeBinderException when working with dynamics?

In JavaScript, checking if an object implements a property is easy; so why can't it be that easy to check dynamics in C#? Well, it sort of is!* If you are using an ExpandoObject, you need only cast it to a Dictionary and check and see if it contains the desired key.

* Offer only valid with ExpandoObject. **
** See sample code for participating interfaces.***
*** Visit your local Visual Studio installation for details.

Unshelve to a Different Branch in TFS

Love it or hate it, TFS has a lot of features; some are just more discoverable than others.

Team Foundation Server has the ability to unshelve between branches, but it requires Microsoft Team Foundation Server Power Tools to do so. Once you have installed these, simply follow these two steps to move a shelveset from one branch to another:

1. Navigate to the root of your project.
2. Fill in and execute the following command:

Unshelve Command:

tfpt unshelve "[ShelveSetName]" /migrate /source:"[SourcePath]" /target:"[TargetPath]"

Example:

cd c:/code/
tfpt unshelve "Demo Shelveset" /migrate /source:"$/DemoProject/branch" /target:"$/DemoProject/trunk"

Enjoy,
Tom

LINQ to SQL DataContext BeginTransaction

LINQ to SQL supports Transactions, but there is no method directly off of the DataContext to initialize one. Fortunately, that functionality is just a simple extension method away!

public static class DataContextExtensions

{

    public static IDbTransaction BeginTransaction(

        this DataContext dataContext, 

        IsolationLevel isolationLevel = IsolationLevel.Unspecified)

    {

        if (dataContext.Connection.State != ConnectionState.Open)

            dataContext.Connection.Open();

        return dataContext.Transaction = dataContext.Connection

            .BeginTransaction(isolationLevel);

    }

}

public class TransactionTests

{

    [Fact]

    public void Example()

    {

        using (var dataContext = new FutureSimpleDataContext())

        using (dataContext.BeginTransaction())

        {

            // TODO: Stuff!

        }

    }

}

Enjoy!
Tom

How to Debug Minified JavaScript

I recently wrote a blog post about how to control minification per request. However, that strategy will not help you if the minification itself is causing a bug.

Fortunately Chrome has an absolutely amazing set of developer tools that can help you debug any script, even one that have been minified! Just follow these very simple steps:

1. Navigate to the page in Chrome.
2. Launch the developers tools (by pressing F12).
3. Open the JavaScript file in the Sources tab.
4. Activate the amazing "Pretty print" feature.
5. Debug those scripts!

Enjoy,
Tom

TypeScript on your Build Server

Last week I wrote about making your TypeScript files compile on save by updating your project files. It is an easy update to make, but then what happens when you check into source control? You are probably going to get an error because your build server can not resolve Microsoft.TypeScript.targets

Two ways to make TypeScript compile on your build server

1. You can install TypeScript on your build server.

The big problem with this solution is that it means you have to install a specific version of TypeScript on your build server, and thus make all of your project depend on that single version.

2. You can check the TypeScript compiler into Source Control.

This may seem like an odd solution, but for right now I feel that it is the best way to go. It allows all of your projects to be independent of each other, and you do not need to install anything new on any of your servers. (This solution has been proposed to the TypeScript team; thanks, josundt!)

How to Add TypeScript to Source Control

This may look like a lot of steps, but do not worry! All of these steps are small, simple, and they will only take you a minute or two. :)

1. Create a TypeScript folder in the root of your solution folder.
2. Create a SDKs folder inside of the TypeScript folder.
3. Create a MSBuild folder inside of the TypeScript folder.
4. Copy the contents of your TypeScript SDKs install (where the TypeScript compiler, tsc.exe, is located) to the TypeScript\SDKs folder that you have created.
   • By default, that will be located at:
     C:\Program Files (x86)\Microsoft SDKs\TypeScript
5. Copy the contents of your TypeScript MSBuild folder (where your TypeScript target files are located) to the TypeScript\MSBuild folder that you have created.
   • By default, for Visual Studio 2012, that will be located at:
     C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v11.0\TypeScript
6. Edit TypeScripts\MSBuild\Microsoft.TypeScript.targets to make the TscToolPath point to your local SDKs folder.
   • The original path would be:
     <TscToolPath Condition="'$(TscToolPath)' == ''">$(MSBuildProgramFiles32)\Microsoft SDKs\TypeScript</TscToolPath>
   • The new path should be:
     <TscToolPath Condition="'$(TscToolPath)' == ''">..\TypeScript\SDKs</TscToolPath>
7. Open your project file for editing.
8. Update your TypeScript project import to follow a relative path to the local folder.
   • The original path would be:
     <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" />
   • The new path should be:
     <Import Project="..\TypeScript\MSBuild\Microsoft.TypeScript.targets" />
9. You're done! Reload your project and test it out; if that works, check it in.

Enjoy,
Tom