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 plus POSTBACK) 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.)
Transcript
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 plus POSTBACK) 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<%@ Page language="VB" runat="server" %><%@ Import namespace="System.Data" %><%@ Import namespace="System.XML" %><script language="vb" runat="server"> 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</script><html> <head> <title>Data Grid Control example</title> </head> <body> <asp:DataGrid id="DataGrid1" runat="server" /> </body> </html>
Artists.xml<?xml version="1.0"?><artist> <item> <name>Vincent Van Gogh</name> <nationality>Dutch</nationality> <movement>Post Impressionism </movement> <birthdate>30th March 1853</birthdate> </item> <item> <name>Paul Klee </name> <nationality>Swiss </nationality> <movement>Abstract Expressionism </movement> <birthdate>18th December 1879</birthdate> </item> <item> <name>Max Ernst </name> <nationality>German </nationality> <movement>Surrealism </movement> <birthdate>2nd April 1891</birthdate> </item></artist>
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-example13
• 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
– System.Web.UI.HtmlControls namespace– Can be directly mapped to HTML tags– Used for backward compatibility with ASPeg <input type=“text” runat=“server” id=“txtname” value=“mytext” >
• 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<asp:textbox id=“txtname” runat=“server” text=“mytext”>
• 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<script runat="server" language="vb"> Sub Page_Load() if Request.Form("list1") <> "" then Message.text = "You have selected " + Request.Form("list1") end if End Sub</script><html> <head> <title>Drop Down List Example</title> </head> <body> <asp:label id="message" runat="server"/> <br /> <form runat="server"> <!– notice no action or method attributes --> Which city do you wish to look at hotels for?<br /><br /> <asp:dropdownlist id="list1" runat="server"> <asp:listitem>Madrid</asp:listitem> <asp:listitem>Oslo</asp:listitem> <asp:listitem>Lisbon</asp:listitem> </asp:dropdownlist> <br /><br /><br /><br /> <input type="Submit"> </form> </body> </html>
Server control example cont 2.
Server control example cont 3.
Server control eg. Cont. 4 – view source.<html> <head> <title>Drop Down List Example</title> </head> <body> <span id="message">You have selected Lisbon</span> <br /> <form name="_ctl0" method="post" action="listpage.aspx" id="_ctl0"><input type="hidden" name="__VIEWSTATE"
• New attributes added to form tag– <form name="_ctl0" method="post" action="listpage.aspx" id="_ctl0">– 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 – same controls but with runat=“server”)
• 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
<asp:label id=“message1” forecolor=“red” runat=“server”> Hello </asp:label> Is the same as<asp:label id=“message1” forecolor=“red” runat=“server” text=“Hello”/>
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
• 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; triggered by events eg
• 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 associated to an event by setting its attributes - the name of the function which implements the event handler.
HTML Control Server Event Handlers
• Client-side controls have events such as onClick and onChange are associated with HTML client controls – To be able to detect these events on the server, Visual
Studio .NET will create a generic JavaScript event handler called _doPostBack
– The event sends the name of the control (eventTarget) and any arguments (eventArgument) back to the server when the event is intercepted
– This handler only is required once per page, and is written by the server, not the programmer
• OnServerChange event occurs when an HTML server control value has changed
function __doPostBack(eventTarget, eventArgument) {
var theform = document.ctrl0;
theform.__EVENTTARGET.value = eventTarget;
theform.__EVENTARGUMENT.value = eventArgument;
theform.submit();
}
// -->
</script>
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
• 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 of 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.
This will not work because <asp:..> 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. <br /><br /> Name:<input type="text" id="FullName" runat="server" /> <br /><br />
Another eg. cont 1-holidayresponse.aspx.<script runat="server" language="vb"> Sub Page_Load() Response.Write ("<b>Name:</b> " + Request.Form("FullName") + "<br />") Response.Write ("<b>Address:</b> " + Request.Form("Address") + "<br />") Response.Write ("<b>Sex:</b> " + Request.Form("Sex") + "<br />") Response.Write ("<b>Destination:</b> " + Request.Form("Destination") + "<br />") End Sub</script><html><head> <title>Holiday page</title></head><body> <br /><br /> These details have been entered into our database, you should receive a confirmation email from
us shortly.<br /><br /></body> </html>
Validation controls revisited• Properties of the validation control
– Control to validate (id of control)
– Error message– Display (static or dynamic as to where the error message is displayed)
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)
![02 - [ASP.NET Core] ASP.NET Core MVC](https://static.documents.pub/doc/80x56/58ab940f1a28abe3188b5603/02-aspnet-core-aspnet-core-mvc.jpg)