1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2.

transcript

HTML, GUI, ASP.NETHTML, GUI, ASP.NET

Rina Zviel-Girshin

Lecture 2

Overview

HTML GUI in Web Environment ASP.NET Studio.NET

HyperText Markup Language. Developed by Tim Berners-Lee in 1990.

HTML file is a text file with hypertext (links) and tags (instructions) added to it The file contains no hidden instructions, only instructions

how to display the text The general format for a HTML tag is:

<tag_name>piece of text</tag_name> An opening tag: <title> , a closing tag: <\html>

HTML page

Basic idea: present all formatting information in a universally-agreed-upon mark up language

Ship this text file from computer A to computer B On computer B, use a special program (browser) that uses the

mark up instructions to render the document’s text on the scree

Fred Foonly <BR><I> Aventura Ave 23 <BR>Palo Alto, CA. </I>

The HTMLsource file:

Fred FoonlyAventura Ave 23Palo Alto, CA.

The HTML source file, as displayed by the browser:

HTML tags

You can learn html using my html tutorial at: http://www2.kinneret.ac.il/girshin/ip/myint/ex1.html

Basically tags can be divided into the following groups: Text formatting tags:<b>,<font>,<I>,<u>,<code>,<pre> Formatting: <br>,<center>,<hr> Block level tags: <address>,<h1-h6>,<p>,<div> List tags: <ul>,<ol>,<li>,<menu> Table tags: <table>,<tr>,<td>,<caption> Forms: <form>, <input> ,<select>,<textarea>

HTML is not a case sensitive language: <img>=<Img>=<IMG>=<iMg> and more

More about tags

Tags can have properties. Example:

<body background="marble.gif" text=red> <font color=green size=7>This is a green text.</font>

Exist a group of multimedia tags: Image: <img src=somefile> Video: <img> tag and dynsrc="FileName" attribute:

<img dynsrc="FileName" loop=infinite> Sound: <bgsound SRC=“File.mid" loop=5>

Hyperlink to the specific location

To create a hypertext you have to use an anchor tag <a> The link to this place is created using the following code:

<a href=“address"> Jump to some text</a> An address can be:

local (only file name directory) <a href=“my/rina.html"> global (computer name and protocol should be mentioned> <a

href=“http://www.idc.ac.il/index.html"> Local or global – to a specific bookmark <a

href=“http://www.idc.ac.il/index.html#definition"> But you have to create a bookmark: <a name="PlaceName"></a> tag before this

specific place

Suppose you want to set a link to a specific place in another document then the link you use should be.

Another multi-line document. You defined , bookmarked .

My bookmark.

Another text.

HTML GUI tags and events

The most used form tag is an <input> tag. The type of input is specified with the type attribute.

<type input=“type”> The most commonly used input types are:

text password button checkbox radio file For almost every tag events can be defined.

Additional tags: select, textarea <select>

<option value='RED'>red<option value='WHITE' selected>white</select>

Input type button Example>html><head></head<

>body><center<>h3>Form Input Button Example</h3<

>form> <input type=button value="RED" onclick="document.bgColor='red<"'> input type=button value="BLUE" onclick="document.bgColor='blue<"'

> input type=button value="GREEN" onclick="document.bgColor='green<"'/>form></center<

/>body></html<

Select list example

<html><head></head><body><center><h3>Form Select List Example</h3><form> <select name="s" onChange="document.bgColor=s.options[s.selectedIndex].value"> <option value='RED'>red <option value='WHITE' selected>white <option value='BLACK'>black <option value='GREEN'>green <option value='BLUE'>blue </select></form> </center></body></html>

where Selected list item is - s.options[s.selectedIndex]

Select list example

HTML page

A User Agent (browser) asks for an HTML page by sending HTTP request to the web-server.

Web-server sends a response which includes the required page including additional data objects.

Browser displays the file.

User can view an entire code using “view source” option.

PC runningUA – IE

Serverhttp request html pagehttp response html page

Server side programming

What happens if you want to hide the information.

If you want to send only an output. You don’t want to reveal data base and table

names.

Use server side scripting languages.

Why ASP.NET?

ASP.NET makes building real world Web applications relatively easy.

Displaying data, validating user input and uploading files are all very easy. Just use correct classes/objects.

ASP.NET uses predefined .NET Framework classes: over 4500 classes that encapsulate rich functionality like

XML, data access, file upload, image generation, performance monitoring and logging, transactions, message queuing, SMTP mail and more

ASP.NET pages work in all browsers including Netscape, Opera, AOL, and Internet Explorer.

ASP.NET in the Context of .NET Framework

Operating SystemOperating SystemOperating SystemOperating System

Common Language RuntimeCommon Language RuntimeCommon Language RuntimeCommon Language Runtime

Base Class LibraryBase Class LibraryBase Class LibraryBase Class Library

ADO.NET and XMLADO.NET and XMLADO.NET and XMLADO.NET and XML

ASP.NETASP.NETWeb Forms Web ServicesWeb Forms Web Services

WindowsWindowsFormsForms

