Transcript Slide 1

Chapter 2
How to develop
a one-page
web application
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 1
Objectives
Applied
 Given the specifications for a web form, use the Web Forms Designer
to design the form.
 Given the specifications for a one-page web application, use the Code
Editor to write the Visual Basic code for the web form.
 Run and test the web applications that you develop.
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 2
Objectives (continued)
Knowledge
 Describe the way the files are organized in a file-system web site.
 Describe the use of Visual Studio’s Web Forms Designer and Code
Editor.
 Distinguish between web server controls, HTML server controls, and
validation controls.
 Describe the way controls are displayed when you use flow layout.
 Describe the use of the AutoPostBack, CausesValidation, and
EnableViewState properties for a web server control.
 Describe the use of the Load event for a web page.
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 3
Objectives (continued)
 Describe the use of the IsPostBack and IsValid properties for a web
page.
 Describe the use of the Click, TextChanged, CheckedChanged, and
SelectedIndexChanged events for a web server control.
 Describe how the HTML that’s sent to a browser handles view state
and user input.
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 4
The New Web Site dialog box
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 5
The starting screen for a new web site
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 6
A project as a new folder is being added
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 7
The Open Web Site dialog box
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 8
Three ways to open a web site
 FileOpen Project
 FileRecent Projects
 FileOpen Web Site
How to close a project
 FileClose Project
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 9
The Future Value web form in a browser
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 10
Common web server controls
 DropDownList
 ListBox
 TextBox
 Label
 Button
 CheckBox
 RadioButton
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 11
Using Flow Layout
 Using flow layout, text and controls that you put
on your form are placed there left to right, top to
bottom.
 Works much like it would if you were creating an
HTML or a Word document
 Use CR and space bar to control spacing or use
tables
 For text, select text, and then use controls in the
formatting tool bar and commands in the Format
menu to change font etc
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 12
The start of the Future Value form with flow layout
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 13
The aspx code with flow layout
<form id="form1" runat="server">
<div>
<strong><span style="font-size: 20pt; color: blue">
401K Future Value Calculator</span></strong><br /><br />
Monthly investment&nbsp;&nbsp;
<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList><br />
Annual interest rate&nbsp;&nbsp;
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
</form>
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 14
Working with Tables
 Lots of material in Chapter 2 of the Murach
ASP.NET 4.0 book
 There are links to this information on my
website
 You can read pages 42 and 43 of the text to
get more information
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 15
The Future Value form with a table
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 16
Working with Web Server Controls
 Drag and drop from the Standard Group of the
toolbox
 Can resize and change in the same way as you
used to in Window forms
 Use the Properties window and change what you
need to change
 Remember to name all your controls
 There is also an HTML group of tools in the
toolbox (could use to add an image for example)
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 17
The Future Value form with six web server
controls and an HTML image control
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 18
Common properties for web server controls
You will see these properties in the generated .aspx page that is
created as you build your web page. You will see the syntax of these
properties too, and be able to "roll your own" -- which is not a good
idea when you are starting out.
 AutoPostBack (but buttons don’t have this property)
 CausesValidation
 EnableViewState
 Enabled
 Height
 ID
 Runat
 TabIndex
 Text
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 19
Common properties for drop-down lists
and list boxes
You will see these too, on the page you are creating
 Items
 SelectedItem
 SelectedIndex
 SelectedValue
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 20
Working in Source View
 You may want a refresher on HTML and using
the HTML editor.
 You should already have books on this topic or
you can read Chapter 5 of the ASP.NET web
programming text (used in CIS 4342)
 Note the use of the alt attribute in the aspx
code for the Future Value form – specifies text
to be displayed when an image cannot be
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 21
The Future Value form in Source view
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 22
The aspx code for the Future Value form
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Chapter 02: Future Value</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<img src="Images/MurachLogo.jpg" alt="Murach" />
<br /><br />
<strong><span style="font-size: 20pt;
color: blue">401K Future Value Calculator
<br /></span></strong><br />
<table>
<tr>
<td style="width: 149px">
Monthly investment</td>
<td style="width: 71px">
<asp:DropDownList
ID="ddlMonthlyInvestment"
runat="server" Width="106px">
</asp:DropDownList></td>
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 23
The aspx code for the Future Value form (cont.)
</tr>
<tr>
<td style="width: 149px">
Annual interest rate</td>
<td style="width: 71px">
<asp:TextBox
ID="txtInterestRate" runat="server"
Width="100px">6.0</asp:TextBox></td>
</tr>
<tr>
<td style="width: 149px">
Number of years</td>
<td style="width: 71px">
<asp:TextBox ID="txtYears"
runat="server"
Width="100px">10</asp:TextBox></td>
</tr>
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 24
The aspx code for the Future Value form (cont.)
<tr>
<td style="width: 149px">Future value</td>
<td style="width: 71px">
<asp:Label ID="lblFutureValue"
runat="server"
Font-Bold="True"></asp:Label></td>
</tr>
<tr>
<td style="width: 149px; height: 25px"></td>
<td style="width: 71px; height: 25px"></td>
</tr>
<tr>
<td style="width: 149px">
<asp:Button ID="btnCalculate"
runat="server"
BackColor="LightGray" Text="Calculate"
Width="100px" /></td>
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 25
The aspx code for the Future Value form (cont.)
<td style="width: 71px">
<asp:Button ID="btnClear" runat="server"
BackColor="LightGray" Text="Clear"
Width="100px" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 26
Validation Controls
 What for?
 Validating user input and generating error
