Monday, March 10, 2014

Visual Studio NuGet package restore

Visual Studio has two approaches to use package restore: Automatic Package Restore and MSBuild-Integrated package restore. The 'MSBuild-Integrated Package Restore' restores packages DURING the building process that might cause issues in some scenarios. The 'Automatic Package Restore' is the recommended approach by the NuGet team (http://docs.nuget.org/docs/workflows/migrating-to-automatic-package-restore).

There are several steps to to make 'Automatic Package Restore' work:
1. In Visual Studio, Tools -> Extensions and Updates, Upgrade NuGet if there is a newer version (Version 2.7 or later)

2. If you use TFS, in your solution's .nuget folder, remove the NuGet.exe and NuGet.targes files. Then edit NuGet.Config to not check in NuGet packages:

<configuration>
<solution>
<add key="disableSourceControlIntegration" value="true" />
</solution>
</configuration>

If you checked in packages folder to TFS, delete the folder and check in the deletion of package folder deletion.

If you don't use TFS, delete the .nuget folder.

3. In each project file (.csproj or .vbproj) in your solution, remove the <Import Project> that references NuGet.targets file. The reference looks like this:

<Import Project="$(SolutionDir)\.nuget\NuGet.targets" Condition="Exists('$(SolutionDir)\.nuget\NuGet.targets')" />

Remove this line in every project file in your solution.

4. In Visual Studio menu, either through

Tools -> Options -> Package Manager -> General or
Tools -> NuGet Package Manager -> Package Manager Settings

please enable the following two options
1) 'Allow NuGet to download missing packages'
2) 'Automatically check for missing packages during build in Visual Studio'

5. Test your package restore configuration by the following steps
1) Save your solution and close Visual Studio
2) Delete your solution's packages folder
3) Start Visual Studio, open your solution and rebuild it.

Tuesday, March 4, 2014

In LINQ to Entities, the Include() method does not work with the Join() method

