I ended up changing directions with the project I was working on and this code never got used in production. Testing on it was minimal and I haven’t touched it two years. However, I have received a large number of requests for the code…so here it is:

ASP.NET 2.0 Web Service Membership, Role, and Profile Provider

Feel free to post enhancements or suggestions here.

I’m looking for a change log to find out what has changed from the original beta version to the beta 3 version. Does this exist?

By the way, Scott and I recently finished FarisWheel 2.0. We had a lot of fun building a site for ourselves—and building it the way we wanted it—a welcome change from clients telling us what to do all the time.

I recently discovered this workaround for a scenario that is new to me. Apparently this is a common problem. However, being a developer who in the past has used little (if any) javascript in to build sites, I had not encountered it before.

The bug, present in IE 6 and below, is manifested when a positioned block should cover a select element in another layer. This could occur easily with a dropdown menu or a popup layer that need to open over a form containing a select element. The easiest way around this is to position the conflicting elements so that they do not interfere with each other. However, if this is not possible, there is a workaround using the iframe element and IE conditional comments.

IE 6 Screenshot – demonstrating the bug. Shows two select elements poking through the positioned layer.

Firefox 2.0 Screenshot – the way it should be. Shows the one select element that is actually in the positioned layer. The two below it are hidden by the layer’s light-blue background.

A few seconds of Googling turned up the following useful links:

