CodeTalk
LANGUAGES: C#
ASP.NET VERSIONS: 2.0
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
"System.Data.SqlClient">
Figure 8: Storing a database connection string.
The
connectionStringName="connstr" type="System.Web.Security.SqlMembershipProvider" enablePasswordRetrieval="true" enablePasswordReset="true" passwordFormat="Encrypted" /> type="System.Web.Security.SqlRoleProvider"/> Figure 9:
Configuring the membership and role providers. The Finally, add the markup for configuring the profile
provider and profile properties (see Figure 10). type="System.Web.Profile.SqlProfileProvider"/> Figure 10: Configuring
the profile provider. The 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. 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. 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. 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. 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. 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. 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 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. 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. 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. 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. 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. 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. 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 (http://www.binaryintellect.com),
where he conducts professional training programs on .NET technologies. He is
the author of Developer s Guide to ASP.NET 2.0
(http://www.binaryintellect.com/books)
and co-author of three Wrox books on .NET 1.x. He writes regularly for http://www.DotNetBips.com, 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 http://www.bipinjoshi.com. 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]. Designing the GridView for Displaying a List of Users
Figure 11: The Fields dialog box of the
GridView. 
Figure 12: The ItemTemplate and
EditItemTemplate of GridView. 
Figure 13: The DataBindings dialog
box. 
Figure 14: The ListItem Collection
Editor. Designing a User Interface for Searching Users
Figure 15: The Find Users panel. Designing the User Interface for Creating New Users
Designing the User Interface for Displaying User Details
Figure 16: The View control for
displaying User Status. 
Figure 17: The View control for
displaying User Activity. 
Figure 18: The View control for managing
security details. 
Figure 19: The View control for
managing security details. 
Figure 20: The View control for
managing roles. 
Figure 21: The View control for
managing profiles. Conclusion
