Getting Bootstrap to work on Windows Phone 8

There are a couple of websites I manage that use Twitter Bootstrap*. These websites are fully responsive and work well on all devices. Or actually, almost all devices. The wrapping of columns in a container on a Windows Phone doesn’t work the way you’d want it out of the box. Windows Phone interprets device-width as the actual resolution size. Other mobile browsers use what the manufacturer (or browser vendor) has decided is the optimal viewport width.

To fix this issue, follow these steps:

  1. Add this line to use –ms-viewport in your CSS file
    @-ms-viewport{
        width: device-width;
    }
  2. Add this line to the head tag of your HTML page (it’s probably already there since you’re using Bootstrap)
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  3. Add this JavaScript function as the first script in the head tag (because of a timing issue it won’t work if it isn’t the first script)
    (function() {
        if ("-ms-user-select" in document.documentElement.style && 
            navigator.userAgent.match(/IEMobile\/10\.0/)) {
            var msViewportStyle = document.createElement("style");
            msViewportStyle.appendChild(
                document.createTextNode("@-ms-viewport{width:auto!important}")
            );
            document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
        }
    })();

I found this solution over at Matt Stow’s blog ‘Firewoiks’. You can find the original article here.

Hope this helps.

* The Bootstrap project is no longer under the Twitter brand.

Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world. – about Bootstrap

HowTo: sign out of Visual Studio Online (when deleting cookies won’t help)

When you have more than one Microsoft Account that you use regularly, you might recognize the scenario where your Visual Studio keeps you signed in to Visual Studio Online… with the wrong account. You keep getting messages that you don’t have access rights. Restarting Visual Studio, rebooting and even clearing all (Visual Studio) cookies doesn’t help. Here’s a quick fix:

  1. Open Visual Studio
  2. Open the Visual Studio web browser (under View, Other Windows, Web Browser)
  3. Go to Visual Studio Online
  4. Click sign out

You should be good to go now!

Hope this helps.

How to add Next and Previous buttons to Twitter Bootstrap tabs

Just a quickie today: when working with Twitter Bootstrap tabs, like I am in my ASP.NET MVC 4 project, you might want to add Next and Previous buttons on the tabs to create something of a Wizard. Here’sa step by step overview of how I did this:

Add an ID to all the ListItem elements that are used for the tab navigation. For instance:

<ul class="nav nav-tabs" id="myTab">
    <li><a href="#example" data-toggle="tab" id="xmpl">Example</a></li>
    ...
</ul>

Add a button you would like to use to activate the Example tab

In the onclick, call the ShowTab JavaScript function with the id of the ListItem for the Example tab (which is ‘xmpl’ in this example)

The ShowTab function is simple:

function ShowTab(tabname) { 
    $('#' + tabname).tab('show'); 
}

Hope this helps

Debugging JavaScript with Visual Studio in an ASP.NET MVC 4 application

When debugging JavaScript in an ASP.NET MVC (4) application, it is not always enough to uncheck the ‘Disable script debugging’ checkboxes under ‘Tools’ – ‘Internet Options’ – ‘Advanced’ – ‘Browsing’. JavaScript inside a Razor view (a cshtml file) cannot be debugged from Visual Studio. To debug your JavaScript, move it to a separate .js file and link to that file from your Razor view. This way, breakpoints set in the JavaScript will be hit and you can debug from Visual Studio.

Hope this helps

 

Disclaimer: I know about the F12 Developer Tools, Firebug and all the other possibilities we have to debug JavaScript. This post is about getting JavaScript debugging to work with Visual Studio and breakpoints set in Visual Studio. For those who want it that way. So there… ;)

How To: Call a generic method with a runtime type

Problem:
Developing a generic class that maps datasets, datatables and datarows from a legacy system to my domain model, I ran into an issue. I wanted to call a generic method with a runtime type. Lets say the method looked like this: public string DoSomething<T>(string param). Because I use reflection to iterate properties on a type, the type of the properties was dynamic and only known at runtime. I wanted to do something like this:

DoSomething<propertyInfo.PropertyType>(“bloggingabout”);

This however resulted in an error message. The tooltip on the red colored propertyInfo read “Cannot resolve symbol ‘propertyInfo'”, while the build error stated “The type or namespace name ‘propertyInfo’ could not be found (are you missing a using directive or an assembly reference?)”. This is expected behavior, because “The type argument […] can be any type recognized by the compiler.” So that says compiler. So the type is parsed (and should be known) at compile time.

Solution:
The solution is found in reflection. Taken from the MSDN article for the MethodInfo.MakeGenericMethod Mehod:
The MakeGenericMethod method allows you to write code that assigns specific types to the type parameters of a generic method definition, thus creating a MethodInfo object that represents a particular constructed method. If the ContainsGenericParameters property of this MethodInfo object returns true, you can use it to invoke the method or to create a delegate to invoke the method.

In our example, this would look something like this:

instance.GetType()
       .GetMethod("DoSomething")
       .MakeGenericMethod(propertyInfo.PropertyType)
       .Invoke(mapper, new object[] { "bloggingabout" });

