Microsoft announced that Twitter-Bootstrap integration in the Build 2013 Day 2 Keynote (look at 15:00 index) this is cool (to be honest it had not been on my radar before this ) but unless Microsoft produce new Dynamic Data Bootstrap templates we will need to roll them ourselves.
Figure – 1 Bootstrap formerly Twitter-Bootstrap and the free themes site Bootswatch.com
So I tried to Bootstrapify (My new word ) the standard Dynamic Data project Template and the first issue I came across is seen in Figure 2 which show the standard mark-up produced by ASP.Net Web Forms (and it’s worth noting that as of the June 2013 Visual Studios 2013 Preview we still have the same issue) and out of the box I cannot seem to find a way of turning the unhelpful mark-up off.
Figure 2 – standard Table mark-up produced by .Net 4.5
So step one was to download the source and get the project updated to VS2012 and fix up the GridView
Add Bootstrap to the Dynamic Data Project
Add Bootstrap and jQuery (there appears to be no dependency on the Bootstrap package so you will need to add jQuery manually) to the Dynamic data application using NuGet
Figure 3 – Add Bootstrap
Now we wire up the styles and scripts
In the templates supplied with Visual Studio 2012 you will note that the jQuery is wired up in the Global.asax.cs file (I am assuming Web Application Project here)
Figure 4 – jQuery 1.7.1
we need to update this to the latest version of jQuery (at the time of writing that was 2.0.3) see Figures 5 & 6 for the updates to Global.asax.cs and Site.master files.
Figure 5 – jQuery and Bootstrap scripts
Figure 6 – add the script reference to the Site.master file mark-up
Change the default CSS class for tables in out projects
Figure 7 – Standard GridView mark-up
We will need to change all the CSS classes but for now we will simply replace the main CssClass on the GridView, change:
We will do a Replace in Files (Ctrl+Shift+H) gets us the dialog shown in Figure 8
Figure 8 – Replace in files
Replace the default CSS style sheet with the Bootstrap style sheet
In the head of the Site.master file replace the default css style sheet with bootstrap’s style sheet. Make the changes shown between Figure 9 and Figure 10
Figure 9 – the Default Dynamic Data style sheet
Figure 10 – Bootstraps style sheets
Now we are ready to run the site and test the GridViews mark-up
As you can see if we view one of the data tables now we will see the issue in action Figure 11 the mark-up is not helping us here.
Figure 11 – WebForms GridViewbefore fixing its output mark up
Adding the default ASP.NET 2.0 CSS Friendly Control Adapters to our project
Adding the default ASP.NET 2.0 CSS Friendly Control Adapters to our project you can just download the dll and the .browser files and add a reference to the DLL and copy the .browser file to the an App_Browsers folder.
Figure 12 – Add a App_Browsers folder
Figure 13 – add a reference to the DLL and copy the CSSFriendlyAdapters.browser file to the App_Browsers folder
Figure 14 – GridView with the mark up causing the issue removed using CSS Friendly Control Adapters
Figure 15 – Now with the following Bootstrap table classes table-bordered and table-striped added
In this series we will build our own Control Adapter specifically for Bootstrap to cover:
We will also get the Edit and Details page templates working nicely with Bootstrap and of course all the FieldTemplates and Filters