Sunday 21 July 2013

Bootstrap Friendly Dynamic Data

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

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 Embarrassed smile) 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).

BootstrapBootswatch

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 In love) 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.

table-mark-up-Issues

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 

add-bootstrap-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

jQuery

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.

jQuery-and-Bootstrap-scripts

Figure 5 – jQuery and Bootstrap scripts

bootstrap-added-to-site.master

Figure 6 – add the script reference to the Site.master file mark-up

Change the default CSS class for tables in out projects

css-styling

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

replace-all-grid-view-css-classes

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

dynamic-data-default-style-sheet

Figure 9 – the Default Dynamic Data style sheet

bootstrap-style-sheets

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.

webforms-gridview-before-fixing-its-output-mark-up

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.

add-app-browsers-folder

Figure 12 – Add a App_Browsers folder

add-reference-to-the-css-friendly-dll-and-add-a-copy-of-the-css-friendly-adapters-browser-file

Figure 13 – add a reference to the DLL and copy the CSSFriendlyAdapters.browser file to the App_Browsers  folder

gridview-with-the-mark-up-casihng-the-issue-removed-using-css-friendly-control-adapters

Figure 14 – GridView with the mark up causing the issue removed using CSS Friendly Control Adapters

finally-with-some-of-the-other-nice-table-classes

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

3 comments:

Anonymous said...

Great that you are allright and healty again!!

Greetings,
Edward

JT said...

Very glad to see you are doing well after your heart attack and subsequent surgery! I have always appreciated your blog; your articles helped me do some really cool stuff. Take care!

Anonymous said...

Thank you sir , you just saved my life !