In using Entity Framework, we try to write queries that only incur one database roundtrip. However, as described in this blog (http://blogs.msdn.com/b/alexj/archive/2009/06/02/tip-22-how-to-make-include-really-include.aspx), when you introduce an intermediary join or something that change the “shape” of the query, the Include() method will throw a runtime exception stating “method cannot be translated into a store expression”.

The DbExtensions.Include extension method requires IQueryable<T> where T is the entity type that the Include() method is applied. However, when a join operator is used to join multiple tables, the ‘shape’, i.e., the query result, is changed to a new entity type. The Include() method call fails with this new query result type.

There are two workarounds proposed by the above blog and a stackoverflow.com answer by the same author (http://stackoverflow.com/questions/794283/linq-to-entities-include-method-not-loading).

The first workaround has the following code sample:

var results =
((from post in dbContext.Posts
from author in dbContext.Authors
where author == post.Author and author.email="abc@email.com"
select post) as ObjectQuery<Post>).Include(“Comments”);

It requires the final select be an entity that keeps the same query shape to use the Include() method. It only works for a few simple queries.

The second workaround has the following code sample:

var results =
from post in dbContext.Posts
from author in dbContext.Authors
where author == post.Author and author.email="abc@email.com"

select new { Post = post, Dummy = post.Comments };

The key is to put Dummy = post.Comments in the select clause. The "Dummy" property uses an Entity Framework featured called relationship fixup to populate the entity Properties. This is an elegant solution that works well. The blogger, Alex, explains the fixup in his EF Tips blog (http://blogs.msdn.com/b/alexj/archive/2009/02/25/tip-1-sorting-relationships-in-entity-framework.aspx ): “In the Entity Framework Object Services automatically ties things together that are related in a process called Fix-up. Fix-up generally occurs once the second of two related entities enter the context.”

The author (Alex D James)’s LINQ tips blog (http://blogs.msdn.com/b/alexj/archive/2009/03/26/index-of-tips.aspx) has many gems.

.less (Dot Less), bootstrap 3 and font awesome in Asp.Net: configuration and workflow

Dot-less (www.dotlesscss.org), dot-less is a port of the popular LESS JavaScript library (lesscss.org) for the .NET platform. It allows variables and mixins to define CSS styles in a more productive way. The bootstrap (getbootstrap.com) is a flexible front end style framework based on LESS. Though there are many benefits of using bootstrap as the front end CSS framework to build a Web application, the CSS-based approach of using bootstrap requires one to write many bootstrap CSS classes in HTML. It is both ugly and not efficient for a big project and long term maintenance. Ideally we want to use bootstrap without mixing style formats and HTML code. This leads to use a LESS-only method to define all CSS styles in a Web application.

This article covers two subjects. First, we setup an ASP.NET project to use dotLess and configure it to work properly in both debug and release version. Then we define the workflow steps.

1. Install and configure dotLess package

The following steps are based on Dino Esposito’s MSDN magazine article in http://msdn.microsoft.com/en-us/magazine/dn463774.aspx

1) Use NuGet to install the latest DotLess package

PM> Install-Package dotLess

2) Then add a new HttpHandler to Web.Config to support debug mode CSS file request from its LESS code. There are two places: one for classic mode (IIS 6.0 or below) and one for integrated mdoe (IIS 7.0 and above)

<system.web><httpHandlers>

</httpHandlers></system.web>

<system.webServer><handlers>
<add name="dotless" path="*.less" verb="GET" type="dotless.Core.LessCssHttpHandler,dotless.Core" resourceType="File" preCondition="" />
</handlers></system.webServer>

Optionally, we can specify a configuration section for the LESS/CSS request.

3) We need to configure bundling and minification

First, we need to use NuGet to install a LESS bundle transformer. A simple transformer described in the above MSDN article doesn’t understand file path. The System.Web.Optimization.Less package is what we want.

Then add all your less files to a bundle in your BundleConfig.cs

bundles.Add(new LessBundle("~/Content/Less").IncludeDirectory("~/Content/Less", "*.less"));

Finally, use the generated CSS file in your code Razor view file

@Styles.Render("~/Content/Less")

2. The workflow

The bootstrap style workflow is based on the general bootstrap 3 less workflow tutorial described by Erik Flowers in his blog: http://www.helloerik.com/bootstrap-3-less-workflow-tutorial.

We put all less files in ~/Content/Less folder. There are two sub folders: one is bootstrap and another one is local. The bootstrap folder has all the LESS files downloaded from bootstrap packages. We also need a ~/Content/fonts folder to store all fonts used by bootstrap fonts. Copy all bootstrap font files to this folder.

Then define our variables, mixins and page-specific LESS files in the local folder.

Finally, use a Style.less file to import all used LESS files in the ~/Content/Less folder.

To use font-awesome, we need to create a font-awesome folder in ~/Content/Less folder and copy all font-awesome LESS files to the folder. Then copy all its fonts to the ~/Content/fonts folder. We need to change its font path to

@fa-font-path: "../../fonts";

To make the body use auto width and keep the bootstrap .container style, add the following styles instead of .container;

.container-fixed();

Friday, February 28, 2014

tinymce editor in dynamical content inside bootstrap modal dialog

I need to use tinymce (http://www.tinymce.com/) editor in dynamically crated content inside bootstrap modal dialogue. The official document doesn't help and my online search found few tips. After a few tries, following are key steps to use tinymce in dynamic content:

First, we need to make the focus in event work properly inside bootstrap dialog (http://www.tinymce.com/wiki.php/Tutorials:TinyMCE_in_a_boostrap_dialog)

// Prevent bootstrap dialog from blocking focusin
$(document).on('focusin', function(e) {
if ($(e.target).closest(".mce-window").length) {
e.stopImmediatePropagation();
}
});

Second, after the modal dialog statement, initialize tinymce.

$('#myDialogElement').modal();
$('#myTextArea').tinymce( { width: '100%', menubar: false});

Third, remove the tinymce editor when the modal dialog closes, as the first step, this is called in jQuery initialization.

$('#myDialogElement')on('hidden.bs.modal', function (e) {
// need to remove the editor to make it work the next time
tinymce.remove();
});

In the above code, we NuGet the jQuery version tinymce. Both jquery.tinymce.min.js and tinymce.js are included in the Web page.

Monday, February 24, 2014

A fluid responsive grid layout in Bootstrap 3

Unlike Boostrap 2, Bootstrap 3 doesn't have a .container-fluid mixin to make a fluid container. The .container is a fixed width responsive grid layout. In a large screen, there are excessive white spaces in both sides of one's Web page content.

A fluid grid layout uses all screen width and works better in large screen. It turns out that it is easy to create a fluid grid layout using Bootstrap 3 mixins. The following line makes a fluid responsive grid layout:

.container-fixed;

The .container-fixed mixin sets the content to the center of the screen and add paddings. It doesn't specifies a fixed page width.

Another approach is to use Eric Flowers' CSS style (http://www.helloerik.com/bootstrap-3-grid-introduction)

.my-fluid-container {

  padding-left: 15px;

  padding-right: 15px;

  margin-left: auto;

  margin-right: auto;

}

Wednesday, January 22, 2014

Using SignalR in an Asp.Net MVC 5 project: basic setup and Unity integration

This article covers the basic setup and Unity integration of using SignalR in a MVC project.

1. Basic Setup

There are three steps in using SignalR in MVC:

· Adding SignalR library;

· creating OWIN startup classes to setup SignalR route;

· writing server side and client side code.

First you need to use NuGet to install Microsoft.AspNet.SignalR package.

install-package Microsoft.AspNet.SignalR

This will install both server side packages and client side JavaScript libraries into your MVC project.

Then you need to configure SignalR routes in application startup. Create a C# class file (the filename and location doesn’t matter but a recommended one is “SignalRStartup.cs” in App_Start folder) with the following content (code snippets are copied or modified from examples in http://www.asp.net/signalr/overview/signalr-20/getting-started-with-signalr-20/tutorial-getting-started-with-signalr-20):

using Microsoft.Owin;

using Owin;

[assembly: OwinStartup(typeof(MyNamespace.SignalRStartup))]

namespace MyNamespace

    public class Startup

        public void Configuration(IAppBuilder app)

            // Any connection or hub wire up and configuration should go here

            app.MapSignalR();

In the server side, you need to create a Hub subclass in your controller folder. A sample is

using System;

using System.Web;

using Microsoft.AspNet.SignalR;

namespace SignalRChat

    public class ChatHub : Hub

        public void Send(string message)

            // Call the broadcastMessage method to update clients.

            Clients.Others.broadcastMessage(message);

In your Web application, the View file should include "~/Scripts/jquery-{version}.js",,"~/Scripts/jquery.signalR-{version}.js" and "~/signalr/hubs".

In the client side, you need to call the server side method as well as define a method to be called by Server side method. The code may look like the following:

var chat = $.connection.chatHub;

$.connection.hub.start().done(function () {

$('#sendmessage').click(function () {

        chat.server.send('Hello World');

});

});

chat.client.broadcastMessage = function (message) {

    alert(message);

};

The JavaScript code use camel-cased version of the server method name. The generated signalR proxy automatically convert a method name to a correct one. In the server side, there is no method name conversion. A server calls the camel-cased JavaScript client method.

2. Working with Unity IoC container

After using NuGet to install Unity and Asp.Net SingalR packages, one needs to perform the following steps to resolve types for SignalR methods using a Unity container. There are two options to use Unity as dependency resolve in SignalR: one is to replace the whole SignalR dependency resolver; the other option is to only replace the IHubActivator component of the SignalR dependency resolve. The first one is document in http://www.asp.net/signalr/overview/signalr-20/extensibility/dependency-injection. It needs to implement two methods (GetService and GetServices) of SingalR IDependcyResolver interface. The second option only needs to implement one method of SingalR IHubActivator interface.

Not only the first option has more methods to be implemented, but also it needs future steps to allow type resolve in Hub classes. Therefore we choose to use the second option. The following steps are based on http://damienbod.wordpress.com/2013/11/05/using-signalr-with-unity/.

First, create a class implementing IHubActivator interface. In the class, use a Unity container in the IHub Create(HubDescriptor descriptor) method.

using System;

using Microsoft.AspNet.SignalR.Hubs;

using Microsoft.Practices.Unity;

namespace SignalRHostWithUnity.Unity

    public class UnityHubActivator : IHubActivator

        private readonly IUnityContainer container;

        public UnityHubActivator(IUnityContainer container)

            this.container = container;

        public IHub Create(HubDescriptor descriptor)

            if (descriptor == null)

                throw new ArgumentNullException("descriptor");

            if (descriptor.HubType == null)

                return null;

            object hub = this.container.Resolve(descriptor.HubType) ?? Activator.CreateInstance(descriptor.HubType);

            return hub as IHub;

Next, set SingalR Hub resolver in the Unity configuration file. There is no need to register IHubActivator in Unity as described in the above reference because this interface is only used by SignalR and should be registered only in the SignalR dependency resolver.

var container = new UnityContainer();

GlobalHost.DependencyResolver.Register(

    typeof(IHubActivator), 

    () => new UnityHubActivator(container));

Finally, register every application Hub class in the Unity configuration file.

container.RegisterType<MyHub, MyHub>(new TransientLifetimeManager());

Together, the Unity configuration file looks like below:

var container = new UnityContainer();

container.RegisterType<MyHub, MyHub>(new TransientLifetimeManager());

… // register other types

DependencyResolver.SetResolver(new UnityDependencyResolver(container));

GlobalHost.DependencyResolver.Register(

    typeof(IHubActivator), 

    () => new UnityHubActivator(container));