Build a User Administration Tool: Part I

Designing the User Interface





Build a User Administration Tool: Part I

Designing the User Interface


By Bipin Joshi


ASP.NET 2.0 membership, role, and profile features make it easy to develop a membership-driven Web site. However, equally important is a way to administer and manage the users registered with the Web site. If you have managed any membership-driven Web site, you likely are familiar with the complaints about forgotten passwords, forgotten user ids, and changes in e-mail addresses.


VS.NET 2005 and VWD provide a built-in tool called Web Site Administration Tool that allows you to administer various aspects, including membership, roles, and application configuration. However, many times it is necessary that the user management facility be provided as a part of the Web site itself. This way the Web site administrator can manage the users from anywhere. The Web Site Administration Tool suffers from some limitations in such cases. For example:

  • We cannot make the tool a part of our Web site
  • The look and feel of the tool may not fit in the theme of our Web site
  • We cannot view and manage all the information about the users; e.g., user status and activity
  • We cannot view the profile information of the users
  • We cannot do tasks such as password retrieval and reset
  • The tool allows us to modify settings other than membership and roles, which might be undesirable


The User Administration Tool

Because of these limitations we often need to roll out our own administrative pages that handle user administration. In this series we ll develop a user control that will allow us to administer all the aspects of users and their membership. Specifically, the user control will allow us to:

  • Create new users
  • Search for one or more users
  • Modify user information, such as e-mail and comments
  • See status of a user
  • View activity of a user
  • Manage password of a user
  • Manage role information
  • View and modify profile information of a user


We ll create it as a user control so that it can be added easily to any of the existing Web forms. For the rest of the discussion we ll refer to our user control as User Administration Tool . Before we begin any development, let s see how the User Administration Tool is going to look (see Figure 1).


Figure 1: The User Administration Tool.


The tool consists of four major sections. On the top it provides searching functionality. Search can be based on e-mail or user name. Wild cards (_ and %) are allowed.


Below the search area a GridView displays a list of all the users, or a list of users filtered according to the search criteria. The user can be deleted using the Delete button. There is a DropDownList that allows you to select which options to display, and, upon clicking the Show button, the information is displayed on the right side. You can also change the e-mail address and comments of a user. Below the GridView is where you can create new users.


The right side, i.e., the area below the Managing Details for... label, displays various settings related to user status, activity, security, roles, and profile.


Creating a Web Site and a Database

To begin, create a new Web site in VS.NET 2005. Add a new Web User Control named Members.ascx. Open SQL Server Management Studio and create a new database named UserAdminToolTestDb. Note that we could ve used an existing database, such as Northwind, but for the sake of completeness we are creating a new database. Figure 2 shows the New Database dialog box of SQL Server Management Studio.


Figure 2: The New Database dialog box of SQL Server Management Studio.


Configuring Membership, Role, and Profile Providers

Now that we ve created the database, it s time to configure it to support membership, role, and profile features. These features are collectively called application services. ASP.NET provides a command line tool named aspnet_regsql.exe that can be used for enabling and disabling the application services. The aspnet_regsql.exe tool can be used in command line mode or wizard mode for this purpose. We will use the latter mode for configuring the database.


Open Visual Studio .NET 2005 Command Prompt from the Visual Studio 2005 program group. Type aspnet_regsql.exe and hit Enter. The aspnet_regsql tool should start itself in wizard mode. The wizard consists of five steps; Figure 3 shows the first step of the wizard. The second step asks you whether you want to enable or disable application services (see Figure 4). Select the Configure SQL Server for application services radio button and click Next. The third step accepts database details, such as server name, authentication method, and database name (see Figure 5). After entering the required details, click Next. The fourth step simply shows the summary of the settings (see Figure 6). Clicking Next actually starts the configuration process. The final step is simply a confirmation that the tool has configured the database correctly (see Figure 7).


Figure 3: Step 1 of the aspnet_regsql.exe tool.


Figure 4: Step 2 of the aspnet_regsql.exe tool.


Figure 5: Step 3 of the aspnet_regsql.exe tool.


Figure 6: Step 4 of the aspnet_regsql.exe tool.


Figure 7: Step 5 of the aspnet_regsql.exe tool.


The aspnet_regsql.exe tool creates several tables and stored procedures (prefixed with aspnet_) in the underlying database. These tables and stored procedures are used by the membership, role, and profile features.


Configuring the Membership, Role, and Profile Providers for a Web Site