messages AND requesting reentry!
 Critical component of web page design
 Bad input? Garbage in; Garbage out
 If your input is riddled with errors your data
store will also be
 If your data store is riddled with errors it is bad
for business
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 27
Using Validation Controls
 Can be dragged from the tool box
 Offers 5 validator controls
 One is a validation summary control – displays all
errors detected by other validators
 Validation normally done on the client before a
page is posted to the web server
 usually when the focus leaves the current input
 saves a round trip just for displaying error messages
 you fill in associated control and message in form design
 Browser must support Dynamic HTML
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 28
The validation controls on the Future Value form
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 29
Validation control concepts
 Validation is done when the focus leaves the control.
 Validation is also done when the user clicks on a button control
whose CausesValidation property is set to True. Buttons always
postback.
 Each validation control is associated with a specific server
control.
 You can associate one or more validation controls with a single
server control.
 The validation controls work by running client-side scripts.
 If the validation on the client fails, the page isn’t posted back to
the server.
 Validation can also done on the server in case the client doesn’t
support scripts.
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 30
Common validation control properties
 ControlToValidate – associates a validator to a control
 Display – Static: reserve space on page for display
Dynamic: allocate space for message when error occurs
None: display errors in validation summary control
 Error message – message generated when error occurs
Additional properties of a range validator
 Maximum
 Minimum
 Type – the data type used for range checking
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 31
The aspx code for the validation controls
<asp:RequiredFieldValidator
ID="RequiredFieldValidator1" runat="server"
ControlToValidate="txtInterestRate" Display="Dynamic"
ErrorMessage="Interest rate is required.">
</asp:RequiredFieldValidator>
<asp:RangeValidator ID="RangeValidator1" runat="server"
ControlToValidate="txtInterestRate" Display="Dynamic"
ErrorMessage="Interest rate must range from 1 to 20."
MaximumValue="20" MinimumValue="1" Type="Double">
</asp:RangeValidator><br />
<asp:RequiredFieldValidator
ID="RequiredFieldValidator2" runat="server"
ControlToValidate="txtYears" Display="Dynamic"
ErrorMessage="Number of years is required.">
</asp:RequiredFieldValidator>
<asp:RangeValidator ID="RangeValidator2" runat="server"
ControlToValidate="txtYears" Display="Dynamic"
ErrorMessage="Years must range from 1 to 45."
MaximumValue="45" MinimumValue="1" Type="Integer">
</asp:RangeValidator>
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 32
Using the Code Editor
 You are used to this by now but a review
would not hurt
 Opening or switching to a file in the code
editor window
 Starting an event procedure
 Code editor features – did you forget?
 Automatic indentation
 Syntax checking
 Statement completion
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 33
Three ways to open or switch to a Visual Basic file
 Double-click on a Visual Basic file (.aspx.vb or .vb) in the
Solution Explorer.
 Click the View Code button at the top of the Solution Explorer
with a Visual Basic file selected.
 Click on a tab at the top of the Web Forms Designer (if the file is
already open).
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 34
Three ways to start an event procedure from the
Web Form Designer
 Double-click on a blank portion of a web form to start a procedure
for its Load event.
 Double-click on a control to start an event procedure for the
default event of that control.
 Select a control, click the Events button in the Properties window
(the button with the lightening bolt), and double-click the event
you want to create an event procedure for.
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 35
How to start an event procedure from the Code
Editor
 Select a control from the drop-down list at the top left of the Code
Editor, and select an event from the drop-down list at the top
right.
 To create an event procedure for a page event, select (Page
Events) from the first drop-down list.
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 36
How to start a Sub procedure or function in the
Code Editor
 Type the procedure or function from scratch.
 Visual Studio will insert the End Sub or End Function statement.
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 37
A project with the Code Editor window displayed
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 38
Event Handling – a Recap
 Understanding page and control events
 Init and Load page events occur whenever a
