SSE698Project3

= SSE 698 =
 * Professional Seminar - Web Development **


 * David Thrasher **

= Project 3 = The third and final project for this class I will demonstrate the more detailed parts of ASP .NET. I will do this by modifying the existing website I created and cover each of the following ASP items located in the list below that I submitted in project 1.
 * Introduction**

//List of ASP topics that are covered in project 2:// a) Creating User Controls b) Create own ‘data types’ c) Get data from users d) Validation of input e) Send e-mail f) AJAX g) Web Services h) Using Databases with ASP i) Login Controls

User controls are similar to a ‘@ Page’ in that it can have C# code written for it, the only difference is it has a ‘@ Control’ at the start of its web code and it is saved as an ‘.ascx’ file. In order to create a user control, the ‘Controls’ folder in the Solution Explorer and select ‘Add New Item’. This is depicted in the image below.
 * Creating User Controls**

Then set the name of the file, I used mine to create a banner for the website that would always be visible on the pages shown by the ‘Master’ page. The creation of the user control ‘SchoolBanner.ascx’ file is shown in the image below.

Once the page loaded, it resembled a regular page in ‘Design’ view I added new pictures to my images and put them onto the user control. Next, an image tag was used and I placed one of the images into the user image tag which. Then I did a copy and paste of that code and linked the ‘ImageUrl’ tag to another image. Each of the image tag’s were inside their own ‘Panel’ ASP tag with a unique ID. That code is depicted in the image below.

To use this I had to edit the web.config file to have the tag ‘Wrox’ be associated with the tag name ‘SchoolBanner’ and include the source for the control file. This is depicted in the image below.

The control is setup and ready to be added to a page. I wanted the banner to be used throughout the website so I added it to the ‘Master’ page. To do this I did a drag and drop of the user control I just created to the ‘Master’ page. The image below depicts the result of the drag and drop.

Then I had to add the tag I created in the ‘web.config’ file to use the control properly. The image below shows the correct tag for the user control.

Like a page the control also has a ‘.cs’ C# file associated with it. This control has the ability to change the banner from a vertical to a horizontal image. I will show the code behind this in the next section of the document which is the Create own ‘data types’ section.

Creating a data type for a website is a little misleading. Though a variable is created that acts like a data type, it is really the name of an enumeration that can select the elements inside of its enumerations. To get started creating a data type, a new item needed to be added to the ‘App_Code’ folder as shown in the image below.
 * Create own ‘data types’**

I named this ‘direction.cs’ and created a public enumeration. The enumeration’s name is ‘direction’ and it contains two elements named ‘horizontal’ and ‘vertical’. The image below shows the C# code for the enumeration on the ‘direction.cs’ file.

Code needed to be added to the ‘SchoolBanner.ascx.cs’ file to use the enumeration. A get/set is setup with the public newly defined data type ‘direction’ named ‘DisplayDirection’. The new data type ‘DisplayDirection’ is a type of ‘direction’ that can be sent to ‘Horizontal’ or ‘Vertical’. The ‘Page_Load’ for the user control takes reads the current value of ‘DisplayDirection’ by throwing it into a switch statement. Before that happens, both of the banner images are set to be hidden and then when the current ‘direction’ is found in the case, the correlating image is shown. The code below depicts this which is in the ‘SchoolBanner.ascx.cs’ file.

On the ‘Master’ page I added code do define the direction of the ‘Wrox’ ‘SchoolBanner’ user control. The image below shows the ‘DisplayDirection’ set to ‘Horizontal’ in the user control in the ‘Master’ pages web code.

When the page is loaded with the ‘DisplayDirection’ set to ‘Horizontal’ the page is loaded as shown in the image below.

When the page is loaded with the ‘DisplayDirection’ set to ‘Vertical’ the page is loaded as shown in the image below.

I get data from the users when they choose to add a new student on the ‘students.aspx’ webpage. I do this by having three text boxes named ‘firstTxtBox’, ‘lastTxtBox’, and ‘ageTxtBox’. In the C# code they can be read when the button is clicked and processes as needed. The blue box below shoes the C# code getting the data from the display’s text boxes and adding it into the table. The blue box is the part that processes the user’s input.
 * Get data from users**

Later the site is designed to add the data in those text boxes to the database. The text should then be validated to be sure incorrect data is not inserted. This is discussed in the next section which is the validation of the input.

The validation tool provided by ASP .NET is easy and affective. I was able to add a new column to the rows in the table that the text boxes used to get the user’s input on a student’s name to hold the validation information. The validation that was added to the names is shown in the code below where the highlighted parts link the validation tag ‘ControlToValidate’ to the ID of the text box it is checking. This disables the page to move on with the button click unless those text boxes have values.
 * Validation of input**

