ProfileView ASP.NET Control

ProfileView

ProfileView is a cool ASP.Net control created by Joshua Flanagan.

ProfileView makes it very simple to display and edit profiles based on the ASP.NET application services. For more background on ProfileView see the original blog post.

Joshua has done a nice job with ProfileView and it is very easy to use. However as with any good code once people start to use it they find the need for enhancements.

To move the ball forward I'm going to try and help out with some new functionality for ProfileView.

I've written up below an overview of the enhancements I'm planning. If you have any feedback on the design or other features you'd like to see please let me know.

ProfileView pending new features / changes:

1. Ability to customize property display names

2. Support a new input type drop down list

3. When UserName property is set, re-render to update profile values of that user

4. Render IDs and CSS class names on each of the tags.

5. Allow standard asp.net validators to be used

6. Add the ability to disable display of profile properties by their “group“

Feature Detail

To add the features above a new sub-control structure should be supported as described below.

In the existing control, the names of the properties displayed to the end user are taken from the property name in the aspx code. This is not good because the display name should be independent of the code name.

Currently the profile properties are defined like this in web.config (example):

<add name="FirstName" /> /* no type specified means string */

On an aspx page the profile control is defined like this:

<flim:ProfileView ID="UserProfile" runat="server" DefaultGroupText="Property Group" ResetButtonText="" />

The new control structure should work like this to enable the required features:

<flim:ProfileView ID="UserProfile" runat="server" DefaultGroupText="Property Group" ResetButtonText="">

<flim:ProfileProperty ID="FirstName">

<flim:DisplayName>

<a href="/help.aspx”><b>Enter your first name</b></a>

</flim:DisplayName>

</flim:ProfileProperty>

<flim:ProfileProperty ID="Birthday">

<flim:DisplayName>

<h1 style="font-size: 24px" >The Birthday field has an icon!</h1>

<flim:DisplayName>

</flim:ProfileProperty>

<flim:ProfileProperty ID="Age">

<flim:DisplayName>Tell me your age</flim:DisplayName>

</flim:ProfileProperty>

<flim:ProfileProperty ID="ShirtSize">

<flim:DisplayName>Choose shirt size</flim:DisplayName>

<flim:InputOption>Small</flim:InputOption>

<flim:InputOption>Medium</flim:InputOption>

<flim:InputOption>Large</flim:InputOption>

</flim:ProfileProperty>

<asp:RequiredFieldValidator runat="server" ErrorMessage="*" class="validator" ControlToValidate="firstName"></asp:RequiredFieldValidator>

<asp:RegularExpressionValidator runat="server" ErrorMessage="*" class="validator" ControlToValidate="email" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>

<flim:ProfileView>

Feature 1

The ID for the ProfileProperty tag corresponds to the name attribute used in the web.config property definitions. For each property being displayed, the display name would be whatever the innerhtml is for the DisplayName tag. The input field display for each property is not affected, the DisplayName innerhtml only determines the look of the display name.

Feature 2 - Support a new input type for a drop down list

In the current ProfileView control the property type specified in web.config is used to determine the input control for editing the property. For example string properties use a textbox, Int types use a textbox, and Boolean types use radio buttons. If InputOption tags are added, then instead of a textbox, a dropdown readonly combox box is displayed listing the values in the InputOptions tag. The item in the combobox selected should be set initially to the value stored in the profile. If there is no value stored in the profile then the first InputOption value should be selected in the combo box.

Feature 3 - When UserName property is set, re-render to update profile values of that user

The problem is that (using it in an admin page) when you change the name of the user nothing happens. Further investigation revealed that when the Username property of the control is set it only updates the private member field but it does not bother to update the controls with the values of the properties of the selected user.

The code needs to be changed so that the controls are re-built in the PreRender event, so that the updated state of internal values are reflected.

Feature 4 - Render IDs and CSS class names on each of the tags.

When the control renders itself it generates html tags (mostly div tags).

In order to allow styling:

- Each generated tag must include a "class" attribute

- Each generated tag must include a "id" attribute.

First, allow developers to choose a class name in the control declaration like this:

<flim:ProfileView cssclass="mystyle" id="UserProfile" />

In this example all html tags generated by the control should then include the attribute class="mystyle" With the "id" attribute, each value must be unique. I would suggest that the id value be the property name appended with a number. For example if each property requires generation of two tags, then the final html would look like this:

</div>

</div>

Feature 5 - Allow standard asp.net validators to be used

By default the ProfileView control attaches some ASP.Net validators to the input controls in creates. That is fine. However when a validator tag is explicitly listed as in the example above, the default validators should not be applied and instead the validator tags listed should be used.

Feature 6 - Add the ability to disable display of profile properties by their “group“

There is some functionality in the control that displays group names. There should be a new attribute allowed on the ProfileView tag that is disablegroups=”true”. When this non-required attribute is set, the groups functionality should be not used as all.

For any comments you can email:
develop (at) hdgreetings.com