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

Tuesday, 27 August 2013

Bootstrap Friendly Web Controls

A big project rename after discovering that the Menu does not play well with Control Adapters and that this is not the way forward I have now renamed the project to Bootstrap Friendly Web Controls and I have added the first control which is the BootstrapMenu

bootstrap-freindly-logo

Bootstrap Friendly Web Controls is now Live on Codeplex  and NuGet

BootstrapMenu

Next I will create tutorial on using the BootstrapMenu control.