Thursday, 9 October 2014

Just Updated “NotAClue Bootstrap Friendly WebForms Controls”

I have just updated my NotAClue Bootstrap Friendly WebForms Controls to version 0.1.4 you can find the source code on GitHub here Bootstrap Web Controls
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
bootstrap-tabs-in-action
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).
Updated: version 0.1.5 now has a dependency on jQuery.cookie to remember the selected tab before postback
Updated: Finally I am now clearing the cookie when you first land on the page,when is not a post-back i.e. if(!Page.IsPostBack)
More posts to come around Bootstrap and Dynamic Data.

Friday, 31 January 2014

Microsoft announce a Preview of Dynamic Data provider and EntityDataSource control for Entity Framework 6

See Announcing preview of Dynamic Data provider and EntityDataSource control for Entity Framework 6 for full details

Thursday, 9 January 2014

Dynamic Data videos on ASP.Net Learn site

Hi all there are 17 videos on the ASP.Net site under the How Do I? Videos, A lot of them are a bit dated using VS2008 and .Net 3.51 but most of the principals are still good.

ASP.NET Dynamic Data

  1. Your First Scaffold and What is Dynamic Data
  2. Enable Inline GridView Editing
  3. Change how my Fields render
  4. Handle Business Logic Exceptions
  5. Make Custom Pages
  6. Display Unknown datatypes
  7. Use a DynamicControl in ListView and DetailsView Controls
  8. Getting Started with Dynamic Data
  9. Begin Editing the Templates in ASP.NET Dynamic Data Applications
  10. Begin Modifying Dynamic Data Applications with URL Routing
  11. Enable In-Line Editing in ASP.NET Dynamic Data Applications
  12. Enable Table Specific Routing in Dynamic Data Applications
  13. Use Attribute Validation in ASP.NET Dynamic Data Applications
  14. Implement Custom Field Validation with Imperative Logic in VB or C#
  15. Remove Columns From Your DynamicData Data Grids
  16. Create Table Specific Custom Forms in an ASP.NET Dynamic Data Application
  17. ASP.NET Dynamic Data Custom Form Formatting

Enjoy Smile

Monday, 30 December 2013

Bootstrap Friendly Dynamic Data Project Template Goes Live

Today I finished my Bootstrap Friendly Dynamic Data Project Template you can find the source up on GitHub and the Project Template on Visual Studio Gallery 

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

Moving My Source Code to GitHub

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

CheckBox and CheckboxList that look like Bootstrap buttons-checkbox

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 Smile with tongue out 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 Ninja

Bootstrap buttons-checkbox

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
.checkbox-buttons
{
// hide the checkbox/radio button
input[type=checkbox],
input[type=radio]
{
// hide checkbox
display: none;
}

// Default State
label
{
display: inline-block;
*display: inline;
padding: 6px 12px;
margin-bottom: 0;
*margin-left: .3em;
font-size: 14px;
line-height: 20px;
color: #7c7c7c;
text-align: center;
-webkit-text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
*background-color: #e6e6e6;
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
border: 1px solid #cccccc;
*border: 0;
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);
border-bottom-color: #b3b3b3;
-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);
font-weight: bolder;
}
// Toggled State
input[type=checkbox]:checked + label,
input[type=radio]:checked + label
{
color: #333333;
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);
}
}

.with-border-radius
{
& > label:first-of-type
{
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}

& > label:last-of-type
{
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
}

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

Bootstrap buttons checkbox and radio buttons NuGet package

Use

Add the package to your project from NuGet

From the Package Manager Console type:
Install-Package NotAClue.Checkbox.Css.Buttons

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:

checkbox-buttons-in-action

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.

Download

Everything you need is on NuGet.

Wednesday, 28 August 2013

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.

clean project

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.

open nuget

Figure – 2 Open NuGet

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

get bootstrap menu control

Figure 3 – Get bootstrap menu control

Click Install

installing bootstrap menu control

Figure 4 – Installing bootstrap menu control

bootstrap menu control installed

Figure 5 – Bootstrap menu control installed

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

adding the scripts and style sheets

Figure 6 – Adding the scripts and style sheets

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

Default.aspx file

Figure 7 – Default.aspx file

Default.aspx.cs file

Figure 8 – Default.aspx.cs file

Now we add the menu to the Site.master

Adding the bootstrap menu mark-up

Figure 9 – Adding the bootstrap menu mark-up

Adding the bootstrap menu code behind

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

Working Bootstrap Menu Control

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