Information Systems Engineering. Presenting data in web pages Using ASP.NET

Size: px

Start display at page:

Download "Information Systems Engineering. Presenting data in web pages Using ASP.NET"

Roxanne Mason
5 years ago
Views:

1 Information Systems Engineering Presenting data in web pages Using ASP.NET 1

2 HTML and web pages URL Request HTTP GET Response Rendering.html files Browser <html> <head> <title>.. </title> </head> <body> <h1>. </h1> <a href=. >. </a>.. <p>. </p> </body> <html> An HTML page static content and formatting Web Server MIB - ESIN apm@feup 2

3 POST and forms Form URL Request HTTP POST other files Response submit Browser <html> <head>. </head> <body> <form method= post action=.. > <p>enter your name: <input type= text name= Name /></p> <p>you program with:<br> <input type= checkbox name= C />C#<br> <input type= submit value= Submit id= OK /> </p> </form> </body> </html> Web Server.html files An HTML page with a form Info sent to the server: Name=Some Name& C=on MIB - ESIN apm@feup 3

4 ASP.NET Form Browser URL browser renders the page Request Address of an.aspx file HTTP GET Response Submit HTTP POST The server builds an.aspx files html text based on the aspx instructions and constructions (controls) Round trip response New version of form ASPX pages can contain HTML and special constructions (controls) that are converted to html. Also there can be code files to process data and respond to events. The server collects the values, generates events and processes them building a new html text as a response based on the aspx instructions and constructions IIS Server code behind MIB - ESIN apm@feup 4

5 Visual Studio 2010 New Web Site project MIB - ESIN apm@feup 5

6 New Web Site Language for the code behind Where Directory for site Skeleton to create MIB - ESIN apm@feup 6

7 First page Select a new item for the site MIB - ESIN apm@feup 7

8 A Web Form Specify a Web Form Name MIB - ESIN apm@feup 8

9 The web site with an empty page MIB - ESIN apm@feup 9

10 ASP.NET processing Before any transformed.aspx page is sent to the browser the Page Load event is generated in the server The events can have handlers (which are functions in the code behind files) defined for them If a handler exists for an event it will be executed by the server before the page is transformed in HTML and sent to the browser The Page Load event is generated every time the page is sent to the browser, and is the first to be executed It can be used to initialize the page interface controls It s possible to distinguish a first request (first http address in the browser) from a post-back (response to an user interaction) Use the boolean property IsPostBack MIB - ESIN apm@feup 10

11 The Page Load event handler.aspx page file event handler function code behind file MIB - ESIN apm@feup 11

12 ASP.NET web server controls ASP.NET defines a large number of pre-built controls representing programmable (in code behind) elements of the web page Usually these controls are processed by the server whenever the page is sent to the browser They are inserted in the page using a tag similar to the HTML syntax Format: <asp:[name] attributes runat= server id=[ var ] /> Several properties can be defined in attributes and a variable (id) represents it in the code behind The interaction with the user can modify its content, trigger an event (e.g. click), and/or cause a post- -back MIB - ESIN apm@feup 12

13 Some controls displayed in VS2010 Some ASP.NET controls in the VS2010 toolbox A page, a control and its properties The event list will be shown clicking this button MIB - ESIN apm@feup 13

14 Generating the event handler A handler function can be generated in the code behind file by double clicking the event in the list MIB - ESIN apm@feup 14

15 The Label control Displays text on the page Included in a.aspx page as <asp:label /> The text can be set previously and changed in code Use the property Text Do not use it for static, unchangeable text Has many other properties for colors, size, font, border, enable, visible, tooltips, Accepts some HTML formatting: <b></b>, <i></i>, <u></u>, Does not trigger special events MIB - ESIN apm@feup 15

The Button control The button control renders as a button and is mainly used for doing a post-back of the page Included as <asp:button /> Has the usual appearance and size

16 The Button control The button control renders as a button and is mainly used for doing a post-back of the page Included as <asp:button /> Has the usual appearance and size properties and also a Text property for the button label Causes a post-back to the server Triggers the Click event that can be handled in the server MIB - ESIN apm@feup 16

17 The TextBox control Usually allows text input from the user Included in the.aspx file as <asp:textbox /> The text will be available in the server after a post- -back in the control property Text Can be read only (boolean ReadOnly property) and present one or more lines or replace the visualization by stars (password mode) The property TextMode can have values SingleLine, MultiLine or Password The number of lines is set in the property Rows The maximum number of characters is set in the MaxLength property Triggers the event TextChanged when the user leaves the TextBox having done some change This may or may not cause a post-back It s controlled by the AutoPostBack property MIB - ESIN apm@feup 17

The Image control The Image control allows the display of several formats of images that can be specifyed programmatically The image should be indicated in the

18 The Image control The Image control allows the display of several formats of images that can be specifyed programmatically The image should be indicated in the ImageURL property Other important properties include AlternateText and ToolTip This control does not trigger events nor causes a post-back MIB - ESIN apm@feup 18

19 CheckBox and RadioButton These controls allow the reading and setting of boolean values They have attached a label in the Text property that can be positioned at the right or left (TextAlign) The value is set or read in Checked property Trigger the event CheckedChange, but usually don t cause a post-back Post-back is caused by the AutoPostBack property They can be grouped in the CheckBoxList and RadioButtonList controls A CheckBoxList allows its check boxes to be checked independently In a RadioButtonList only one radio button can be checked If there is one checked it is automatically unchecked when the user checks another MIB - ESIN apm@feup 19

20 DropDownList and ListBox The controls display lists of items and allows the user to select one, or even more We can define the list items defining each item in the interface or in programming When the user selects a new item the SelectedIndexChanged event is triggered They have an Items collection property wich is na array of items Each item has a Selected property (boolean) a Text and a Value (String) The Text is the displayed String The DropDownList shows only an Item but can be expanded The ListBox can shows several at a time and can be scrolled They generate a post-back if the AutoPostBack property is set MIB - ESIN apm@feup 20

21 The BulletedList control Allows us to create lists with bullets or numbers The items can be hyperlinks, text or link buttons The items can respond to clicks and do what is assigned to the item The control can trigger the TextChanged event and the Click event It can cause a post-back The list items are defined also in an Items collection which is an array of items MIB - ESIN apm@feup 21

22 ListBox and BulletedList MIB - ESIN apm@feup 22

CST272 Getting Started Page 1

CST272 Getting Started Page 1 1 2 3 4 5 6 8 Introduction to ASP.NET, Visual Studio and C# CST272 ASP.NET Static and Dynamic Web Applications Static Web pages Created with HTML controls renders exactly