Build a User Administration Tool: Part I

CodeTalk

LANGUAGES:C#

ASP.NETVERSIONS: 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 iteasy to develop a membership-driven Web site. However, equally important is away to administer and manage the users registered with the Web site. If youhave managed any membership-driven Web site, you likely are familiar with thecomplaints about forgotten passwords, forgotten user ids, and changes in e-mailaddresses.

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

The User Administration Tool

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

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

Figure 1: The User AdministrationTool.

The tool consists of four major sections. On the top itprovides 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 allthe users, or a list of users filtered according to the search criteria. Theuser can be deleted using the Delete button. There is a DropDownList thatallows you to select which options to display, and, upon clicking the Showbutton, the information is displayed on the right side. You can also change thee-mail address and comments of a user. Below the GridView is where you cancreate new users.

The right side, i.e., the area below the Managing Detailsfor... 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 newWeb User Control named Members.ascx. Open SQL Server Management Studio andcreate a new database named UserAdminToolTestDb. Note that we could ve used anexisting database, such as Northwind, but for the sake of completeness we arecreating a new database. Figure 2 shows the New Database dialog box of SQLServer Management Studio.

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

Configuring Membership, Role, and Profile Providers

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

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

Figure 3: Step 1 of the aspnet_regsql.exetool.

Figure 4: Step 2 of the aspnet_regsql.exetool.

Figure 5: Step 3 of the aspnet_regsql.exetool.

Figure 6: Step 4 of the aspnet_regsql.exetool.

Figure 7: Step 5 of the aspnet_regsql.exetool.

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

Configuring the Membership, Role, and Profile Providers for aWeb Site

Configuring your database for supporting membership, role,and profile features is only part of the story. We also need to configure the Website 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 datastore. This is achieved by adding some markup in the web.config file. Open theweb.config file and add a section, as shown in Figure8.

 "System.Data.SqlClient">

