ASP.NET 3.5 Role Based Security and User Authentication Web Development A Further Look

This is the seond part of a tutorial series on developing ASP.NET 3.5 websites that will implement user role based security and user authentication. In the first part, you read about the project background, registering users in the website administration tool, and creating the WorkAssignment MS SQL server database table for saving tasks. We'll continue fleshing out the application here by building some pages essential for the end users: the supervisor and the workers.

Contributed by Codex-M
Rating:

/ 9
August 17, 2010

Rate this Article:
MEH MEH++

SEARCH ASP FREE

Adding the DetailsView Web Control to Assigntasks.aspx

Go to the source code of Assigntasks.aspx. Since DetailsView is a database-driven web control, you need to add a SqlDataSource web control first.

1. Drag SqlDataSource (Toolbox -> Data -> SqlDataSource) to the Assigntasks.aspx source code between <form><div> and </form></div> tags.

2. Go to the Design View. To configure SqlDataSource, go through the following steps:

Right click on the web control -> Show Smart Tag -> Configure Data Source.
Under which Data Connection to connect, select ASPNETDB.MDF database, and click Next.
Check "Yes, save this connection as: ConnectionString."
Under "Specify columns from a table or view," select the "WorkAssignment" table.
Under Columns, check *.
Click "Advanced..."
Check "Generate INSERT, UPDATE, and DELETE statements." This is required since you are inserting records into the database in Assigntasks.aspx. Click OK.
Click Next.
Click Finish.

Now that we've finished configuring SqlDataSource, we need to go back to the design view.

3. In the Design View, click and drag the DetailsView web control (Toolbox -> Data -> DetailsView) below the SqlDataSource.

It should look like the screen shot below:

4. Now we need to configure the DetailsView web control.

Right click the DetailsView web control -> Show Smart Tag.
Under Choose Data Source, select "SqlDataSource1."
Check "Enable Inserting."
Now, under properties at your lower right, under "Behavior," change the DefaultMode to Insert.
Click the DetailsView web control again -> Show Smart Tag -> Edit Fields.
Under Available Fields, select "Tasks" and then click the link "Convert this field into a Template field."
Click OK.
Go to the Source Code view of Assigntasks.aspx and find this line of code:

Change the textbox to Multiline TextMode type so that the administrator can enter more text. The code above should now be:

<InsertItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Tasks") %>' TextMode="MultiLine"></asp:TextBox>
</InsertItemTemplate>

5. Add the page title tag:

<head runat="server">
<title>Assign Tasks</title>
</head>

6. Add some text, such as "Instructions: Supervisor will enter the tasks below." You can add this in the Design View of Visual Web Developer.

Creation of Edittasks.aspx

The task supervisor also needs some way to edit and update tasks given to the workers. This is the purpose of Edittasks.aspx.

The path of this web page is: /aspnetloginexercise/administrator/edittasks.aspx. This is presented using an editable Gridview web control. The steps, which are similar to those in the previous section, are as follows:

1. Add a new ASP.NET page inside the administrator folder and name it Edittasks.aspx.

2. Add SqlDataSource control.

3. Configure the SqlDataSource in the Design View according to following specifications:

Data Connection: ConnectionString
Check "Specify Columns from a table or view." Name of the table: WorkAssignment
Columns: *
Click Advance and check "Generate INSERT, UPDATE and DELETE statements."
Click Next and Finish.

4. Click and drag the Gridview web control below SqlDataSource in Design.

5. Configure Gridview as follows:

Right click on it in Design View and click "Show Smart tag."
Choose Data Source: SqlDataSource1
Check the following:

Enable Paging
Enable Sorting
Enable Editing
Enable Deleting

6. Add the page title tag (Go to Source View):

<head runat="server">
<title>Supervisor Edit tasks page</title>
</head>

7. Add some text, such as "Instructions: Edit the worker tasks below."

8. Go to File -> Save All.

9. Your result should like the screen shot below in Design View (also shown are the updated Solution Explorer files):

Creation of Viewtasks.aspx

Viewtasks.aspx is located in the path: /aspnetloginexercise/registeredworkers/viewtasks.aspx

It is situated in the "registeredworkers" directory (to be created in this section). This is the ASP.NET web page where workers log in to see the tasks assigned to them by their supervisor.

This is not editable (unlike the administrator pages); it's for viewing purposes only. The following are the steps you'll take to create this page:

1. Create the registeredworkers folder in the same path as the administrator folder created earlier.

2. Add a new ASP.NET page inside the registeredworkers folder and name this page Viewtasks.aspx

3. Go to File -> Save All.

Your Solution Explorer should then look like this:

4. Go to the Source Code view, and click and drag SqlDataSource. (You want the same location as the previous section).

5. Configure SqlDataSource using the same procedure as we used in the previous section.

Data connection: ConnectionString
Check "Specify Columns from a table or view."
Name of table: WorkAssignment
Columns: *
Click Next and Finish.

Note that there is no editing of advanced SQL parameters, because you do not need to insert and update tasks in Viewtasks.aspx -- remember, it is only for viewing purposes.

6. Click and drag the Gridview web control below SqlDataSource in the Design view.

7. Right click on the Gridview web control, and then click Show Smart tag. Choose Data Source: SqlDataSource1

8. Add the page title tag (Go to Source View):

<head runat="server">
<title>Worker View tasks page</title>
</head>

9. Add some text, such as "Instructions: Workers, view the tasks assigned to you below."

10.) Go to File -> Save All.

Your result should look like the screen shot below after you save the project:

Test the newly-created pages in the browser

To reconfirm that you have created the pages correctly, you should view them in a browser. The steps are as follows:

1. Go to the source view of the ASP.NET page.

2. Go to File -> View in Browser.

Below are the screen shots of the created file in this tutorial; your created pages should like the ones at the links below:

Assigntasks.aspx= http://www.dotnetdevelopment.net/tutorials/assigntasks_aspx.jpg

Edittasks.aspx = http://www.dotnetdevelopment.net/tutorials/edittasks_aspx.jpg

Viewtasks.aspx = http://www.dotnetdevelopment.net/tutorials/viewtasks_aspx.jpg

Please note that those pages are pulling data out of the database table you created in the first part, called the WorkAssignment table.

Do not yet add ant new tasks in Assigntasks.aspx or update/delete/edit any tasks in Edittasks.aspx. We'll continue in part three of this tutorial, which is where we'll start configuring the ASP.NET login controls.