Thursday, 9 October 2014
I have added a Bootstrap Tabs control to enable the use of bootstrap tabs in a web forms application and support for Bootstrap 3.x
Figure 1 – note here there are two sets of Tabs and each remembers it’s own currently selected tab
I have made the current version work but using cookies so there is no post-back but the currently selected tab will be remembered over post-back, also note that all the controls are rendered for ALL tabs so when switching tab there is no post-back to the server.
P.S. sorry it took so long but I’ve been busy and I lost access to my GitHub account due to not fully understanding two factor auth (or just not reading the instructions).
More posts to come around Bootstrap and Dynamic Data.
Friday, 31 January 2014
Thursday, 9 January 2014
- Your First Scaffold and What is Dynamic Data
- Enable Inline GridView Editing
- Change how my Fields render
- Handle Business Logic Exceptions
- Make Custom Pages
- Display Unknown datatypes
- Use a DynamicControl in ListView and DetailsView Controls
- Getting Started with Dynamic Data
- Begin Editing the Templates in ASP.NET Dynamic Data Applications
- Begin Modifying Dynamic Data Applications with URL Routing
- Enable In-Line Editing in ASP.NET Dynamic Data Applications
- Enable Table Specific Routing in Dynamic Data Applications
- Use Attribute Validation in ASP.NET Dynamic Data Applications
- Implement Custom Field Validation with Imperative Logic in VB or C#
- Remove Columns From Your DynamicData Data Grids
- Create Table Specific Custom Forms in an ASP.NET Dynamic Data Application
- ASP.NET Dynamic Data Custom Form Formatting
Monday, 30 December 2013
- On the Gallery Bootstrap Friendly Dynamic Data Project Template
- On GitHub Bootstrap Friendly Dynamic Data
There will be more to come with many addition already on NuGet that just need minor tweaks to make them Bootstrap compatible and much much more.
Sunday, 22 December 2013
This is just a note to let fans know I am moving my source code to GitHub this is not because I don’t love Codeplex I do but people see to feel it’s easier to send in bug fixes and feature requests there and it does seem to be the Home of Open Source Stuff these days.
So I’m moving my bits there over the next few months starting with my Bootstrap Friendly Controls and then my Bootstrapped Dynamic Data Project Template for Entity Framework.
See you there.
Thursday, 29 August 2013
I really Like Bootstrap and I had the need for the Bootstrap buttons-checkbox see Figure 1 below but not being a client side genius and could not workout how I would get the selected values, and I like the use the right tool or the right job (i.e. Checkbox for Checkbox and Radio button for Radio button) So I looked around and found this article here Stuff you can do with the “Checkbox Hack” and I thought I can make that work for me
Figure 1 – Bootstrap buttons-checkbox
So I made my own CSS (in LESS of course until I can get SASS) so here is the LESS source
// checkbox and rtadio button styles
// hide the checkbox/radio button
// hide checkbox
// Default State
padding: 6px 12px;
-webkit-text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
border: 1px solid #cccccc;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
// Toggled State
input[type=checkbox]:checked + label,
input[type=radio]:checked + label
background: rgb(74, 238, 48);
*background-color: rgb(112, 255, 124);
//background: linear-gradient(top, #1e5799 0%, #7db9e8 100%);
//background: linear-gradient(to bottom, rgb(112, 255, 124), rgb(4, 212, 21));
-webkit-text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.9);
text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.9);
// Mouse over State
input[type=checkbox]:hover + label,
input[type=radio]:hover + label
-webkit-box-shadow: inset 2px 3px 2px #cccccc, 0 1px 6px rgba(255, 255, 255, 0.2);
box-shadow: inset 2px 3px 2px #cccccc, 0 1px 6px rgba(255, 255, 255, 0.2);
& > label:first-of-type
& > label:last-of-type
Listing 1 - checkbox-buttons and with-border-radius classes
So I have put it on NuGet here
Bootstrap buttons checkbox and radio buttons NuGet package
Add the package to your project from NuGet
It will add a Content folder to your project if it’s not already there with the checkbox-buttons LESS and CSS files add a reference to the min.css file to your master page and then decorate you CheckBoxes, CheckBoxLists, RadioButtons and RadioButtonLists with the “checkbox-buttons“ CSS class and if you want to have the ends of the buttons rounded add the “with-border-radius” CSS class. You will get the following:
Figure 3 – Checkbox Buttons in action
In Figure 3 you will see I have made the selected style more differentiated than the on in Bootstrap, it’s just a matter of style and usability I have some none computer literate mobile users in mind and wanted to make it clear that they had set a value.
Everything you need is on NuGet.
Wednesday, 28 August 2013
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
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