Unit 27 - Web Server Scripting Week 2 Lesson 2 – Validation and Server Side actions

Previously… Capturing User Information Processing User Input

This Lesson Validation Server Side Processing

Validation Controls Form fields are completed Values correspond to a particular format Two fields contain the same value Validation controls format – email address Within a particular range Same value – password confirmation The validation is automatically performed by the control and an error message issued if the validation fails. You do not have to do any coding – only set the correct control properties Validation summary will provide of all the output from the validation control son a page. Can be useful for error checking.

Find the requiredfieldvalidator tool and drag to the web form

Using the Mailing list previous example - Each of these controls are set up by setting the relevant properties. Each control has a ControlToValidate property ErrorMessage property, etc For the regular expression validator – set the ValidateExpression property by clicking on the … to the right of the box. This displays a list of the preset expression for you to choose from eg phone numbers, email etc. NOTE – all it can check is that the format matches the one selected.

Using the Mailing list previous example - Now we have a table of three columns (use the layout tab to add columns or rows to a table)

How ASP.NET works…. User requests a page Request is sent to the web server Web server – If pure HTML then page returned to user If ASP.NET then server processes page User receives HTML page. User requests a page either by typing it in on the address bar of a browser or by clicking a link on a page. Important point – HTML is rendered by the browser on the user’s machine. All the server sends back is a stream of text. Request is sent to the web browser hosting that page. Web server – If pure HTML then page returned to user If ASP.Net then server processes page. This means that ASP.NET will examine the page and see if there is anything it needs to do. This is defined as Server Side Processing as it is happening on the server. The end result of the processing is HTML which is sent back to the user. User receives the HTML page and the browser examines the HTML and shows the page with all the formatting – this is called rendering.

Server-side Processing Statelessness Nothing is maintained in code between page loads Only refers to standard HTML elements & code Postback Information from a control is posted back to the server ASP.NET runs the control and it posts back to browser Server-side events Events are actions that take place when something or someone interacts with a web page Page load event Statelessness – loading a page the first time is different from loading it a second time. ASP.Net has no knowledge of the previous times the page has been loaded. Example – a site where the user logs in. first time user message says ‘Welcome stranger, please login. Second time page loaded message should say ‘welcome’ & User Name ASP.Net assumes they are separate pages so you have to check each time the page loads to see whether the user is logged in for example. Statelessness does not refer to Web controls as these have an inbuilt ability to retain their values each time a page is requested. Postback – think of it in terms of a letter being posted to ASP.NET which then writes a new letter back to you and so on… The postback causes the page to be sent to ASP.NET, which runs thru any processing it needs to and sends the resultant HTML back to the user. The process is the same every time the page is loaded. It has no knowledge of whether the page was loaded before. Events are actions that take place when something or someone interacts with a web page. EG when a button is clicked, an event is generated or RAISed. There is an events button at the top of the properties box for each control. Page load event can be used to detect whether the page has been loaded before by using the IsPostBack property.

Page Load Event Select the “code-behind” tab to show the “code-behind” window. Choose “page-events” from the left hand drop-down list. Choose “Load” from the right-hand drop-down list to display the page load event sub routine. Any actions you want performed on page load can be entered here and will be run each time the page is loaded.

Make a new web page Add the following in order: Button Label

Double Click the Button Add the following code: Label2.Text = "The button has been clicked"

Double Click the Page Add the following code to the pageLoad event: If Page.IsPostBack Then Label1.Text = "The page has been loaded because of a button click" Else Label1.Text = "The page has loaded for the first time" End If Label2.Text = ""

Detecting Postback This is an example of loading a page and detecting postback. The ispostback property is true if the page is being redisplayed, as in the case of a button click. For the first time ispostback is false.

When you try to refresh the page, a message is displayed

Server Side Example Panel LinkButton Why not a HyperLink? Rectangular area Visibility controlled server side LinkButton Click method Returns to same page Why not a HyperLink? Goes to any web page including current one No Click method There is a server-side webform control called a "Panel." A Panel is a rectangular area on your HTML page, the visibility of which can be controlled on the server side. "LinkButton," which is essentially a hyperlink, but can be made to behave like a button via the Click server-side method. Why am I using a LinkButton instead of a hyperlink? The implication of a hyperlink is that you are free to go to any Web page, including the current one. But there is no implication that I want to return to the same page while altering parts of that page. In addition, there is no server-side, convenient method like Click available with a hyperlink. The LinkButton control offers the look and feel of a hyperlink, but with two other benefits, namely: The intention of coming back to the same page when pressed. The convenient method of Click.

Add a Panel Start a new website Add a panel to the first div Press the right arrow key and the press enter twice Add two more panels in this way In panel 1 type: An example of a panel that is going to disappear Change the panel ID to testPanel1 In panel 2 type: Enter your password Change the panel ID to testPanel2 In panel 3 add a button and change the text to: Enter Change the panel ID to testPanel3

Add a link Below the div add the following: A link button Change the text to: Click Me!!

Double Click the Link Button Add the following code to the linkButton section: If TestPanel1.Visible Then TestPanel1.Visible = False Else TestPanel1.Visible = True End If

The idea is that once you set the panel visibility to "false," the entire HTML segment will disappear from view. Every control on your page is represented as a .NET object on the server side. Moreover, the state of these objects (or controls) is maintained between multiple round trips to the server. This allows you to respond to events either on the client or on the server side. While responding to events on the server side, rest assured that when the page is repainted, all of its internals will repaint as if nothing had happened.

Tutorial