Common Language SpecificationCommon Language SpecificationCommon Language SpecificationCommon Language Specification

VBVBVBVB C++C++C++C++ C#C#C#C# JScriptJScriptJScriptJScript J#J#J#J#V

isual S

al Stu

isual S

al Stu

ASP.NET page modus operand

Usually ASP.NET page constructed from regular HTML instructions and server instructions.

Server instructions are a sequence of instructions that should be performed on server.

An ASP .NET page has the extension .aspx.

ASP+ = ASP.NETASP+ = ASP.NET If UA requests an ASP .NET page the server processes any

executable code in the page (the code can be written in current page or can be written in additional file).

The result is sent back to the UA.

Adding Server Code

You can add some code for execution simply by adding syntactically correct code inside <% %> block.

Inside <% %> block you write instruction that should be implemented on server machine.

Example:<html>

</center> </body> </html>

Where now() returns the date on the server computer and adds it to the resulting html page.

Response is a Response object and it has a write method that outputs it’s argument to the resulted text.

Dynamic Pages

ASP.NET pages are dynamic. Different users get different information. In addition to using <% %> code blocks to add

dynamic content ASP.NET page developer can use ASP.NET server controls.

Server controls are tags that can be understood by the server and executed on the server.

Types of Server Controls

There are three types of server controls: HTML Server Controls – regular HTML tags with

additional attribute id and runat=“server”directive: <input id="field1" runat="server">

Web Server Controls - new ASP.NET tags that have the following syntax:

<asp:button id="button1" Text="Click me!" runat="server" OnClick="submit"/>

Validation Server Controls – those controls are used for input validation:

<asp:RangeValidator ControlToValidate=“gradesBox" MinimumValue="1" MaximumValue="100" Type="Integer" Text="The grade must be from 1 to 100!" runat="server" />

More about server controls in the future

How to run ASPX file? To run ASPX file on your computer you need to install

IIS, .NET SDK, IE6 and Service Pack 2. Now you can write asp.net pages using any text editor

- even Notepad! Exists many other tools Visual Studio.NET or Web-Matrix. Place your code to the disk:\Inetpub\wwwroot directory (or

you can change this default directory). Now open your browser and request the following page:

http://127.0.0.1/mypage.aspx or http://localhost/mypage.aspx

It is a loopback call. Your PC now plays 2 roles: a client and a server.

Language Support

The Microsoft .NET Platform currently offers built-in support for three languages:

C#, Visual Basic and Jscript (Microsoft JavaScript)

You have to specify language using one of the following directive <script language="VB" runat="server">

<%@Page Language=“C#” %>

The last directive defines the scripting language for the entire page.

What’s in a name? Web Forms

All server controls must appear within a <form> tag. The <form> tag must contain the runat="server"

attribute. The runat="server" attribute indicates that the form

should be processed on the server. An .aspx page can contain only ONE <form

runat="server"> control. That is why .aspx page is also called a web form.

Web Forms creation

ASP.NET supports two methods of creation dynamic pages: a spaghetti code - the server code is written within

the .aspx file. a code-behind method - separates the server code

from the HTML content. 2 files – .cs and .aspx

Spaghetti code - Copy.aspx

<%@ Page Language="C#" %><script runat=server>

void Button_Click(Object sender, EventArgs e) { field2.Value = field1.Value; }

</script>

<html><body><form Runat="Server">Field 1:<input id="field1" size="30" Runat="Server"><br>Field 2: <input id="field2" size="30" Runat="Server"><br><input type="submit" Value=“Submit Query”

OnServerClick="Button_Click" Runat="Server"></form></body></html> A server code is written

within the .aspx file

Output

The output after

inserting wwww to the first field and pressing

the button.

Code-behind– myCodeBehind.cs file

using System;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.HtmlControls;

public class myCodeBehind: Page {

protected Label lblMessage;

protected void Button_Click(Object sender , EventArgs e)

{ lblMessage.Text="Code-behind example"; }

Presentation.aspx file

<%@ Page src="myCodeBehind.cs" Inherits="myCodeBehind" %>

<html><body> <form runat="Server"> <asp:Button id="Button1" onclick="Button_Click"

Runat="Server" Text="Click Here!"></asp:Button> <br/> <asp:Label id="lblMessage" Runat="Server"></asp:Label> </form></body></html>

The Code-Behind Example Output

After onclick event

ASP.NET Execution ModelClient Server

public class Hello{protected void Page_Load(Object sender, EventArgs e){…}}Hello.aspx.cs

First requestPostback

Output Cache

Studio.NET

Very simple Microsoft Environment for project development.

You can use Studio.NET 2003 or 2005 (with web application) or Microsoft ASP.NET Web Matrix.

How to work with web applications http://msdn2.microsoft

.com/en-us/library/aa730880(VS.80).aspx

More about web-applicationshttp://forums.asp.net/thread/1279716.aspx

Open a correct Project

An output

After Button1 click

1 HTML, GUI, ASP.NET Rina Zviel-Girshin Lecture 2.

Documents