ASP.NET Forms An ASP.NET form is a HTML form plus asp.net code in the form of server controls. ASP.NET form has extra functionality to maintain form data or state (_VIEWSTATE) eg text in a text box –Hidden variable to store ‘coded’ version of the form ASP.NET server controls duplicate the functionality of many HTML elements. –Take the form of an html-like tag, marking the point in the page where the server needs to generate corresponding true HTML elements. (produces server side object that can be manipulated at any part of the code.)

Example: datacontrol2.aspx Sub Page_Load() Dim xmlFilename As String xmlFilename= "C:\cse2030\jason1\artists.xml" Dim newDataSet As New DataSet newDataSet.ReadXML(xmlFilename) DataGrid1.DataSource = newDataSet DataGrid1.DataBind() End Sub Data Grid Control example

ASP.NET execution When a browser requests a web page, server locates the page. If it has an.aspx extension, then the server sends it to aspnet_isapi.dll which forwards it to the CLR. The CLR compiles the code (if it is a new page) and executes it to produce html that is sent to the client. All the ASP.NET code can be in a separate file, know as a code-behind page. –quickstart-aspforms-example13quickstart-aspforms-example13

Web Forms Server side controls Generate output suitable for the browser Preserves state across page refreshes (Viewstate) Raise server side events Used as the base to build richer controls ASP.Net includes a range of useful classes and namespaces –Namespace is like a class library eg. System.Web.UI.HtmlControls –See class browser from last lectureSee class browser from last lecture

What are Server Controls? Server programmable objects –have properties,events,methods that can be accessed at run time (Use Visual Studio.Net at design time) System.Web.UI.WebControls namespace System.Web.UI.WebControls namespace denoted by Tag with the runat=“server” attribute render different HTML to support multiple browser types (eg IE4 and above -rendering implemented on the client; IE3 done by the server) Can create server control from HTML control by adding the runat=“server” attribute –eg

Server Side Controls HTMLControls –System.Web.UI.HtmlControls namespace –Can be directly mapped to HTML tags –Used for backward compatibility with ASP eg Web Controls –System.Web.UI.WebControls namespace –Form based event model eg buttonclick –Offer a richer set of controls implement a number of common properties (properties through class browser) data binding automatic browser detection Programmatic reference of a control is by the unique id attribute eg id=“txtname”

How do server controls work? Declared with the runat=“server” attribute when the aspx page is executed –creates Action and Method attributes of the form –adds unique Id and Name attributes to controls –adds Value attribute to controls –adds a hidden control (_VIEWSTATE) to the form to save form state information

Server control example Sub Page_Load() if Request.Form("list1") <> "" then Message.text = "You have selected " + Request.Form("list1") end if End Sub Drop Down List Example Which city do you wish to look at hotels for? Madrid Oslo Lisbon

Server control example cont 2.

Server control example cont 3.

Server control eg. Cont. 4 – view source. Drop Down List Example You have selected Lisbon Which city do you wish to look at hotels for? Madrid Oslo Lisbon

Server control eg. Cont. 5 - Notes All output from server to browser is HTML New attributes added to form tag – –Post is the asp.net default method –Action attribute points to the same page (listpage.aspx) –A hidden control stores the state of the page –Used by asp.net to keep track of all server control settings from one page refresh to another; otherwise listbox would revert to static default setting every time page is loaded. Very useful for data validation.

HTML controls demo –demo server_controls.aspx (note form state is lost; cf: server_controlsM.aspx) Name: Profession: Software Engineer Software Tester Program Manager

Web Controls There are five types of controls –Intrinsic Controls eg asp:list, asp:button etc –List Controls eg asp:datagrid, asp:datarepeater –Rich Controls eg asp:calander –Validation Controls eg asp:rangeValidator –Custom Controls – user defined They support properties, methods and events System.Web.UI.WebControls namespace

Intrinsic Controls Executed on the server side Accessed via properties/attributes –(some common to all controls eg text, backcolor and other specific eg checked=true for a checkbox) Have associated events Can maintain state information. Output is standard HTML Prefixed with the namespace ‘asp’

Intrinsic Controls (2) HTML Output ASP.NET Intrinsic Controls … … … …

Intrinsic Controls (3) Sample Server Side Code Test1 Test3 Sample Client Side Result Test1 Test3 Two syntax forms: Hello Is the same as

List Controls Displaying lists of data. Also supports additional functionality, including sorting, filtering, selecting items. Five types (next lecture; datacontrol2.aspx-slide 2) –Repeater – Just renders a repeated list –DataList – Like Repeater but with additional formatting functionality –DataGrid – Produces data in a Grid format, but also provides functionality for data editing. –RadioButtonList – Renders the list with RadioButtons associated with each data item. –CheckboxList – Renders the list with CheckBoxes associated with each data item. (Discuss next lecture)

Rich Controls Ever growing list of Rich Controls EG. –Calendar –TreeView –ImageGenerator –AdRotator –Etc (Discuss next lecture)

