User and Role Management for an ASP.NET AJAX Server-Centric Based Online Shopping Website

Now let’s explore the role-related tasks.

Role Management

Role management is accomplished through the "RoleManage.aspx" page. We can enumerate its functionalities as follows:

1. Display the present roles in an ASP.NET ListBox control. 
   
2. Provide hyperlinks to add new roles. 
   
3. Provide hyperlinks to modify ready roles. 
   
4. Delete current roles.
   

Author's Note: I want to stress three points. First, to further enhance the safety of the whole system, this part of role management is designed to be independent of other modules, and i.e. it should be launched independently. Second, this part of role management has also been designed to follow traditional pure ASP.NET models. Thus, we mainly dwell on the operating principles of the modules. Third, although we provide the functionalities of adding, modifying, and deleting roles this is just for more flexibility in real world applications. In this example, however, we are merely concerned with three types of roles: ‘Super Administrator’, ‘Supplier’, and ‘Common Customer’. Although we can change their names, they do take on three different types of roles, which will be more carefully studied in the last part of the sample application.

Role Management

First, let’s take a quick glimpse at the running-time snapshot for role management, as is shown in Figure 10 below.

Figure 10—the running-time snapshot for role management

On the left of this simple page there already exist three typical roles: Super Administrator, Supplier, and Common Customer. On the right of the page there are two image-styled buttons with the first pointing to the "EditRole.aspx" page and the second triggering the action to delete the selected role on the left, respectively.

Let’s see the related code when the page is loaded, as follows:

protected void Page_Load(object sender, EventArgs e) {

//bind data to the control

if(!Page.IsPostBack) {

BindRoleData();

}

///add the dialog that confirms the user to make the deletion

deleteBtn.Attributes.Add("onclick","return confirm('Are you sure to delete the selected items?');");

}

private void BindRoleData(){

///define the class that gets the data

Role role = new Role();

SqlDataReader recr = role.GetRoles();

///Set the control's data source

RoleList.DataSource = recr;

RoleList.DataTextField = "RoleName";

RoleList.DataValueField = "RoleID";

///bind data to the control

RoleList.DataBind();

///Close the database connection

recr.Close();

}

As the above comments indicate, we first bind the corresponding data to the "RoleList" ListBox control by calling a helper function named BindRoleData. Then we attach a client-side click handler to the "deleteBtn" button by invoking the Addmethod of its collection member —Attributes. When the user selects one of the roles on the left side of the page, the deletion-operation-related event handler will be triggered. The following lists the associated code snippet:

protected void deleteBtn_Click(object sender,ImageClickEventArgs e){

if(RoleList.SelectedIndex <= -1) {

Response.Write("<script>window.alert('Please select the item.')</script>");

return;

}

///define the classRole

Role role = new Role();

///delete data

role.DeleteRole(Int32.Parse(RoleList.SelectedValue));

///display the info of the operating result

Response.Write("<script>window.alert('Deleting successfully!')</script>");

///rebind data

BindRoleData();

}

Since the code is well commented, we won't discuss it much. The only point that needs to be noticed is that after the deletion is finished the "RoleList" ListBox is updated.

New Role

When the above pencil-like image button is clicked, the user is redirected to another page, "EditRole.aspx," whose running time snapshot is captured in the following Figure 11.

Figure 11—the running-time snapshot for Adding a new role

The following code corresponds to the programming of the click event handler of the "Add" button:

protected void AddBtn_Click(object sender,EventArgs e) {

///add data

Role role = new Role();

role.AddRole(RoleName.Text);

Response.Write("<script>window.alert('Succeed in adding data!')</script>");

}

Here, first create an instance of the Role class, then by invoking the "AddRole" of the instance, the newly-entered role name is saved into the server-side database. That’s all.

When the "Add a New Role" button is clicked, however, the user will be redirected to another page, "AddRole.aspx," whose running time snapshot is captured in the following Figure 12.

Figure 12—the running-time snapshot for modifying a specified role

Also a simple page! And since the coding behind is pretty intelligible too, we are not going to waste any ink on the explanation. Interested readers may do further research by examining the downloadable source code.

User Management

User Management

The first point to notice is that the "Usermange.aspx" page can be run independently. It can also be run in the mode that grants the current user  the identity of the "Super Administrator" role when he logs into the system. The second point to notice is that this is still a pure ASP.NET page. To simplify the design we isolate the "Adding a New User" operation from the main page (i.e. herein the "Usermange.aspx" page). Maybe in other design ideas the adding operation together with the "Usermange.aspx" page will be incorporated into one page, which will drastically increase the complexity of the design. The design complexity will also be increased, of course, when other ASP.NET AJAX solutions are advised to be used such as the UpdatePanelcontrol as well as the PopupControl Extender to facilitate the in-place editing, etc.

As usual, let’s first have a look at the design-time snapshot of the "Usermange.aspx" page, as shown in Figure 13.

