Wednesday 28 August 2013

Adding a simple BootstrapMenu to Dynamic Data With Bootstrap

We are going to add the new ASP.Net web forms BootstrapMenu control to a Dynamic Data project, I like to clean it up a little first.

clean project

Figure 1 – Clean project

So what I did to clean my project was to create a new Dynamic Data project and then remove the scripts folder and the RegisterScripts method and method call from the Global.asax.cs file. This will leave us with no Scripts (jQuery Modenizr etc.) in the project we are no ready to add the BootstrapMenu control.

open nuget

Figure – 2 Open NuGet

Next we search for NotAClue packages and scroll down to the last package

get bootstrap menu control

Figure 3 – Get bootstrap menu control

Click Install

installing bootstrap menu control

Figure 4 – Installing bootstrap menu control

bootstrap menu control installed

Figure 5 – Bootstrap menu control installed

Next we need to add the script and style sheet references.

adding the scripts and style sheets

Figure 6 – Adding the scripts and style sheets

Lets clean out the Default.aspx and it’s code behind file

Default.aspx file

Figure 7 – Default.aspx file

Default.aspx.cs file

Figure 8 – Default.aspx.cs file

Now we add the menu to the Site.master

Adding the bootstrap menu mark-up

Figure 9 – Adding the bootstrap menu mark-up

Adding the bootstrap menu code behind

Figure 10 – Adding the bootstrap menu code behind

So after all that here it is the first part of our Bootstrap Dynamic Data Project Template

Working Bootstrap Menu Control

Figure 11 – Working Bootstrap Menu Control

Download

As usual you can get the code from the Project on Bootstrap Friendly Control Adaptors and on my SkyDrive

7 comments:

Unknown said...

Steve,

Fantastic walk through, I appreciate the time you've taken to enlighten us newbies to all the wonders of dynamic data.

When I follow your example with my site, I get a javascript error, so I downloaded your source to follow along and check your master page and default pages with mine to make sure I understood your post correctly. However, I see that your example solution has the same javascript issue. I will admit that this is new to me, and after a few hours of trying to troubleshoot the issue I'm a bit lost. Are you seeing the same results? I see this in the GridView Bootstrap Update code that I downloaded from your Skydrive.

Error follows:

Unhandled exception at line 8, column 5 in http://localhost:3339/ScriptResource.axd?d=rzVnuS2OxIKaSJtehaE6iiUCe6QpTzvhzf7e-0DiLs5II68pzxVVM6WizUfz5ykIRBMZ2N5LUeL0mAQlOkimfYwFNjJoSqKnb3vZx-gaVD9BUXQVOMmPuIels6av8mqRD6e1g7LWB-qWwq9XYPpHsw2&t=69ddb300

0x800a138f - JavaScript runtime error: Unable to get property 'tagName' of undefined or null reference

Stephen J. Naughton said...

What version of IE is it? I've had issues with IE10 and IE11 Win8 and Win8.1 no issues with Firefox and earlier version of IE.

Steve

Unknown said...

Hi Steve,

I am using IE 10 and Chrome 30, I hadn't checked in Firefox. I'll re-implement the code and check again.

Thank you for taking the time to respond.

Ruben said...

I'm trying to implement this to my own project. Is there much different code when i'm using sitemap file ans dont have this tables?

Stephen J. Naughton said...

Hi Ruben, there is a new project template for VS2012/13 on the gallery that has it all setup if you want to look at that and all the source on GitHub

VS Gallery
and here
Project Template
and
Menu Control

hope that helps

Steve

plc said...

Hi Steve,

The example looks like it's using Bootstrap 2 because the class of 'navbar-inner' no longer exists.

I checked the notes at http://code.divshot.com/bootstrap3_upgrader/ which says to replace 'navbar-inner' with 'container' for Bootstrap 3 - but the menu appears to render items vertically ('Tables' appears on a line underneath 'Home').

Any ideas how I can get this working with Bootstrap 3 please?

Many Thanks.

Stephen J. Naughton said...

Hi PLC, yes this article was before Asp.Net started using Bootstrap 3 it was ALL 2 up until then sorry I do have a project template on the gallery that uses bootstrap 3 three. there are issues I have not fixed with the project file but the content is good.

steve