Bootstrap Friendly Dynamic Data

!Important: My first Blog Post since my heart attack back on January 27th 2013 and then a triple heart bypass three weeks later, but I am back and feeling well .

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.

Note: I intend to integrate this and my own custom project templates into the new One ASP.Net thingy (at the moment it’s a bit of a Magic Unicorn until the extensibility is out for us to bolt onto).

Figure – 1 Bootstrap formerly Twitter-Bootstrap and the free themes site Bootswatch.com

For a great introduction to Bootstrap visit Pluralsight.com and watch the Introduction to Bootstrap course.

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 what is out next move well if you think back to the ASP.NET 2.0 CSS Friendly Control Adapters 1.0 (source here CSS Friendly Control Adapters) from ASP.Net 2.0 there is a way around this.

So step one was to download the source and get the project updated to VS2012 and fix up the GridView

Note: We are going to build our own Control adaptor as the we go but for now I just tested with the standard ASP.NET 2.0 CSS Friendly Control Adapters 1.0 to see what difference it made.

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)

Note: I know we are no using JavaScript right now but we will later in the series so lets have it wired up now and be ready

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:

CssClass="DDGridView"

to

CssClass="table"

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

Conclusion

In this series we will build our own Control Adapter specifically for Bootstrap to cover:

• GridView
• Menu
• SiteMapPath
• Login

We will also get the Edit and Details page templates working nicely with Bootstrap and of course all the FieldTemplates and Filters