a one - page web How to develop application...Web Forms Site vs. Web Forms Application Feature Site...
Transcript of a one - page web How to develop application...Web Forms Site vs. Web Forms Application Feature Site...
Murach's ASP.NET 4.5/C#, C2 © 2013, Mike Murach & Associates, Inc. Slide 1
Chapter 2
How to develop a one-page web
application
Murach's ASP.NET 4.5/C#, C2 © 2013, Mike Murach & Associates, Inc. Slide 2
The New Web Site dialog box
Murach's ASP.NET 4.5/C#, C2 © 2013, Mike Murach & Associates, Inc. Slide 3
Web Forms Site vs. Web Forms Application
Feature Site Application
Project Files None One or more
Compilation At run time Pre-compiled to single
assembly
Class file location App_Code folder Anywhere in folder
structure
How to start (VS) FILENewWeb Site FILENewProject
How to start (VS Express) FILENew Web Site FILENew Project
Murach's ASP.NET 4.5/C#, C2 © 2013, Mike Murach & Associates, Inc. Slide 4
Three web location options for ASP.NET web sites
File System
HTTP
FTP
Murach's ASP.NET 4.5/C#, C2 © 2013, Mike Murach & Associates, Inc. Slide 5
The Add New Item dialog box for adding a new web form
Murach's ASP.NET 4.5/C#, C2 © 2013, Mike Murach & Associates, Inc. Slide 6
Two ways to open the Add New Item dialog box
Right-click the project in the Solution Explorer, and choose
AddAdd New Item from the shortcut menu.
Click on the project in the Solution Explorer to select it, and then
choose the WEBSITEAdd New Item command.
Murach's ASP.NET 4.5/C#, C2 © 2013, Mike Murach & Associates, Inc. Slide 7
How to add a new web form to a project
In the Add New Item dialog box, select the Web Form template,
enter a name for the form or leave it as Default.aspx, check the
Place Code in Separate File box, and click the Add button.
Choose AddWeb Form from the shortcut menu for the project.
Then, enter a name for the form in the dialog box that’s displayed
and click the OK button.
Murach's ASP.NET 4.5/C#, C2 © 2013, Mike Murach & Associates, Inc. Slide 8
How to add an existing web form to a project
In the Solution Explorer, right-click the project and choose
AddAdd Existing Item.
Locate the form you want to add, select it, and click the Add
button.
Murach's ASP.NET 4.5/C#, C2 © 2013, Mike Murach & Associates, Inc. Slide 9
Visual Studio with the Designer in Source view and three other windows
Murach's ASP.NET 4.5/C#, C2 © 2013, Mike Murach & Associates, Inc. Slide 10
The Future Value project as a new folder is being added
Murach's ASP.NET 4.5/C#, C2 © 2013, Mike Murach & Associates, Inc. Slide 11
The Open Project dialog box
Murach's ASP.NET 4.5/C#, C2 © 2013, Mike Murach & Associates, Inc. Slide 12
Two ways to display the Open Project dialog box
Use the FILEOpenProject/Solutions command (or the
FILEOpen Project command for VS Express).
Use the FILERecent Projects and Solutions command.
How to complete the Open Project dialog box
Locate the web site folder and double-click it to display the
solution file. Then, double-click the solution file.
How to close a solution
Use the FILEClose Solution command.
Murach's ASP.NET 4.5/C#, C2 © 2013, Mike Murach & Associates, Inc. Slide 13
How to open projects from the Start Page
Click the link for a project in the Recent list, or click the Open
Project link to display the Open Project dialog box.
To pin a web site to the Recent list so it stays there, hover the
mouse over the web site name and click the pin icon.
Murach's ASP.NET 4.5/C#, C2 © 2013, Mike Murach & Associates, Inc. Slide 14
The Open Web Site dialog box
Murach's ASP.NET 4.5/C#, C2 © 2013, Mike Murach & Associates, Inc. Slide 15
The Future Value form in Split view after an img element has been added
Murach's ASP.NET 4.5/C#, C2 © 2013, Mike Murach & Associates, Inc. Slide 16
The Future Value form with a table that has been inserted into it
Murach's ASP.NET 4.5/C#, C2 © 2013, Mike Murach & Associates, Inc. Slide 17
How to add a table to a form
Use the TABLEInsert Table command to display the Insert
Table dialog box.
Then, set the number of rows and columns that you want in the
table, set any other options that you want, and click OK.
Murach's ASP.NET 4.5/C#, C2 © 2013, Mike Murach & Associates, Inc. Slide 18
How to format a table after it has been added to a form
To resize a row, drag it by its bottom border.
To resize a column, drag it by its right border.
To resize the entire table, select the table and then drag one of its
handles.
To select rows, columns or cells, drag the mouse over them or
hold the Ctrl key down as you click on the cells.
To add, delete, size, or merge selected rows or columns, use the
commands in the TABLE menu or the shortcut menu.
Murach's ASP.NET 4.5/C#, C2 © 2013, Mike Murach & Associates, Inc. Slide 19
How to add text to a table and format it
To add text to a table, type the text into the cells of the table.
To format the text, select it and use the controls in the Formatting
toolbar or the commands in the Format menu.
Murach's ASP.NET 4.5/C#, C2 © 2013, Mike Murach & Associates, Inc. Slide 20
The Future Value form after six server controls have been added to it
Murach's ASP.NET 4.5/C#, C2 © 2013, Mike Murach & Associates, Inc. Slide 21
How to add a web server control to a web form
Drag the control from the Standard group in the Toolbox to the
form or to a cell in a table on the form.
Or, move the cursor to where you want the control in either
Source or Design view, and double-click on the control in the
Toolbox to place it there.
To insert a snippet for a server control in Source view, move the
insertion point to where you want the snippet. Then, right-click,
select Insert Snippet, select ASP.NET, and select the control that
you want inserted.
Murach's ASP.NET 4.5/C#, C2 © 2013, Mike Murach & Associates, Inc. Slide 22
How to set the properties for a control
Select a control by clicking on it, and all of its properties are
displayed in the Properties window. Then, select a property and
set its value.
To change the Height and Width properties, drag one of the
handles on a control.
To sort the properties in the Properties window by category or
alphabetically, click on one of the buttons at the top of the
window.
To expand or collapse the list of properties in a group, click on the
+ or – symbol for the group.
To display a smart tag menu for a control in Design view, select
the control and click the Smart Tag icon on the right of the
control.
Murach's ASP.NET 4.5/C#, C2 © 2013, Mike Murach & Associates, Inc. Slide 23
Common properties of web server controls
AutoPostBack
CausesValidation
EnableViewState
Enabled
Height
ID
Runat
TabIndex
Text
ToolTip
Visible
Width
Murach's ASP.NET 4.5/C#, C2 © 2013, Mike Murach & Associates, Inc. Slide 24
Common properties of drop-down list and list box controls
Items
SelectedItem
SelectedIndex
SelectedValue
Murach's ASP.NET 4.5/C#, C2 © 2013, Mike Murach & Associates, Inc. Slide 25
The validation controls on the Future Value form
Required field validators Range validators
Murach's ASP.NET 4.5/C#, C2 © 2013, Mike Murach & Associates, Inc. Slide 26
How to add a validator to a web form
In either Design or Source view, move the insertion point to
where you want the validator and double-click on the validator in
the Validation group in the Toolbox.
Or, drag the validator from the Toolbox to where you want it.
In Source view, right-click, select Insert Snippet, select ASP.NET,
and select the validator control that you want to insert.
Murach's ASP.NET 4.5/C#, C2 © 2013, Mike Murach & Associates, Inc. Slide 27
How to set the properties for a validation control
In either Design or Source view, use the Properties window.
In Source view, enter the properties for the validator with help
from IntelliSense.
Murach's ASP.NET 4.5/C#, C2 © 2013, Mike Murach & Associates, Inc. Slide 28
Common validation control properties
ControlToValidate
Display
ErrorMessage
Additional properties of a range validator MaximumValue
MinimumValue
Type