Lab: Building a Web-Based Text Editor | MCAD(s)MCSD Self-Paced Training Kit(c) Developing Web Applications With Microsoft Visual Basic. Net and Microsoft V[. .. ]0-315

Lab: Building a Web-Based Text Editor

In this lab, you will create a multipage Web forms application that allows users to create and edit text files stored on a server. The application uses the user s sign-on name to determine where files are stored. It does not do rigorous password checking in fact, the password is always Guest. Password authentication is covered in Chapter 8, Maintaining Security.

Estimated lesson time: 45 minutes

IMPORTANT
To create and delete files, the ASPNET user account must have write and modify privileges in the application s root folder. By default, the ASPNET user account has only read and execute privileges. See Chapter 9, Building and Deploying Web Applications, for information about how to assign security privileges in the application folder.

Exercise 1: Create the Sign-On Form

In this exercise, you ll create the Web form that allows users to sign on to the text editor. The Web form created here uses validation, flow layout, navigation to other pages, and the System.IO namespace for directory services. When you have finished creating the Web form, it will appear as shown in Figure 4-22.

figure 4-22 the signon.aspx web form

Figure 4-22. The SignOn.aspx Web form

To start the application and create the SignOn Web form

Open a new ASP.NET Web application project. In the New Project dialog box, enter the name WebTextEditor.
In the Properties window, change the name of the Webform1.aspx file to SignOn.aspx.
In the Properties window, select the DOCUMENT object and set the pageLayout property to FlowLayout.

After you ve set pageLayout to FlowLayout, you can add controls to the page by double-clicking the controls in the Toolbox. If you create the controls in the order they appear on the page, this process goes quickly. The following table shows the controls you should create in the order in which you create them, along with their property settings.

Control	Property	Value
Literal	ID	litNoAccount
TextBox	ID	txtName
RequiredFieldValidator	ID	vldtxtName
	ControlToValidate	txtName
	ErrorMessage	Please enter a name.
TextBox	ID	txtPassword
RequiredFieldValidator	ID	vldtxtPassword
	ControlToValidate	txtPassword
	ErrorMessage	Please enter the password.
RangeValidator	ID	vldtxtPasswordGuest
	ControlToValidate	txtPassword
	ErrorMessage	The password is Guest .
	MinimumValue	Guest
	MaximumValue	Guest
Button	ID	butSignOn
	Text	Sign On

After you create the controls and set their properties, switch to HTML view, and edit the HTML elements directly.

To edit the Web form in HTML mode

Right-click the Web form, and select View HTML Source from the shortcut menu.

Edit the Web form by adding the following text and HTML tags shown in boldface:

<form  method="post" runat="server"> <h2> Welcome to the Web-Based Text Editor </h2><asp:Literal  runat="server"></asp:Literal> <p> Please sign on: </p> Name:<asp:TextBox  runat="server" Width="165px"></asp:TextBox> <asp:RequiredFieldValidator  runat="server" ErrorMessage="Please enter a name." ControlToValidate="txtName"></asp:RequiredFieldValidator> <br> <br> Password:<asp:TextBox  runat="server" Width="163px" Height="21p x" TextMode="Password"></asp:TextBox> <asp:RequiredFieldValidator  runat="server" ErrorMessage="Please enter a password." ControlToValidate="txtPassword"></asp:RequiredFieldValidator> <br> <asp:RangeValidator  runat="server" ControlToValidate="txtPassword" ErrorMessage='The password is "Guest".' MaximumValue="Guest" MinimumValue="Guest"></asp:RangeValidator> <br> <br><asp:Button  runat="server" Text="Sign On" Width="61px" Height="28px"></asp:Button> <p> New users click <a href="NewAccount.aspx">here</a> to set up an account. </p></form>

To view the results of the changes, right-click the Web form, and select View Design from the shortcut menu.

When you have finished editing the Web form, switch to Design view and double-click Sign On to display the Code window. Place the following Imports or using statement before the Web form s class definition:

Visual Basic .NET

Imports System.IO

Visual C#

using System.IO;

Add the following code to the butClick event procedure:

Visual Basic .NET