Figure 13—the design-time snapshot for managing users

Seen from the above figure, the following functionalities will be performed in this page:

1. Display the present users’ info in an ASP.NET 2.0 GridView control.
   
2. Provide hyperlinks to add new users by clicking the "Add new user" button.
   
3. Provide hyperlinks to modify ready users by clicking the "Edit" hyperlink within the GridView control. 
   
4. Delete current users by clicking the "X" hyperlink within the GridView control. 
   
5. View the interested user’s detailed info by clicking the fields in the "User Name" column within the GridView control to redirect the current user to another "UserInfo.aspx" page.

Page Initialization

During the course of the initialization of the page, the main functionality is to display the general user info within the GridView control, i.e. binding data to the "UserView" GridView. The associated code is listed as follows:

protected void Page_Load(object sender,EventArgs e)

{ ///bind data to the GridView control

if(!Page.IsPostBack) {

BindUserData();

}

}

private void BindUserData(){

///define the class that gets the data

User user = new User();

SqlDataReader dr = user.GetUsers();

///Set the control's data source

UserView.DataSource = dr;

///bind data to the control

UserView.DataBind();

///Close the database connection

dr.Close();

}

Here with the help of the GetUsers member methodof the User class, we have easily achieved our goal.

Deleting the Selected User

Deleting the Selected User

When clicking the "X" within the GridView control, the deleting function is triggered to delete the current user.

protected void UserView_RowDataBound(object sender,GridViewRowEventArgs e)

{ ///find the 'Delete' button

ImageButton deleteBtn = (ImageButton)e.Row.FindControl("DeleteBtn");

if(deleteBtn != null)

{ ///add the dialog that confirms the user to make the deletion

deleteBtn.Attributes.Add("onclick","return confirm('Are you sure to delete the selected items?');");

}

}

protected void UserView_RowCommand(object sender,GridViewCommandEventArgs e)

{

if(e.CommandName == "delete"){

///delete data

User user = new User();

user.DeleteUser(Int32.Parse(e.CommandArgument.ToString()));

///rebind data to the control

BindUserData();

Response.Write("<script>alert('" + "Deleting successfully. Please safekeep your data!" + "');</script>");

}

}

Note the the RowDataBoundand RowCommandevent handlers are very important and typical functions in handling the GridView control. Here, we first find the deleting related ImageButton by calling the GridViewRowEventArgs.Row.FindControl. Then, we attach a client-side "confirm" dialog box to the "deleteBtn" button. Now clicking the "X" hyperlink within the GridView control triggers the UserView_RowCommand eventin which we first find the special "delete" command, then perform the deletion by calling the DeleteUser member methodof the User class, and finally update the GridView control and display to the user a friendly hint for this operation.

Adding Background Users

Adding Background Users

Clicking the "Add new user" button within the GridView control will redirect the user to another important page, "AddAdminUser.aspx." On the face of it, this part is pretty similar to the user registration discussed before, but here we can assign special kinds of roles to the newly-added user whereas the foreground user registration can not.

Interface Design

When designing this page, we’ve also introduced three ASP.NET AJAX Extender controls: TextBoxWatermarkExtenderto render the watermark effect to the "UserName" TextBox, PasswordStrengthto test the strength of the password the user enters, and ValidatorCalloutExtenderto give a friendlier hint message when the user enters an invalid email address. The following figure 14 gives the corresponding design-time snapshot.

Figure 14—the design-time snapshot for registering background users

There’s nearly nothing peculiar here but a DropDownList control named "RoleList" for the manager to select the role!

Page Initialization

There’s only one task to perform in initializing the page: binding data to the "RoleList" DropDownList control.

protected void Page_Load(object sender,EventArgs e) {

///bind data to the control

if(!Page.IsPostBack) {

BindRoleData();

}

}

private void BindRoleData(){

///define the class that gets the data

Role role = new Role();

SqlDataReader recr = role.GetRoles();

///Set the control's data source

RoleList.DataSource = recr;

RoleList.DataTextField = "RoleName";

RoleList.DataValueField = "RoleID";

///bind data to the control

RoleList.DataBind();

///Close the database connection

recr.Close();

}

Here we’ve also appended sufficient comments for readers to refer to. So, let's continue to see the adding operation.

Adding a Background User

The adding function here is also simple.

protected void SureBtn_Click(object sender,EventArgs e){

User user = new User();

int nUserID = user.AddUser(UserName.Text,RealName.Text,Password.Text,

Address.Text,Phone.Text,Mobile.Text,Email.Text,

Int32.Parse(RoleList.SelectedValue),Remark.Text);

Response.Write("<script>alert('" + "Adding operation is successful. Please safekeep your data!" + "');</script>");

}

As you’ve seen, after adding the new user data into the back end database we only need to show the manager a friendly hint message.

Last but not least, when you test this page you should remember the phone and mobile numbers format or modify them according to you own needs.