1. Static and Dynamic Web Pages
CS 3870
Static and Dynamic Web Pages
ASP.NET and IIS

2. Static Web Pages Original HTML documents
Remaining the same after created and modified
At all times and to all users
All three pages of Prog1 are static

3. Static Web Pages Cannot be used for business operations No user input
Cannot respond to different user requests

4. Dynamic Web Pages Interactive or Smart HTML pages
User input and Server Response
Web Applications
Similar to Windows programs
Prog2

5. Special HTML Controls To get user input Element INPUT Element BUTTON
Element FORM …

6. Control Types Created with INPUT
Text
Password
Checkbox
Radio box
Submit
Reset
Hidden
Button
File
Image
. . .

7. Controls to get user input MUST be inside HTML forms

8. HTML Controls and Forms
Example
View Source Code
(Google Chrome, Edge F12)

9. HTML Standards by W3C

10. Scripts for Dynamic Web Pages
User Input and Server Response
Similar to Windows programs
Need code to respond to user input
Client Side Scripting
Server Side Scripting
Combination of above two approaches

11. Client Side Scripting HTML files and instruction files sent to client
Client Script
JavaScript: nothing to do with Java
VBScript
Java Applets
Flash
. . .

12. Issues with Client Side Scripting
Different browsers may interpret instructions in different ways
Database is normally at server site
Users could view source code

13. Server Side Scripting Instruction files are at server site
HTML files are generated according to user input
Only HTML files are sent to clients

14. Issues with Server Side Scripting
Most computing is done at the server
Nothing will work when the server is down
Powerful and expensive servers
More internet traffic

15. Different Technologies for Server Side Scripting
CGI (Common Gateway Interface)
JSP (Java Server Pages)
PHP (Personal Home Pages)
ASP (Active Server Pages)
ASP.NET
. . .

16. ASP.NET A server-side technology for creating dynamic web pages
Client-side scripting is incorporated
(e.g., to check input)
C#, VB.NET or any other language supported by .NET
Working with MS IIS

17. Internet Information Services (IIS)
IIS waits and takes client requests
IIS sends static HTML files to the clients
IIS passes client requests to ASP.NET when needed
ASP.NET generates dynamic web pages
IIS sends dynamic web pages to clients

18. Program 2 20 points Using C#, Not VB.NET
Due 10 pm, Monday (Week 3), September 17

19. Creating Folder Solution Explore Right Click on Web Site New Folder
Prog2

20. Creating Web Forms Solution Explorer Right clicking folder Prog2 Add
Different Views
Design
Source: HTML code
Split

21. Page Default.aspx
Static page for Prog2
Similar to index.html

22. Page OrderingProduct.aspx
Dynamic page for Prog2
Adding controls
Three textboxes
Two buttons
Standard on Toolbox
Not HTML

23. HTML Server Controls
HTML Server Controls
HTML server controls are HTML elements (or elements in other supported markup, such as XHTML) containing attributes that make them programmable in server code.
We don’t use HTML Server Controls.

24. Web Server Controls
Web server controls are a second set of controls designed with a different emphasis.
Web server controls do not necessarily map one-to-one to HTML server controls.
All Server Controls must be within a <form> tag.
All Server Controls must have the runat="server" attribute.
We use Web Server Controls!

25. Basic Control Properties
<asp:TextBox ID="txtPrice" runat="server"</asp:TextBox> <asp:TextBox ID="txtQuantity" runat="server"></asp:TextBox> <asp:TextBox ID="txtTotal" runat="server" ReadOnly="True" > </asp:TextBox> <br /> <br /> <asp:Button ID="Button1" runat="server" Text="Compute" /> <asp:Button ID="Button2" runat="server" Text="Reset" />

26. Event Procedures Same as Windows programs C# Button Compute
Button Reset

27. Button Compute
protected void Button1_Click(object sender, EventArgs e) { float price = float.Parse(txtPrice.Text); int quantity = int.Parse(txtQuantity.Text); float total = price * quantity; txtTotal.Text = total.ToString(); txtPrice.ReadOnly = true; txtQuantity.ReadOnly = true; }
Try one invalid input value

28. Button Reset
protected void Button1_Click(object sender, EventArgs e) { txtPrice.Text = ""; txtQuantity.Text = ""; txtTotal.Text = ""; txtPrice.ReadOnly = false; txtQuantity.ReadOnly= false; }
Try one invalid input value

29. Formatting Server Controls
Style
Source View
CSS file
Format Menu

30. Format Menu Go to Design view Click FORMAT on the menu bar New Style
Selector
HTML element
Enter a style name
Inline style
Define in
Specify the styles
OK or Apply

31. Internal Style Sheets <head> <style type="text/css">
.theTitle {
font-family: "Bell MT";
font-size: xx-large;
font-weight: bold;
color: #0000FF;
text-decoration: underline;
text-align: center;
} </style>
<h1> Web Protocols, Technologies and Applications
</h1>
</head>

32. Internal Style Sheets <head> <style type="text/css">
.theTitle {
. . . }
<title>CS3870 – Prog 2</title>
</head>
<body>
<h1 class="theTitle">Web Protocols, Technologies and Applications</h1>
</body>
</html>

33. Inline Style
Selecting Controls Position: relative or absolute z-index: auto Display: inline-box Text-align Width: 10% Margin-left: 10%

34. <br /> <br />
<asp:TextBox ID="txtPrice" runat="server"
style="display: inline-block; position: relative; width: 10%;
text-align: left; margin-left: 25%; z-index: auto;"></asp:TextBox>
<asp:TextBox ID="txtQuantity" runat="server"
style="margin-left: 10%; display: inline-block; position: relative;
z-index: auto; width: 10%"></asp:TextBox>
<asp:TextBox ID="txtTotal" runat="server" ReadOnly="True"
z-index: auto; width: 10%"; text-align: right"></asp:TextBox>

35. Formatting Output Style in HTML source Properties Window C# functions
String formatting
txtTotal.Text = string.Format("{0:c}", total);

36. Checking Input Click event of button Compute Server site scripting
Client site scripting should be better
Should do it on both sites
Control Validator

37. Validators ToolBox Validation Tab ControlToValidate
RequiredFieldValidator
RangeValidator
CompareValidator
Type
Operator
Value to compare

38. Validation Controls Validate input automatically
We don’t check input in event procedures any more
Must set button property CausesValidation to True!

39. Validation Controls Will check input data at both sides
Placing validation controls
Inline-box
Margin could be negative

40. Program 2 You will lose five points for each late day!
More to discuss next class!