More information:
Generic Type Parameters (C# Programming Guide)
MethodInfo.MakeGenericMethod Method

Enable preview in Visual Studio 2012 after Update 1

tabsandwindows

After installing Visual Studio 2012 Update 1, my Visual Studio stopped opening files in preview mode when I clicked them in the Solution Explorer. This setting seems to have changed with the installation of Update 1. To re-enable opening files clicked (once) in the Solution Explorer in Preview mode, go to ‘Tools’ – ‘Options’ – ‘Environment’ – ‘Tabs and Windows’.

There, check the box under ‘Preview Tab’ – ‘Single-click opens files in the preview tab in:’ – ‘Solution Explorer (Alt + click to avoid previewing)’.

Hope this helps

EDIT:
This is a lot easier: the ‘Preview Selected Items’ button in the Solution Explorer toolbar:

Preview Selected Items button

By |December 2nd, 2012|HowTo, Tip, VS2012|0 Comments

How To: Create an ActionLink with a Twitter Bootstrap icon in MVC4

Twitter Bootstrap is a… “Sleek, intuitive, and powerful front-end framework for faster and easier web development.” One of the nice things in Bootstrap is you can use icons from Glyphicons. To use these, you can simply use this markup <i class=”icon-fire”></i> get a nice fire icon (fire ).
Translating this into an ActionLink styled as a button in an MVC4 application would look something like the following:

@Html.ActionLink("<i class="icon-fire"></i> Invent fire", "fire", new { @class = "btn" })

Unfortunately, this renders as follows:

encoded

The reason this is not rendered correctly is because Html.ActionLink HtmlEncodes the text you pass in the actionLink parameter. You can check this by opening the System.Web.Mvc assembly in your disassembler of choice, and having a look at the GenerateLinkInternal method on the HtmlHelper class. It HtmlEncodes the linkText, and doesn’t have any option to have it not do that. To solve this, I wrote an extension method called NoEncodeActionLink, looking like this:

public static IHtmlString NoEncodeActionLink(this HtmlHelper htmlHelper, string linkText, string action, object htmlAttributes) 
{ 
    TagBuilder builder; 
    UrlHelper urlHelper; 
    urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext); 
    builder = new TagBuilder("a"); 
    builder.InnerHtml = linkText; 
    builder.Attributes["href"] = urlHelper.Action(action); 
    builder.MergeAttributes(new RouteValueDictionary(htmlAttributes)); 
    return MvcHtmlString.Create(builder.ToString());
}

Calling the new overload (don’t forget to add a using statement to the namespace holding the extension method), the linkText parameter is not HtmlEncoded, which means the ActionLink now renders fine, including the icon (and the button style):

unencoded

Hope this helps.

Microsoft Touch Mouse, Visual Studio (2012) and scrolling

My Microsoft Touch Mouse stopped scrolling in Visual Studio on my Windows 8 machine some time ago. Because this kills productivity, I wanted to fix the problem. After trying some things I found that the problem only occurred when I ran Visual Studio as Administrator. Searching a bit further I found this bug to be added to Microsoft Connect. I found a workaround for the problem:

  • Go to the location where you have Microsoft Mouse and Keyboard Center installed
  • Open up the properties of ipoint.exe
  • Set it to Run as Administrator
  • Kill and restart ipoint.exe (or restart the machine)
  • Welcome back scrolling in Visual Studio…!

Hope this helps

HowTo: Have Visual Studio always run as administrator on Windows 8

In my previous post I wanted my Visual Studio to ‘Run as Administrator’ on my Windows 8 machine. I only managed to get this working for the pinned taskbar icon and not for items in the jumplist or for items you open by double clicking them. The solution to check the box ‘Run as Administrator’ on the compatibility tab of the file properties for devenv.exe was not a solution, because there is no more Compatibility tab in Windows 8 :).
But there is a way to have devenv.exe always ‘Run as Administrator’. Here’s how:

  • Right click devenv.exe en select Troubleshoot compatibility (first picture)
  • Select the option ‘Troubleshoot program’ after the wizard has finished detecting issues
  • Choose the ‘The program requires additional permissions’ option (second picture). The wizard will apply the ‘Run as Administrator’ setting to devenv.exe
  • Click ‘Test the program…’ (third picture – the wizard requires this) and close the wizard
  • Enjoy!

 

Picture 1  Picture 2  Picture 3

Documents.Open returns null, running Word automation under ASP.NET on x64

When building an ASPapplication that generates Word documents,  it was working fine on the local machine. A windows XP installation with Office 2007. When we deployed it to windows 2008 (64 bit) and Word 2007 we saw that Documents.Open returned null. Other than this, there are no exceptions.

The code that returned the error (simplified):

Application app = new Application();
Document doc = app.Documents.Open(ref name);

As it turns out, a 64 bit system stores temporary files in “C:WindowsSysWOW64configsystemprofileDesktop” folder.

The solution: create a new directory called “Desktop” inside “C:WindowsSysWOW64configsystemprofile”

Hope this helps.