The age text box is different; the validation used is the ‘RangeValidator’ where the text it contains must have a value that is no less than 0 and no greater than 100. I link the ‘ControlToValidate’ tag to the ID tag of the text box. The image below depicts the validation.

I ran into a strange error with the ‘RangeValidator’ where I could only use the number 1 to allow me to click the button. The image below shows the error with an appropriate age entered.

I looked at the source of this page and saw it was set up correctly. The source for this page is displayed below with the ranges max value highlighted and the min value under that row.

I do not know why I was getting the error; the source clearly shows ‘RangeValidator1’ is setup correctly.

There is an e-mail feature in ASP that allows users to send e-mails using an SMTP server. I do not have an SMTP server, nor did I want to install one on the laptop I am using to slow it down but I will show the code behind that would be used to set this up.
 * Send e-mail**

I added a web page named ‘mail.aspx’ to the ‘Master’ page that contains a large text box and a button to send the mail. The web code for this page is shown below.

The C# code for the ‘mail.aspx.cs’ file setups up a ‘MailMessage’ object named ‘sendMail’. I added the e-mail’s subject and body to that object. The person the e-mail was being sent from and the address it was going to were also added to the ‘sendMail’ object. Then the ‘SmtpClient’ class was used to create ‘mailSmtpClient’ object is used to call the SMTP server with the send method that takes a ‘MailMessage’ object. I did not install a e-mail server but the code that depicts this is shown below.

The image below depicts the web page that is going to send the e-mail if I had an SMTP server installed.

The image below depicts the exception that is thrown when the button is clicked to send the e-mail.

AJAX is an acronym for Asynchronous JavaScript and XML. This is the coupling of JavaScript and XML into a web page. This is sufficient in that it gives the ability to run embedded code on the console reading the webpage instead of receiving the information from a server. I chose to add the AJAX the timer tool to the “Master” page’s web code. I set it to run every 5 seconds by setting the ‘Interval’ value to 5000. The image below depicts the timer code added to the page that runs every five seconds.
 * AJAX**

The timer has an ‘ontick’ tag that is set to ‘Timer1_Tick’ that is located in the ‘Master’ page’s ‘MasterPage.master.cs’ file. I added a text box named ‘changeLbl’ that accepts user input. If the user enters anything into that text box, it will be displayed on the ‘Label1’ which is the main title in the ‘p’ tags used to set up the page. The image below shows this code that is called from the AJAX timer ‘Timer1_Tick’.

When the timer ticks and the user has changed data, the image below shows an example of the user changing the title ‘p’ tag’s text.

Web services uses methods that have the ability to call functions over the internet that are used on different web platforms. This gives ASP the ability to retreave information from a PHP server or from a client interface’s JavaScript. I will use JavaScript to show this concept.
 * Web Services**

The first thing that needed to be setup is the web service file. I have never done this in ASP and followed the books example. First I created a file named ‘NameService.cs’ in the ‘App_Code’ folder. Then I added code to that file to return the sent text instead of just returning the string “Hello World” that it had auto filled. The image below depicts the edit I did to the “HellowWorld” method where it takes a string, appends it to the end of the string “Hellow”, and returns it to the client calling the web method.

The image above shows that the ‘[System.Web.Script.Services.ScriptService]’ is not commented out. This has to be seen so the JavaScript on the client’s screen can call the function.

Then I added the ‘ScriptManagerProxy’ to the ‘Master’ page so the code could be visiable to the ‘Content’ pages under the ‘Master’ page. The image below shows the proxy setup with the ‘Serives’ tags and the ‘ServiceReference’ to the ‘NameService.asmx’ file.

Next a text box named ‘nameInputTxt’ was added with a button named ‘nameBtn’. Right under that is JavaScript located inside ‘script’ tags. The JavaScript sets the button ‘nameBtn’ up to call the JavaScript function ‘SayHellow’ when it is clicked. The ‘SayHellow’ function then sets up a variable named ‘tempName’ with the contents of the ‘nameInputTxt’ and calls the method in the ‘NameService’ named ‘HelloWorld’ and passes it the value in ‘tempName’ and the client side JavaScript function that ill receive the result of the web ‘HelloWorld’ web method. The ‘HelloCallbak’ method takes the sent result and displays the result information using a JavaScript ‘alert’. The code that does this is depicted in the image below.

The image below is the web page before anything has been added to the text next to the ‘nameBtn’ which has the text ‘Hello Button’ displayed.