page is requested from the server
 Init occurs first and restores the View State of a
page and its controls.
 Usually no event handler for this event
 Any other initialization you want you need to
code in the Load event
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 39
Sequences of Events - PreRender
 The PreRender event for a page is raised after
all other control events for a page have been
processed
 Last event to be raised before a page is rendered in
HTML (we will not look closer at this for now)
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 40
AutoPostBack Event Sequencing
 AutoPostBack property for an event
 Defaults to true for button click events
 False otherwise (unless you change it)
 When true, the following happens when the event
occurs
 The Page is posted back to the server and the Init and
Load events are handled
 Then the event itself is handled
 When AutoPostBack is false the event is raised but
the event is not executed until some other event
causes the page to be posted back to the server
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 41
Common ASP.NET page events
 Init
 Load
 PreRender
The names of the procedures for these events
 Page_Init
 Page_Load
 Page_PreRender
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 42
Common ASP.NET control events
 Click
 TextChanged
 CheckedChanged
 SelectedIndexChanged
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 43
Code for the Click event of the btnClear button
Protected Sub btnClear_Click(ByVal sender As Object, _
ByVal e As System.EventArgs) _
Handles btnClear.Click
ddlMonthlyInvestment.Text = 50
txtInterestRate.Text = ""
txtYears.Text = ""
lblFutureValue.Text = ""
End Sub
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 44
Code Behind for the Future Value Form
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
Dim iIndex As Integer
For iIndex = 50 To 500 Step 50
ddlMonthlyInvestment.Items.Add(iIndex)
Next iIndex
End If
End Sub
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 45
The VB code for the Future Value form (cont.)
Protected Sub btnCalculate_Click(ByVal sender As Object, _
ByVal e As System.EventArgs) _
Handles btnCalculate.Click
Dim iMonths As Integer
Dim dInterestRate, dMonthlyInvestment As Decimal
Dim dFutureValue As Decimal
If IsValid Then
‘A property of each control
iMonths = txtYears.Text * 12
dInterestRate = txtInterestRate.Text / 12 / 100
dMonthlyInvestment = _
ddlMonthlyInvestment.SelectedValue
dFutureValue = FutureValue(iMonths, _
dInterestRate, dMonthlyInvestment)
lblFutureValue.Text = _
FormatCurrency(dFutureValue)
End If
End Sub
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 46
The VB code for the Future Value form (cont.)
Private Function FutureValue(ByVal Months As Integer, _
ByVal InterestRate As Decimal, _
ByVal MonthlyInvestment As Decimal) As Decimal
Dim iIndex As Integer
Dim dFutureValue As Decimal
For iIndex = 1 To Months
dFutureValue = (dFutureValue _
+ MonthlyInvestment) _
* (1 + InterestRate)
Next iIndex
Return dFutureValue
End Function
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 47
The VB code for the Future Value form (cont.)
Protected Sub btnClear_Click(ByVal sender As Object, _
ByVal e As System.EventArgs) _
Handles btnClear.Click
ddlMonthlyInvestment.Text = 50
txtInterestRate.Text = ""
txtYears.Text = ""
lblFutureValue.Text = ""
End Sub
End Class
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 48
Testing an Application
 How to run a web site with the built-in
development server (so you can test any
code you write)
 You already know how to do most of the
things in this section
 You can go ahead and modify the
web.config file to enable debugging if you
are at home – you should check with the lab
assistant or the lab staff if you are trying to
run in Temple labs
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 49
An ASP.NET project with 7 warning messages
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 50
How to start an application
 Click on the Start button in the Standard toolbar.
 Press F5.
How to stop an application
 Click the Close button in the upper right corner of the browser.
How to stop an application if an exception occurs
 Click the Stop Debugging button in the Debug toolbar.
 Press Shift+F5.
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 51
HTML Concepts
 The HTML that is sent to the browser consists
entirely of standard HTML tags.
 All of the ASP.NET tags are converted to standard HTML
when the page is rendered.
 View state data is stored in a hidden input field
within the HTML.
 The view state data is encrypted so you can’t read it.
 User entries are returned to the browser as part of the
HTML for the page.
 When the browser supports DHTML, the HTML
contains script that does the validation for any
validation controls on the client.
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 52
The HTML for the form after a postback
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 53
The HTML for the form after a postback (cont.)
Murach’s ASP.NET 2.0/VB, C2
© 2006, Mike Murach & Associates, Inc.
Slide 54