• <SELECT> Free Layer
• SELECT elements ignore Z-index (“windowed element” problem) (see bug #4)
• How the Z-index Attribute Works for HTML Elements

The first link offered a useful solution which I am abbreviating here:

#popup iframe
{
display:none;/*sorry for IE5*/
display/**/:block;/*sorry for IE5*/
position:absolute;/*must have*/
top:0;/*must have*/
left:0;/*must have*/
z-index:-1;/*must have*/
filter:mask();/*must have*/
width: 100%;/*must have for any big value*/
height: 100%;/*must have for any big value*/;
}

In the linked example width and height are both set to 3000px. I found that it worked better for me to use 100% instead since the former caused unnecessary scrollbars to appear on the page.

<div id="bd">
<h1>select element z-index workaround</h1>
<div class="parameter">
<label for="ddTest">Test</label>
<select id="ddTest">
<option>&hellip;</option>
<option>pick me</option>
</select>
</div>
</div>
<div id="popup">
Is the select element poking through? It shouldn't be!
<!--[if lte IE 6.5]><iframe></iframe><![endif]-->
</div>

Download the demo code: Select Element Z-index Workaround Code

Control ‘hiddenBalance’ referenced by the ControlToCompare property of ‘CompareValidator1′ cannot be validated.

With a small amount of “googling” I found two useful articles:

• Validating against the value in a hidden input
• MS KB Article 310082

Between these two article I pieced together a solution.

The Solution

1. Create a new web project and add it to your solution. I called my project “CompareValidatorHelper”.
2. Right click on the project and select Add and the Class…. I also named my class “CompareValidatorHelper”.
3. Paste the following C# code into the class:

   
using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.ComponentModel;
namespace CompareValidatorHelper
{
[DefaultProperty("Value"), ValidationProperty("Value"), ToolboxData("<{0}:VHiddenField runat=server></{0}:VHiddenField>")]
public class VHiddenField : System.Web.UI.WebControls.HiddenField
{
}
}


4. Build the project and add a reference to it in your web application project.
5. Register the inherited control at the top of your page:
   <%@ Register TagPrefix="custom" Namespace="CompareValidatorHelper" Assembly="CompareValidatorHelper" %>
6. Add the HiddenField control to your page:
   <custom:VHiddenField ID="hiddenBalance" runat="server" Value='<%# Eval("Balance") %>' />
7. Finally, set the ControlToCompare attribute of your CompareValidator equal to the ID attribute of your HiddenField:
   <asp:CompareValidator ID="CompareValidator1" Display="Dynamic" runat="server" Type="Double" Operator="LessThanEqual" ErrorMessage="Overpayments are not allowed." ControlToCompare="hiddenBalance" ControlToValidate="txtPaymentAmount">*</asp:CompareValidator>

Parameters

selectTag ($fieldName, $optionElements, $selected=null, $selectAttr=array(), $optionAttr=null, $showEmpty=true, $return=false)

$fieldName will typically be the name of your model in the singular slash (‘/’) the primary key: 'Post/post_id'.

$optionElements is an array of ‘value’ =>’text’ pairs. The generateList method is very useful for creating this array.

$selected defaults to null and can be used to set the selected option.

$selectAttr is an array. It is used to define HTML attributes for the opening select element: array('onclick' => 'myfunction();', 'class' => 'cssclassname')

$optionAttr serves the same purpose that $selectAttr does, except it applies to the option elements.

$showEmpty is used to set whether or not the list has an empty option at the top. The default is true. If changed to false, the first option element will be the first value/text pair in your $optionElements array.

$return default is false and it defines whether or not this method should return a value. I don’t know of any reason why this would ever be set to true. If someone knows of a scenario where this is useful, please share!

Application

Like other HtmlHelpers, the selectTag can be used in a View within the CakePHP MVC framework including Layouts and Helpers. Typically you would load some data to an array in a 'value' =>'text' pair arrangement before calling the selectTag method (example 1). However, the array can be built “on the fly” as well (example 2).

Example 1


<?php $agentArray = $this->requestAction('/agents/select'); ?>
<?=$html->selectTag('Agent/agent_id', $agentArray, null, array(), null, true, false);?>


Example 2


<?=$html->selectTag('Listing/price',
array(
'0' => 'no min',
'50000' => '50,000',
'100000' => '100,000',
'125000' => '125,000',
'150000' => '150,000',
'175000' => '175,000',
'200000' => '200,000'), '0', array(), null, false, false); ?>


This is by no means comprehensive, but hopefully useful. The CakePHP Google Group and CakePHP IRC Channel are super when trying to wrap you head around something new.

1. Atlas Framework
2. Atlas Control Toolkit

Summary

The Atlas Control Toolkit site does a good job a walking through all the steps necessary to build a custom extender. You’ll want to refer to that site for more general detail. I’m going to show you my own custom implementation.

I needed a control that would sum all the TextBoxes on a page, using the onchange event, and display the answer in another TextBox. For my purposes, the input is limited to integers, but it could easily be adapted to handle other numeric input. I call my Atlas extender “SumTextboxes”.

Getting Started

Create a new project. You can do this one of three ways:

• Go to File->New Project…;
• Ctrl + Shift + N;
• Right Click on a solution that is already open and select Add->New Project…

All three methods will open up the Add New Project dialog. Select your language preference (VB or C#) the “Atlas” Control Project. The Atlas Control Project does not exist for any other languages right now. Give your project a name and specify the location.

Next, right click on your new project and select Add->New Item…. This will open the Add New Item dialog. Choose the “Atlas” Extender Control template, give it a name, and click Add. Four files appear in your project. These are the base files needed to build a custom extender.

Write the Code

Open all four of the template files and make the following changes:

SumTextboxesDesigner.cs

Change the word Control to the more specific TextBox.

SumTextboxesExtender.cs

Same thing: Change the word Control to the more specific TextBox.

SumTextboxesProperties.cs

Looks like this:

[DefaultProperty("TargetResultTextBoxID")]
public class SumTextboxesProperties : TargetControlPropertiesBase<TextBox>
{
// TODO: Add your property accessors here.
//
[IDReferenceProperty(typeof(TextBox))]
public string TargetResultTextBoxID
{
get
{
return GetPropertyStringValue("TargetResultTextBoxID");
}
set
{
SetPropertyStringValue("TargetResultTextBoxID", value);
}
}
}


SumTextboxesBehavior.js

First, initialize your property variable: var _TargetResultTextBoxIDValue;. You can delete the this._onkeyup function; create a new function called this._onchange…we’ll get to the code for _onchange in a second. Change the initialize function to look like this:

this.initialize = function() {
SumTextboxes.SumTextboxesBehavior.callBaseMethod(this, 'initialize');
// TODO: add your initalization code here
this.control.element.attachEvent('onchange', Function.createDelegate(this, this._onchange));
this._onchange();
}


You will also need to change the code inside this.getDescriptor to this:
td.addProperty('TargetResultTextBoxID', String);

…and your property accessors:

// These are helper functions for communicating state back to the extender on the
// server side. They take or return a custom string that is available in your initialize method
// and later.
//
this.getClientState = function() {
var value = SumTextboxes.SumTextboxesBehavior.callBaseMethod(this, 'get_ClientState');
if (value == '') value = null;
return value;
}
//
this.setClientState = function(value) {
return SumTextboxes.SumTextboxesBehavior.callBaseMethod(this, 'set_ClientState',[value]);
}


And finally, back to this._onchange. This is where the meat of this extender is:

this._onchange = function() {
if (!document.getElementsByTagName)
{
return;
}
var e = document.getElementById(_TargetResultTextBoxIDValue);
var total = 0;
oTextboxes = new Array();
oInputs = document.getElementsByTagName('input');
for (i=0;i {
if (oInputs[i].type == 'text')
{
oTextboxes.push(oInputs[i]);
}
}
var msg = "Found " + oTextboxes.length + " text boxes";
for (i=0;i {
if (!isNaN(parseInt(oTextboxes[i].value)) && oTextboxes[i] != e)
{
total += parseInt(oTextboxes[i].value);
}
}
e.value = total;
}


You're almost done! Save the project and build. You can now use this extender in an ASP.NET website!

Implementation

Add a reference to SumTextboxes in the project by right clicking on the project and selection Add Reference.... This will open the Add Reference dialog. Select the Projects tab, the SumTextboxes project, and click OK.

Drag a ScriptManager control from your toolbar onto the design view. This is control is required for Atlas enabled applications.

Add some TextBoxes to your page. For each TextBox, you will also need a SumTextboxes control. I chose to use another Atlas Extender, the FilteredTextBoxExtender to restrict the user input to numbers. Here's a snippet of my code for each textbox:

<asp:Label ID="lblHundreds" runat="server" AssociatedControlID="txtHundreds">Hundreds (100s):</asp:Label>
<cc2:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server">
<cc2:FilteredTextBoxProperties TargetControlID="txtHundreds" FilterType="numbers" />
</cc2:FilteredTextBoxExtender>
<cc3:SumTextboxesExtender ID="SumTextboxesExtender1" runat="server">
<cc3:SumTextboxesProperties
TargetControlID="txtHundreds"
TargetResultTextBoxID="txtTotal" />
</cc3:SumTextboxesExtender>
$<asp:TextBox ID="txtHundreds" runat="server" Text="0" />.00


Notice that the TargetResultTextBoxID property has been set to "txtTotal". txtTotal is the TextBox control at the bottom of the page where the results are displayed. It is updated everytime the user tabs off a field that has the SumTextboxes control attached to it!