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.

TIP: “Paste XML as Classes” in Visual Studio 2012

pastespecial

In the past, when you had some XML document that you wanted to translate into classes we had to create / generate a schema based on the XML file. Next, we had to generate a class based on the schema with an external tool. Not all too user friendly and somewhat time consuming.

In Visual Studio 2012 you copy the XML you want to create a class/classes for, place the cursor in a class file on the location you want the code to be added and select the following menu items: Edit – Paste Special – Paste XML as Classes. And you’re done! Just like that…

If you want to try real quick, there’s a sample XML file (books.xml) available here.

EDIT
The feature is .NET Framework 4.5 specific. Taken from this MSDN article ‘Generating Data Type Classes from XML‘:
“.NET Framework 4.5 includes a new feature to generate data type classes from XML.

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

Unable to access the IIS metabase

The Web Application Project SomeWebProject is configured to use IIS.  Unable to access the IIS metabase. You do not have sufficient privilege to access IIS web sites on your machine.I opened a solution in Visual Studio 2012 on my laptop running Windows 8, when I was presented with the error “The Web Application Project SomeWebProject is configured to use IIS.  Unable to access the IIS metabase. You do not have sufficient privilege to access IIS web sites on your machine.” The user I was logged in with was a local administrator and was able to open up and use IIS Manager, but still I was presented with this error. The solution to this is simple: start your Visual Studio with ‘Run as Administrator’. You can do this by right clicking the shortcut and selecting ‘Run as Administrator’.

TIP:
To always have your Visual Studio open with ‘Run as Administrator’, please follow these steps:
– right click the shortcut you are used to use
– bring up its properties
– click ‘Advanced…’ on the ‘Shortcut’ tab
– check the box ‘Run as administrator’ (see image below)
– close the windows with ‘OK’

Somehow I felt like this was default behavior on my Win7 VS2010 install, but it might be I set up the shortcut for it there too…

Coming home

Just a small post today: as of September first I joined Betabit (site is in Dutch).
After having had several employers in the last few years, this feels like coming home.

On our way to do nice things…!

By |September 21st, 2012|Personal|0 Comments