Figure 8: Storing adatabase connection string.

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

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 tag configures the membershipprovider, whereas the tag enables and configures the roleprovider. Both these sections point to our database connection string (connstr).Note how password reset and retrieval features are enabled using enablePasswordResetand enablePasswordRetrieval attributes. Also note how the password storageformat is specified using the passwordFormat attribute. The passwordFormatattribute takes three possible values: Clear, Encrypted, and Hashed. Because weare using a SQL Server database, the type attribute of membership configurationis set to System.Web.Security.SqlMembershipProvider. The SqlMembershipProviderclass handles all the intricacies of membership management with the underlyingdatabase. Along the same lines, the type attribute of role managerconfiguration points to System.Web.Security.SqlRoleProvider.   Finally, add the markup for configuring the profileprovider and profile properties (see Figure 10).    type="System.Web.Profile.SqlProfileProvider"/> Figure 10: Configuringthe profile provider.   The section does two jobs. First, itconfigures the profile provider; second, it configures the profile propertiesand groups. The profile provider configuration points to our connection string.This time the type that handles the ins and outs of profile management isSystem.Web.Profile.SqlProfileProvider. Various profile properties and a profilegroup is defined with and tags, respectively.We have deliberately added a DateTime property called DOB so we can test theimplication of using data types other than string. We have also added aproperty group so that we can test how these groups can be accessed (thesepoints 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 listof users in a GridView. To do so, open the Members.ascx user control that weadded to the Web site earlier. Add to the user control designer a base tablewith three rows and two columns. Drag and drop a GridView control. A collectionof 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 theGridView click on the Edit Columns... link to open the Fields dialog box; Figure11 shows the Fields dialog box of the GridView.  
Figure 11: The Fields dialog box of theGridView.   Add a TemplateField and set its HeaderText property toUsers. Ensure that the Auto-generate fields checkbox is unchecked and close thedialog box. Design the ItemTemplate and EditItemTemplate as shown in Figure 12.  
Figure 12: The ItemTemplate andEditItemTemplate of GridView.   The ItemTemplate consists of a Label control fordisplaying the user name, a HyperLink control for displaying an e-mail address,and another Label control for displaying comments about the user. The templatealso has Button controls titled Edit and Delete. Finally, there is aDropDownList that contains possible user options (Status, Security, etc.) and aButton titled Show.   Once you design the ItemTemplate, open the smart tag foruser name Label and select the Edit DataBindings... option to open the DataBindingsdialog box, as shown in Figure 13.  
Figure 13: The DataBindings dialogbox.   Select Text from the Bindable properties list. In the Codeexpression textbox enter Eval( UserName ). This will bind the Text property ofthe Label with the UserName property of the underlying data element. Similarly,bind the Text and NavigateUrl properties of the HyperLink with the Emailproperty of the underlying data element. Also bind the Text property of the commentlabel to the Comment property of the underlying data element. From the smarttag of DropDownList select the Edit Items... option to open the ListItemCollection Editor, as shown in Figure 14.  
Figure 14: The ListItem CollectionEditor.   Add five items, namely Status, Activity, Security, Roles,and Profile. Finally, set the CommandName property of the Edit and Deletebuttons to Edit and Delete , respectively. This completes the design ofItemTemplate.   The EditItemTemplate consists of a Label control fordisplaying the user name and two textboxes for editing e-mail and comments,respectively. The newly entered data is saved using the Save button and theedit operation can be cancelled using the Cancel button. Data bind the Labeland textboxes with UserName, Email, and Comment properties exactly as before. Also,set the CommandName property of the Save and Cancel buttons to Update andCancel, respectively. This completes the design of EditItemTemplate.  Designing a User Interface for Searching Users To design a user interface for searching users, drag anddrop a Panel control above the GridView that we just designed. Set theGroupingText property of the panel to Find Users. Add a table with four rowsand two columns and place controls as shown in Figure 15.  
Figure 15: The Find Users panel.   The Find Users panel consists of two textboxes foraccepting 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 willdisplay only the matching records in the GridView. At the top is a LinkButtonfor clearing the filter criteria so that the GridView displays the completelist of users.  Designing the User Interface for Creating New Users Designing the user interface for creating new users isfairly easy. Simply drag and drop a CreateUserWizard control below the GridViewthat 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 ofMultiView and View controls. To design the interface, drag and drop a MultiViewcontrol on the right side of the GridView and the Find Users panel. Drag anddrop five View controls inside the MultiView control. Furthermore, drag anddrop a Panel control in each of the View controls and set their GroupingTextproperty to User Status, User Activity, Security, Role Management, and ProfileManagement, respectively. Design the first View control as shown in Figure 16.  
Figure 16: The View control fordisplaying User Status.   The View for User Status consists of three CheckBoxcontrols and a Button control. The checkboxes indicate if the user is active,locked out, or online. The administrator can mark a user as inactive byun-checking the Is Active checkbox. The Is Locked Out checkbox is enabled onlyif 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 onlinestatus of the user. The changes can be saved by clicking the Save Changesbutton. Now design the second View control as shown in Figure 17.  
Figure 17: The View control fordisplaying User Activity.   The second View control shows the activity of the user interms 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 managingsecurity details.  
Figure 19: The View control formanaging security details.   The third View control allows the administrator to changethe password of a user or the password question and answer. It also allows theadministrator to retrieve or reset the password. The Get Password button isenabled only if the password retrieval feature is enabled on the membershipprovider. Similarly, the Reset Password button is enabled only if the passwordreset feature is enabled on the membership provider. Note that for the sake ofsimplicity we have not taken any care of validating the inputs.   It s time to design the fourth View control. This Viewcontrol allows the administrator to manage roles in the system, as well as user-to-rolemapping. Design the View control as shown in Figure 20.  
Figure 20: The View control formanaging roles.   The Add/Remove user from role(s) section displays a listof all the roles, with the roles to which the user belongs checked. Theadministrator can add or remove the user from one or more role(s) and click theUpdate User Roles button to save the changes. The administrator can also createa new role or delete existing roles. Note that for the sake of simplicity wehave not taken any care of validating the inputs. Finally, design the fifthView control as shown in Figure 21.  
Figure 21: The View control formanaging profiles.   The fifth View control allows the administrator to manage theprofile 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 thechanges. The administrator can also delete the profile of the user. Note thatprofile 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 ofthe User Administration Tool. The markup of Members.ascx is bit lengthy andhence not listed here; you can get it in the download file accompanying thisarticle.  Conclusion Membership, role, and profile features come in handy whilebuilding a secure membership-driven Web site. Often the administrators need atool that allows them to manage users easily. In Part I of this series wekicked off developing such a flexible, yet simple tool. We developed the userinterface for a Web user control for managing various aspects of useradministration, such as password recovery, role mapping, and profilemanagement. In Part II we ll code the functionality to make our user control,well, functional.   The sample code forthis series is available for download.  Bipin Joshi is thefounder and owner of BinaryIntellect Consulting (http://www.binaryintellect.com),where he conducts professional training programs on .NET technologies. He isthe 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 communityWeb 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, andYoga at http://www.bipinjoshi.com. Healso conducts workshops on Yoga and Meditation, where he helps IT professionalsdevelop a positive personality. You can contact him at mailto:[email protected].