Transcript intro
HTML, GUI, ASP.NET
Rina Zviel-Girshin
Lecture 2
1
Overview
HTML
GUI in Web Environment
ASP.NET
Studio.NET
2
HTML
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>
3
HTML page
The HTML
source file:
Fred Foonly <BR>
<I> Aventura Ave 23 <BR>
Palo Alto, CA. </I>
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
The HTML source file, as
displayed by the browser:
Fred Foonly
Aventura Ave 23
Palo Alto, CA.
4
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
5
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>
6
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.
7
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>
8
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>
9
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]
10
Select list example
11
HTML page
A User Agent (browser) asks
for an HTML page by sending
HTTP request to the webserver.
Web-server sends a response
which includes the required
page including additional data
objects.
Browser displays the file.
Server
PC running
UA – IE
User can view an entire code
using “view source” option.
12
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.
13
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.
ASP.NET uses predefined .NET Framework classes:
Just use correct classes/objects.
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.
14
ASP.NET in the Context of .NET
Framework
VB
C++
C#
JScript
J#
Common Language Specification
Web Forms Web Services
Windows
Forms
ADO.NET and XML
Base Class Library
Common Language Runtime
Visual Studio.NET
ASP.NET
Operating System
15
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.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.
16
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>
<body bgcolor=“silver"> <center>
<p> <%Response.Write(now())%> </p>
</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.
17
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.
18
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:
Web Server Controls - new ASP.NET tags that have the
following syntax:
<input id="field1" runat="server">
<asp:button id="button1" Text="Click me!" runat="server"
OnClick="submit"/>
Validation Server Controls – those controls are used for
input validation:
More about
server controls
in the future
<asp:RangeValidator ControlToValidate=“gradesBox"
MinimumValue="1" MaximumValue="100" Type="Integer"
Text="The grade must be from 1 to 100!" runat="server" />
19
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.
20
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">
or
<%@Page Language=“C#” %>
The last directive defines the scripting language for the
entire page.
21
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.
22
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
23
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
24
Output
The output
after
inserting
wwww to
the first
field and
pressing
the button.
25
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"; }
}
26
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>
27
The Code-Behind Example Output
After onclick
event
28
ASP.NET Execution Model
Client
Server
public class Hello{
protected void Page_Load(
Object sender, EventArgs e)
{…}
}
Hello.aspx.cs
First request
Postback
Output Cache
29
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/enus/library/aa730880(VS.80).aspx
More about web-applications
http://forums.asp.net/thread/1279716.aspx
30
Open a correct Project
31
Open a correct Project
32
33
34
35
36
37
38
An output
After Button1 click
39