Private Sub butSignOn_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles butSignOn.Click Dim strPath As String 'If the user exists, there is a directory of the same name. strPath = Server.MapPath(Request.ApplicationPath) & "\" & txtName. Text If Directory.Exists(strPath) Then ' Set session variables. Session("Path") = strPath Server.Transfer("FileManager.aspx") Else ' Otherwise, report that user wasn't found. litNoAccount.Text = ("<p>The name " & txtName.Text & _  " wasn't found." & _  "Check the name, or click <A href='NewAccount.aspx'>here</ A>" & _  " if you are a new user.</p>") End If End Sub

Visual C#

private void butSignOn_Click(object sender, System.EventArgs e) { string strPath; // If the user exists, there is a directory of the same name. strPath = Server.MapPath(Request.ApplicationPath) + "\\"  + txtName.Text; if(Directory.Exists(strPath)) { // Set session variables. Session["Path"] = strPath; Server.Transfer("FileManager.aspx"); } else // Otherwise, report that user wasn't found. litNoAccount.Text = "<p>The name " + txtName.Text +  " wasn't found. Check the name, or click " +  "<A href='NewAccount.aspx'>here</A> if you " +  "are a new user.</p>"; }

Exercise 2: Create the NewAccount Form

In this exercise, you ll create the Web form that creates an account for new users. In this application, an account consists of a directory in the application s root that bears the user s name. Again, there is no security provided in this exercise; security is covered in Chapter 8, Maintaining Security.

The Web form created here uses validation, flow layout, navigation, HTML controls, and the System.IO namespace for directory services. The form uses the username to create a directory for the user s files in the application s server root. When you have finished creating the Web form, it will appear as shown in Figure 4-23.

figure 4-23 the newaccount.aspx web form

Figure 4-23. The NewAccount.aspx Web form

To create the NewAccount Web form

Create a new Web form named NewAccount.aspx.
In the Properties window, select the DOCUMENT object and set its pageLayout property to FlowLayout.

Add controls and set their properties as shown in the following table:

Control	Property	Value
Literal	ID	litNameExists
TextBox	ID	txtName
RequiredFieldValidator	ID	vldtxtName
	ControlToValidate	txtName
	ErrorMessage	Please enter a name.
Button	ID	butCreate
	Text	Create
Button HTML control	id	butCancel
	value	Cancel

Switch the Web form to HTML view, and add the following text and HTML tags shown in boldface:

<form  method="post" runat="server"> <h2> Create an Account </h2><asp:Literal  runat="server"></asp:Literal> <p> You do not currently have an account on the server. <br> Type the name you would like to use to sign on below, then click Create to create the account. </p><asp:TextBox  runat="server" Width="153px" Height="24px"></asp:TextBox> <asp:RequiredFieldValidator  runat="server" ErrorMessage="Please enter a name." ControlToValidate="txtName"></asp:RequiredFieldValidator> <p> </p><asp:Button  runat="server" Text="Create" Width="67" Height="24"></asp:Button> &nbsp;&nbsp; <INPUT type="button" onclick="history.back()" value="Cancel"></BUTTON> </form>

The last edit in the preceding HTML code, onclick="history.back()", enables the user to cancel the operation without causing validation. Using an HTML control here is important because you don t want server-side processing you just want to go back to the SignOn Web form.

When you have finished editing the Web form, switch back to Design view and double-click Create to display the Code window. Place the following Imports or using statement before the Web form s class definition:

Visual Basic .NET

Imports System.IO

Visual C#

using System.IO;

Add the following code to the butCreate_Click event procedure:

Visual Basic .NET

Private Sub butCreate_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles butCreate.Click Dim strPath As String 'Check if directory exists. strPath = Server.MapPath(Request.ApplicationPath) & "\" & txtName. Text If Directory.Exists(strPath) Then ' Tell the user to choose another name. litNameExists.Text = "<p>The name " & txtName.Text & _  " already exists. Please choose a different one.</p>" Return Else Try ' Create the directory. Directory.CreateDirectory(strPath) ' Set the session variable. Session("Path") = strPath ' Go to file manager. Server.Transfer("FileManager.aspx") Catch ex As System.UnauthorizedAccessException Server.Transfer("NotAuthorized.aspx") End Try End If End Sub

Visual C#

private void butCreate_Click(object sender, System.EventArgs e) { string strPath; //Check if directory exists. strPath = Server.MapPath(Request.ApplicationPath) + "\\"  + txtName.Text; if (Directory.Exists(strPath)) { // Tell the user to choose another name. litNameExists.Text = "<p>The name " + txtName.Text +  " already exists. Please choose a different one.</p>"; return; } else { try { // Create the directory. Directory.CreateDirectory(strPath); // Set the session variable. Session["Path"] = strPath; // Go to file manager. Server.Transfer("FileManager.aspx"); } catch (System.UnauthorizedAccessException ex) { Server.Transfer("NotAuthorized.aspx"); } } }

Exercise 3: Create the File Manager Form

In this exercise, you ll create the Web form that lets users create, open, and delete files in their accounts on the server. The Web form created here uses data binding, flow layout, navigation, QueryStrings, and the System.IO namespace for file access. When you have finished creating the Web form, it will appear as shown in Figure 4-24.

figure 4-24 the filemanager.aspx web form

Figure 4-24. The FileManager.aspx Web form

To create the FileManager Web form

Create a new Web form named FileManager.aspx.
In the Properties window, select the DOCUMENT object and set its pageLayout property to FlowLayout.

Add controls and set their properties as shown in the following table:

Control	Property	Value
Literal	ID	litNoFile
TextBox	ID	txtNewFile
Button	ID	butNew
	Text	New
Literal	ID	litNoneSelected
ListBox	ID	lstFiles
	DataSource	strFiles
Button	ID	butEdit
	Text	Edit
Button	ID	butDelete
	Text	Delete

Switch the Web form to HTML view, and add the following text and HTML tags shown in boldface:

<form  method="post" runat="server"> <h2> File Manager </h2> <p> To create a new file, type the name of the file below and click New. </p><asp:Literal  runat="server"></asp:Literal> <asp:TextBox  runat="server" Width="191px"></asp:TextBox> <asp:Button  runat="server" Width="62px" Height="29px" Text="New"></asp:Button> <p> To edit a file, select the file from the list below and click Edit. Click Delete to delete the selected file. </p><asp:Literal  runat="server"></asp:Literal> <asp:listbox  runat="server" Width="252px" Height="161px" DataSource="<%# strFiles %>"></asp:listbox> <br><asp:Button  runat="server" Width="62" Height="29" Text="Edit"></asp:Button> &nbsp;&nbsp; <asp:Button  runat="server" Width="62px" Height="29px" Text="Delete"></asp:Button> </form>

When you have finished editing the Web form, switch back to Design view and double-click New to display the Code window. Place the following Imports or using statement before the Web form s class definition:

Visual Basic .NET
```
Imports System.IO
```
Visual C#
```
using System.IO;
```

Add the following code to the form event procedures:

Visual Basic .NET

Public strPath As String, strFiles As String() Private Sub Page_Load(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles MyBase.Load ' Get path. strPath = Session("Path") ' If this is not a post-back event. If Not IsPostBack Then Dim iCount As Integer 'Get list of files in the current directory. strFiles = Directory.GetFiles(strPath) ' Get the short names for the files. For iCount = 0 To UBound(strFiles) strFiles(iCount) = Path.GetFileName(strFiles(iCount)) Next End If ' Bind lstFiles to file array. lstFiles.DataBind() End Sub Private Sub butNew_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles butNew.Click ' If there is a file name, then start the editor. If txtNewFile.Text <> "" Then Response.Redirect("EditFile.aspx?file=" & txtNewFile.Text) Else ' Otherwise, display a message. litNoFile.Text = "<p>You must enter the name of a file" & _  " to create.<p>" End If End Sub Private Sub butEdit_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles butEdit.Click ' If there is a file name, then start the editor. If Not IsNothing(lstFiles.SelectedItem) Then Response.Redirect("EditFile.aspx?file=" & _ lstFiles.SelectedItem.ToString) Else ' Otherwise, display a message. litNoneSelected.Text = "<p>You must select a file.<p>" End If End Sub Private Sub butDelete_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles butDelete.Click ' If there is a file name, then start the editor. If Not IsNothing(lstFiles.SelectedItem) Then Try Dim filToDelete As File filToDelete.Delete(strPath & "\" & _ lstFiles.SelectedItem.ToString) lstFiles.Items.Remove(lstFiles.SelectedItem) Catch ex As System.Security.SecurityException Server.Transfer("NotAuthorized.aspx") End Try Else ' Otherwise, display a message. litNoneSelected.Text = "<p>You must select a file.<p>" End If End Sub

Visual C#

string strPath; public string[] strFiles; private void Page_Load(object sender, System.EventArgs e) { // Get path. strPath = Session["Path"].ToString(); // If this is not a post-back event. if(!Page.IsPostBack) { // Get list of files in the current directory. strFiles = Directory.GetFiles(strPath); // Get the short names for the files. for (int iCount = 0; iCount <= strFiles.GetUpperBound(0); iCount++) strFiles[iCount] = Path.GetFileName(strFiles[iCount]); } // Bind lstFiles to file array. lstFiles.DataBind(); } private void butNew_Click(object sender, System.EventArgs e) { //If there is a file name, then start the editor. if (!(txtNewFile.Text == "")) Response.Redirect("EditFile.aspx?file=" + txtNewFile.Text); else // Otherwise, display a message. litNoFile.Text = "<p>You must enter the name of a file " +  " to create.<p>"; } private void butEdit_Click(object sender, System.EventArgs e) { // If there is a file name, then start the editor. if (lstFiles.SelectedItem != null) Response.Redirect("EditFile.aspx?file=" + lstFiles.SelectedItem.ToString()); else // Otherwise, display a message. litNoneSelected.Text = "<p>You must select a file.<p>"; } private void butDelete_Click(object sender, System.EventArgs e) { // If there is a file name, then start the editor. if (lstFiles.SelectedItem != null) try { File.Delete(strPath + "\\" + lstFiles.SelectedItem.ToString()); lstFiles.Items.Remove(lstFiles.SelectedItem); } catch(System.UnauthorizedAccessException ex) { Server.Transfer("NotAuthorized.aspx"); } else // Otherwise, display a message. litNoneSelected.Text = "<p>You must select a file.<p>"; }

Exercise 4: Create the File Editor Form

In this exercise, you ll create the Web form that edits files stored on the server in the user s account. The Web form created here uses the same layout and programming techniques as the Web form example in Exercise 3. When you have finished creating the Web form, it will appear as shown in Figure 4-25.

figure 4-25 the editfile.aspx web form

Figure 4-25. The EditFile.aspx Web form

To create the File Editor Web form

Create a new Web form named EditFile.aspx.
In the Properties window, select the DOCUMENT object and set its pageLayout property to FlowLayout.

Add controls and set their properties as shown in the following table:

Control	Property	Value
TextBox	ID	txtEditFile
	TextMode	Multiline
Button	ID	butSave
	Text	Save
HTML Button	id	butCancel
	value	Cancel
Button	ID	butExit
	Text	Exit

Switch the Web form to HTML view, and add the following text and HTML tags shown in boldface:

<form  method="post" runat="server"> <h2> File Editor </h2> <p> Edit the file below. Click Save to save your changes or Cancel to abandon changes. </p><asp:TextBox  runat="server" Width="448px" Height="253px" TextMode="MultiLine"></asp:TextBox> <p> </p><asp:Button  runat="server" Width="65" Height="30" Text="Save"></asp:Button> &nbsp;&nbsp; <INPUT  onclick="history.back()" type="button" value="Cancel" style="WIDTH: 65px; HEIGHT: 30px"> &nbsp;&nbsp;<asp:Button  runat="server" Width="65" Height="30" Text="Exit"></asp:Button> </form>

When you have finished editing the Web form, switch back to Design view and double-click New to display the Code window. Place the following Imports or using statement before the Web form s class definition:

Visual Basic .NET
```
Imports System.IO
```
Visual C#
```
using System.IO;
```

Add the following code to the form event procedures:

Visual Basic .NET

Dim strPath, strFile As String Private Sub Page_Load(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles MyBase.Load ' Get the path and file names. strPath = Session("Path") strFile = Request.QueryString("file") ' If this is not a post-back event. If Not IsPostBack Then Dim strmEditFile As StreamReader Try ' Open the file. strmEditFile = File.OpenText(strPath & "\" & _ strFile) ' Read its text. txtEditFile.Text = strmEditFile.ReadToEnd.ToString ' Close the file. strmEditFile.Close() Catch ex As System.IO.FileNotFoundException ' If it doesn't exist, create it. File.CreateText(strPath + "\\" + strFile).Close() ' Clear text box. txtEditFile.Text = "" Catch ex As System.UnauthorizedAccessException Server.Transfer("NotAuthorized.aspx") End Try End If End Sub Private Sub butExit_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles butExit.Click If ViewState("changed") Then SaveFile() End If ' Return to File Manager. Server.Transfer("FileManager.aspx") End Sub Private Sub txtEditFile_TextChanged(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles txtEditFile.TextChanged ' Set changed flag. ViewState("changed") = True End Sub Private Sub butSave_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles butSave.Click SaveFile() End Sub Private Sub SaveFile() Dim strmEditWrite As StreamWriter ' Delete the file. File.Delete(strPath & strFile) ' Create the file with new text. strmEditWrite = File.CreateText(strPath & "\" & strFile) strmEditWrite.Write(txtEditFile.Text) strmEditWrite.Close() ' Reset changed flag. ViewState("changed") = False End Sub

Visual C#

string strPath; string strFile; private void Page_Load(object sender, System.EventArgs e) { // Get the path and file names. strPath = Session["Path"].ToString(); strFile = Request.QueryString["file"]; // If this is not a post-back event. if (! Page.IsPostBack) { StreamReader strmEditFile; try { // Open the file. strmEditFile = File.OpenText(strPath + "\\" + strFile); // Read its text. txtEditFile.Text = strmEditFile.ReadToEnd().ToString(); // Close the file. strmEditFile.Close(); } catch(FileNotFoundException ex) { // If it doesn't exist, create it. File.CreateText(strPath + "\\" + strFile).Close(); // Clear text box. txtEditFile.Text = ""; } catch(System.UnauthorizedAccessException ex) { Server.Transfer("NotAuthorized.aspx"); } } } private void butExit_Click(object sender, System.EventArgs e) { if ((ViewState["Changed"] != null) && (ViewState["Changed"].ToString() == "true")) SaveFile(); // Return to File Manager. Server.Transfer("FileManager.aspx"); } private void txtEditFile_TextChanged(object sender, System.EventArgs e) { // Set changed flag. ViewState["Changed"] = "true"; } private void butSave_Click(object sender, System.EventArgs e) { SaveFile(); } void SaveFile() { StreamWriter strmEditWrite; // Delete the file. File.Delete(strPath + strFile); // Create the file with new text. strmEditWrite = File.CreateText(strPath + "\\" + strFile); strmEditWrite.Write(txtEditFile.Text); strmEditWrite.Close(); // Reset changed flag. ViewState["Changed"] = "false"; }

Exercise 5: Create the Not Authorized Web Form

As mentioned at the beginning of this lab, you must authorize the ASPNET user account to create and delete files in the application s root folder. If you don t grant these permissions, all attempts to create, save, or delete files result in a System.UnauthorizedAccessException error.

The code in the preceding exercises handles this error by using Try Catch/try catch exception handling blocks. If the error occurs, the Web-Based Text Editor displays a Web form with instructions for how to fix the error, as shown in Figure 4-26.

figure 4-26 the notauthorized.aspx web form

Figure 4-26. The NotAuthorized.aspx Web form

To create the Not Authorized Web form

Add a new Web form to the project, and name it NotAuthorized.aspx.

Switch to HTML mode, and add the following HTML to the Web form:

<h2>You are not authorized for this request.</h2> <p> This error occurs when ASPNET user account is not authorized to access , create, or modify&nbsp;a folder or file on the server. Use Windows Explorer to set the permissions for the project folder to allow the ASPNET user account to modify, read, and write files to that folder. </p> <a href="SignOn.aspx">Return to sign-on.</a>