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.

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.

Figure – 2 Open NuGet

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

Figure 3 – Get bootstrap menu control

Click Install

Figure 4 – Installing bootstrap menu control

Figure 5 – Bootstrap menu control installed

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

Figure 6 – Adding the scripts and style sheets

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

Figure 7 – Default.aspx file

Figure 8 – Default.aspx.cs file

Now we add the menu to the Site.master

Figure 9 – Adding the bootstrap menu mark-up

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

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