The image below shows the text ‘test’ in the ‘nameInputTxt’ label next to the ‘nameBtn’. When the user has entered text ‘test’ into the ‘nameInputTxt’ text box and they click the ‘nameBtn’, the code in the ‘NameService.cs’ appends ‘test’ to the end of the string ‘Hello’ and sends it back where it is then displayed. The image below shows this result.

To create a database in SQL 2008 I used the Visual Web Developer 2008 application. I created a database file named ‘schoolDB.mdf’ in the ‘Data Connections’ section of the ‘Database Explorer’. Then I right clicked on the ‘Table’ folder and selected ‘Add New Table’. The process I just described is depicted in the image below. I added a table named ‘students’ and double clicked to set the columns in the table. I set one column up as an incrementing integer for the primary key and named it ‘studentID’. I set a varchar(50) column to hold the first name named ‘nameF’ and another to hold the last name named ‘nameL’. I also setup another integer column named age to hold the age of the students. The image below shows the columns setup.
 * Using Databases with ASP**

Then I right clicked on the table and selected ‘Show Table Data’ to edit the contents of the data inside the table. The image below depicts that.

Then I added the following data, shown in the image below, into the table so I would have something to pull form the database.

I had to set the table up I added the file ‘getStudents.dbml’ to the ‘App_Code’ folder and did a drag drop of the students table to the file. This is depicted in the image below.

I had to setup the connection in the ‘getStudent.dbml’ file so it would be able to call the database form the server. The code below shows the line of code that I added to this file with the database information.

Once I had that setup I wanted to change how the ‘sutents.aspx’ page was getting its information. I changed the arrays to lists so the ‘var’ that is returned by the LINQ connection can be looped over with a ‘for each’ loop. I setup the lists as string lists and ran a connection to the database that stores the results of the query to the ‘getData’ which is stored in a ‘var’. This is used to loop over with a ‘foreach’ loop by putting the variables in another ‘var’ named ‘theData’. The data in this is stored in the list associated with that variable. Then another query is run that counts the total rows in the table and stores that in the ‘arraySize’ integer which is used to loop over and setup the table.

This populates the table ‘Students’ page as shown in the image below.

The insert that is done when the user clicks on the button on the image above named ‘Add Student’ was much more difficult to get working. I kept getting an error saying I could not update because I did not have a primary key set on the table.

After hours of failure I finally found some code online using LINQ with visual basic that had a parameter setup for a column in the table. I remembered when I set the ‘getStudents.dbml’ file up I saw parameters that looked like what I was sing in the visual basic code so I added the tag ‘IsPrimaryKey’ to the ‘studentID’ column and set it to ‘true’. The code I inserted is depicted in the image below.

For the insert I setup an object named ‘stu’ which is from the ‘student’ class. Then I add the name and age data to that object. I do a query to get the total number of rows in the database and add one to that number for the ‘studentID’ primary key. Then I insert the data on submit to the database. The code that is used to insert into the table is shown in the image below.

This is the data of a student I am about to add to the table which is shown in the image below.

After the button is clicked the data is added to the table in the database which loads it to the table on the page as shown in the image below.

The login controls I thought it was going to be the most challenging part of the project but I turned out to be pretty simple. First I dragged the login control to the ‘Default.aspx’ page as shown below.
 * Login Controls**

Then I setup the code for the ‘Sign UP for an Account’ to point to send the user to the page ‘signUp.aspx’. On that page I did a drag and drop of the ‘UserCreateWizard’ which did almost all of the work for me. I ran the page and went to setup an account as shown below. This resulted in a validation error that was setup by the wizard shown in the image below.

I fixed the error and clicked ‘Create User’ again and was sent to the page shown below.

I setup the ‘DirecgtionPageUrl’ on the ‘Login’ control to point to the “MasterPage/Default.aspx’ page. On the ‘Master’ page I added a ‘LoginView’ so the users could see their username when they logged in. The ‘Design’ view allows me to do this as shown in the image below.

Once the user logs into the website, it is displayed in that location as shown in the image below.

I learned many new things using ASP .NET that I did not know could be done with ASP. My background using classic ASP was not that much help considering the vast amount of things that can be done using ASP .NET with OOP code running in the background. I always thought of ASP as another way to connect a database to a website but that has changed over the course of this quick semester. If I were to create my own website I would use like to use ASP .NET for its ease of use and quick creation of professional looking pages. I do have to say I would not like to use LINQ ever again. I like writing my SQL code by hand and Microsoft’s attempt to create an object variable to do this is confusing. I have used ‘CodeGear’ to do this in the past and I found that had lots of quirky issues which make LINQ seem great. In my opinion plane SQL is still the best way to do anything with a database.
 * Conclusion**