CSS Adapters for Membership Controls (working versions)

On September 6, the guys at Microsoft released the second beta version of their CSS Friendly ASP.Net 2.0 Control Adapters. In addition to bug fixes were CSS implementations of the membership controls – specifically, the Login, CreateUserWizard, PasswordRecovery, LoginStatus, and ChangePassword controls.

Unfortunately for the membership controls, it didn’t really work. This bothered me, because I’ve been using a hacked version of these controls that strips out TABLE-related tags for some time. The hacks work, but they’re hacks, and they have some quirky behavior.

I wrote a post on the ASP.Net forums, in which I described the problem.

I was glad to see that membership controls were added to the latest beta release. However, I did notice that all of them (with one exception) still put a TABLE wrapper around the content when using a templated control. It happens on the Login and PasswordRecovery controls…

Ironically, the CreateUserWizard did not add a table wrapper around the CreateUserWizardStep — but it did add it around the CompleteWizardStep.

Russ Helfand (obviously one of the guys working on the CSS adapters) responded and gave some tips. After some trial and error, we figured out some implementation updates that fix the problem for the Login, CreateUserWizard, and PasswordRecovery controls — an approach that can likely be used to fix other “broken” CSS adapters, too. A snippet of the solution follows.

Russ Helfand suggested:

Let’s look at the LoginAdapter as an example, http://www.asp.net/CSSAdapters/srcviewer.aspx?inspect=%2fCSSAdapters%2fMembership%2fLogin.aspx. In particular, I want you to look at line 125 where the template container is being rendered. I’m considering changing that from:

container.RenderControl(writer);

To:

foreach (Control c in container.Controls)
{
c.RenderControl(writer);
}

It would be helpful if you could try that fix out locally and let me know if it works well for you.

I tried it, and it worked!

I used a similar approach for other controls. Take the CreateUserWizard adapter as an example. Since this adapter only added the table in the Completed step, I made the following change in the RenderContents() method (around line 181):

        activeStep.RenderControl(writer);

… changes to:

        if (activeStep.StepType == WizardStepType.Complete)
            foreach (Control c in activeStep.Controls[0].Controls[0].Controls[0].Controls[0].Controls)
            {
                c.RenderControl(writer);
            }
            else
                activeStep.RenderControl(writer);

For the PasswordRecovery adapter, there’s three places to change — each instance of the RenderControl() method in the RenderContents() method should be commented out and replaced by the foreach loop.

    //passwordRecovery.UserNameTemplateContainer.RenderControl(writer);
    foreach (Control c in passwordRecovery.UserNameTemplateContainer.Controls)
        c.RenderControl(writer);

    ...

    //passwordRecovery.QuestionTemplateContainer.RenderControl(writer);
    foreach (Control c in passwordRecovery.QuestionTemplateContainer.Controls)
        c.RenderControl(writer);

    ...

    //passwordRecovery.SuccessTemplateContainer.RenderControl(writer);
    foreach (Control c in passwordRecovery.SuccessTemplateContainer.Controls)
        c.RenderControl(writer);

That’s some weird behavior, but it works, and it doesn’t seem to break any of the functionality. Be sure to check out the complete thread on the ASP.Net forums for details.