Configuring your database for supporting membership, role, and profile features is only part of the story. We also need to configure the Web site so that Membership, Roles, and Profile objects (as well as login controls, if they are being used in the Web site) correctly point to the required data store. This is achieved by adding some markup in the web.config file. Open the web.config file and add a section, as shown in Figure 8.



Figure 8: Storing a database connection string.


The stores zero or more database connection strings. In our case, we ve added a connection string named connstr pointing to the UserAdminToolTestDb database we created earlier. The connection string shown in Figure 8 uses integrated security. One needs to modify it depending on the SQL Server setup. Now add the markup as shown in Figure 9 to configure the membership and role providers.






passwordFormat="Encrypted" />


Figure 9: Configuring the membership and role providers.


The tag configures the membership provider, whereas the tag enables and configures the role provider. Both these sections point to our database connection string (connstr). Note how password reset and retrieval features are enabled using enablePasswordReset and enablePasswordRetrieval attributes. Also note how the password storage format is specified using the passwordFormat attribute. The passwordFormat attribute takes three possible values: Clear, Encrypted, and Hashed. Because we are using a SQL Server database, the type attribute of membership configuration is set to System.Web.Security.SqlMembershipProvider. The SqlMembershipProvider class handles all the intricacies of membership management with the underlying database. Along the same lines, the type attribute of role manager configuration points to System.Web.Security.SqlRoleProvider.


Finally, add the markup for configuring the profile provider and profile properties (see Figure 10).



Figure 10: Configuring the profile provider.


The section does two jobs. First, it configures the profile provider; second, it configures the profile properties and groups. The profile provider configuration points to our connection string. This time the type that handles the ins and outs of profile management is System.Web.Profile.SqlProfileProvider. Various profile properties and a profile group is defined with and tags, respectively. We have deliberately added a DateTime property called DOB so we can test the implication of using data types other than string. We have also added a property group so that we can test how these groups can be accessed (these points will become clear when we code related functionality later on).


Designing the GridView for Displaying a List of Users

Now that we ve set up the database, let s display a list of users in a GridView. To do so, open the Members.ascx user control that we added to the Web site earlier. Add to the user control designer a base table with three rows and two columns. Drag and drop a GridView control. A collection of MembershipUser objects will be acting as the data source for the GridView. Set the AllowPaging property of the GridView to true. From the smart tag of the GridView click on the Edit Columns... link to open the Fields dialog box; Figure 11 shows the Fields dialog box of the GridView.


Figure 11: The Fields dialog box of the GridView.


Add a TemplateField and set its HeaderText property to Users. Ensure that the Auto-generate fields checkbox is unchecked and close the dialog box. Design the ItemTemplate and EditItemTemplate as shown in Figure 12.


Figure 12: The ItemTemplate and EditItemTemplate of GridView.


The ItemTemplate consists of a Label control for displaying the user name, a HyperLink control for displaying an e-mail address, and another Label control for displaying comments about the user. The template also has Button controls titled Edit and Delete. Finally, there is a DropDownList that contains possible user options (Status, Security, etc.) and a Button titled Show.


Once you design the ItemTemplate, open the smart tag for user name Label and select the Edit DataBindings... option to open the DataBindings dialog box, as shown in Figure 13.


Figure 13: The DataBindings dialog box.


Select Text from the Bindable properties list. In the Code expression textbox enter Eval( UserName ). This will bind the Text property of the Label with the UserName property of the underlying data element. Similarly, bind the Text and NavigateUrl properties of the HyperLink with the Email property of the underlying data element. Also bind the Text property of the comment label to the Comment property of the underlying data element. From the smart tag of DropDownList select the Edit Items... option to open the ListItem Collection Editor, as shown in Figure 14.


Figure 14: The ListItem Collection Editor.


Add five items, namely Status, Activity, Security, Roles, and Profile. Finally, set the CommandName property of the Edit and Delete buttons to Edit and Delete , respectively. This completes the design of ItemTemplate.


The EditItemTemplate consists of a Label control for displaying the user name and two textboxes for editing e-mail and comments, respectively. The newly entered data is saved using the Save button and the edit operation can be cancelled using the Cancel button. Data bind the Label and textboxes with UserName, Email, and Comment properties exactly as before. Also, set the CommandName property of the Save and Cancel buttons to Update and Cancel, respectively. This completes the design of EditItemTemplate.


Designing a User Interface for Searching Users