Validation Controls One of the common tasks of scripts has been validating data entered on the web page ASP.NET simplifies validation via a number of controls (can be either client or server based; can have more than one for a control.) –RequiredFieldValidator –CompareValidator –RangeValidator –RegularExpressionValidator –CustomValidator

Web Control Events Each web control has a number of events (onClick…etc) There are events associated with server events (Page_load..etc) Each event results in a reload of the page via a postback A web control is asociated to an event by setting its attributes - the name of the function which implements the event handler.

Page event life cycle In ASP.NET a structured set of events occurs every time a page is viewed. The order is: –Page_init (done once; useful for variable initialisation) –Page_load (can be used to load data into controls from server DB) see POSTBACK –Change events eg textbox1_changed; by default only click events submit form to the server; change events are queued till then. (Some controls have an AUTOPOSTBACK property which will force a post) –Click event eg button1_click –Page_Unload (last event before page is discarded eg user going to another page; useful for closing files, db’s etc

Event example Sub GreetMe(s As Object, e As EventArgs) label1.Text = "Hello " & txtName.Value & _ ". I see your occupation is " & lstTitle.Value End Sub Name: Profession: Software Engineer Software Tester Program Manager

Event example cont.

What is PostBack? A PostBack is as result of a event within the ASP.NET being triggered. This is opposed to a page request. Using Page.IsPostBack you can determine whether the event is as a result of a Web Control event or a request for the page. Since Web Controls implement ViewState (A Web Control remembers content regardless the number of refreshes), there is no need to requery a database, just to populate controls. PostBack offers the ability to only execute code that is required, not the entire ASP+ script.

Postback example Sub GreetMe(s As Object, e As EventArgs) label1.Text = "Hello " & txtName.Value & _ ". I see your occupation is " & lstTitle.Value End Sub Sub Page_Load(s As Object, e As EventArgs) If Not Page.IsPostBack Then txtName.Value = "Enter your name" End If End Sub Name: Profession: Software Engineer Software Tester Program Manager

Another example -holidaypage.aspx. Holiday page Feiertag Holidays Please enter your details here. Name: Address: Sex - Please select the destination you would like details on: This will not work because don’t work unless they are in the form with runat=“server”. But this stops us using a different form action. Use HTML controls instead. Please enter your details here. Name:

Another eg. cont 1 -holidayresponse.aspx. Sub Page_Load() Response.Write (" Name: " + Request.Form("FullName") + " ") Response.Write (" Address: " + Request.Form("Address") + " ") Response.Write (" Sex: " + Request.Form("Sex") + " ") Response.Write (" Destination: " + Request.Form("Destination") + " ") End Sub Holiday page These details have been entered into our database, you should receive a confirmation from us shortly.

Validation controls revisited Properties –Control to validate –Error message –Display (static or dynamic as to where the error message is displayed) Name: …… <asp:RequiredFieldValidator id="txtNameValidator" runat="server" controlToValidate="txtName" errorMessage="You must enter your name" display="dynamic">

Validation Control eg1. validation.aspx Sub submit(s As Object, e As EventArgs) spnOutputButton.InnerHTML = "Button clicked. Textbox value is " & txtName.Text End Sub Sub lst_change(s As Object, e As EventArgs) spnOutputList.InnerHTML = "Listbox changed to " & lstTitle.SelectedItem.Value End Sub Sub Page_load(s As Object, e As EventArgs) lblListbox.DataBind() End Sub

Validation Control example 2. Name: <asp:RequiredFieldValidator id="txtNameValidator" runat="server" controlToValidate="txtName" errorMessage="You must enter your name" display="dynamic"> <asp:RangeValidator id="txtNameRngValidator" runat="server" controlToValidate="txtName" errorMessage="Please enter a name that begins with 'A'" type="String" minimumValue="A" maximumValue="B" display="dynamic">

Validation Control example 3. Profession: <asp:dropdownlist autopostback=True id="lstTitle" onselectedindexchanged="lst_change" runat="server" > Program Manager Tester User Assistance " />

…. <!-- function __doPostBack(eventTarget, eventArgument) { var theform = document._ctl0; theform.__EVENTTARGET.value = eventTarget; theform.__EVENTARGUMENT.value = eventArgument; theform.submit(); } // -->

Code Behind Allows for the separation of server side code and HTML Create a class file that inherits from ASP.NET Page class –Done automatically by VS.NET

User Controls Can be used to write ‘include files’ to create consistent look and feel End with.ascx Included with Used with TagPrefix and TagName See example source usercontroleg.txtusercontroleg.txt Demo Demo

Configuration and Deployment Configuration details are in a text file called web.config that is structured in XML format. This is in the site’s root folder All files that a Web application needs are in folder under the site’s root folder and DLL’s are in the /bin folder (don’t have to register in the Registry; only need to copy) /wwwroot /webapplication1 - aspx, web.config /bin - dll’s /webapplication2 - aspx, web.config /bin - dll’s