To design a user interface for searching users, drag and drop a Panel control above the GridView that we just designed. Set the GroupingText property of the panel to Find Users. Add a table with four rows and two columns and place controls as shown in Figure 15.


Figure 15: The Find Users panel.


The Find Users panel consists of two textboxes for accepting search criterion for e-mail search and user name search, respectively. Search criteria can contain wild cards for a single character (_), as well as any number of characters (%). Clicking the respective Go button will display only the matching records in the GridView. At the top is a LinkButton for clearing the filter criteria so that the GridView displays the complete list of users.


Designing the User Interface for Creating New Users

Designing the user interface for creating new users is fairly easy. Simply drag and drop a CreateUserWizard control below the GridView that we designed previously. Apply some formatting theme to it, if required. That s it.


Designing the User Interface for Displaying User Details

The user interface for displaying user details consists of MultiView and View controls. To design the interface, drag and drop a MultiView control on the right side of the GridView and the Find Users panel. Drag and drop five View controls inside the MultiView control. Furthermore, drag and drop a Panel control in each of the View controls and set their GroupingText property to User Status, User Activity, Security, Role Management, and Profile Management, respectively. Design the first View control as shown in Figure 16.


Figure 16: The View control for displaying User Status.


The View for User Status consists of three CheckBox controls and a Button control. The checkboxes indicate if the user is active, locked out, or online. The administrator can mark a user as inactive by un-checking the Is Active checkbox. The Is Locked Out checkbox is enabled only if the user is locked; i.e., a user can only be unlocked by the administrator. The Is Online checkbox is always disabled it simply displays the online status of the user. The changes can be saved by clicking the Save Changes button. Now design the second View control as shown in Figure 17.


Figure 17: The View control for displaying User Activity.


The second View control shows the activity of the user in terms of creation date, last activity date, last lockout date, last login date, and last password change date. All the information displayed here is read-only. Design the third View control as shown in Figures 18 and 19.


Figure 18: The View control for managing security details.


Figure 19: The View control for managing security details.


The third View control allows the administrator to change the password of a user or the password question and answer. It also allows the administrator to retrieve or reset the password. The Get Password button is enabled only if the password retrieval feature is enabled on the membership provider. Similarly, the Reset Password button is enabled only if the password reset feature is enabled on the membership provider. Note that for the sake of simplicity we have not taken any care of validating the inputs.


It s time to design the fourth View control. This View control allows the administrator to manage roles in the system, as well as user-to-role mapping. Design the View control as shown in Figure 20.


Figure 20: The View control for managing roles.


The Add/Remove user from role(s) section displays a list of all the roles, with the roles to which the user belongs checked. The administrator can add or remove the user from one or more role(s) and click the Update User Roles button to save the changes. The administrator can also create a new role or delete existing roles. Note that for the sake of simplicity we have not taken any care of validating the inputs. Finally, design the fifth View control as shown in Figure 21.


Figure 21: The View control for managing profiles.


The fifth View control allows the administrator to manage the profile of a user. A DropDownList shows a list of all the profile properties. The property values can be read or changed. Clicking the Save button saves the changes. The administrator can also delete the profile of the user. Note that profile properties can be of a user-defined type (customer class, for example). Such properties, of course, cannot be read or modified via this tool.


That s it! We ve completed designing the user interface of the User Administration Tool. The markup of Members.ascx is bit lengthy and hence not listed here; you can get it in the download file accompanying this article.



Membership, role, and profile features come in handy while building a secure membership-driven Web site. Often the administrators need a tool that allows them to manage users easily. In Part I of this series we kicked off developing such a flexible, yet simple tool. We developed the user interface for a Web user control for managing various aspects of user administration, such as password recovery, role mapping, and profile management. In Part II we ll code the functionality to make our user control, well, functional.


The sample code for this series is available for download.


Bipin Joshi is the founder and owner of BinaryIntellect Consulting (, where he conducts professional training programs on .NET technologies. He is the author of Developer s Guide to ASP.NET 2.0 ( and co-author of three Wrox books on .NET 1.x. He writes regularly for, a community Web site he founded in the early days of .NET. He is a Microsoft MVP, MCAD, MCT, and member of ASPInsiders. He jots down his thoughts about .NET, life, and Yoga at He also conducts workshops on Yoga and Meditation, where he helps IT professionals develop a positive personality. You can contact him at mailto:[email protected].




Hide comments


  • Allowed HTML tags: <em> <strong> <blockquote> <br> <p>

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.