ASP.NET Web Developer Training
Module 2: ASP.NET Development Tools and Options
ASP.NET Web Developer Training
Module 2
ASP.NET Development Tools and Options
Demo Script
Page 1 of 32
ASP.NET Web Developer Training
Module 2: ASP.NET Development Tools and Options
CONTENTS
DEMO 1: CREATING AN ASP.NET PAGE USING WEB MATRIX………………………………………………………. 3
DEMO 2: USING J# WITH ASP.NET WEB MATRIX PROJECT ……………………………………………………….. 15
Page 2 of 32
ASP.NET Web Developer Training
Module 2: ASP.NET Development Tools and Options
Demo 1: Creating an ASP.NET Page using Web Matrix
(View this demo online at http://www.asp.net/webmatrix/tour/section1/createnewpage.aspx)
Creating the Page
Adding Controls and Code
Running the Page with the Built-in ASP.NET Web Matrix Web Server Publishing to the ISP
Publishing the Page to a Hosting Server
DEMO SCRIPT ACTIONS
SECTION
Creating the This demonstrates which template Overview
Page you’d select to create a ASP.NET web In this walkthrough, you will create a new ASP.NET page. To accomplish this, perform the below steps:
page
1. Open Microsoft ASP.NET Web Matrix. You will see the New File dialog box appear.
2. Select (General) from the Templates pane.
3. Select the ASP.NET Page template.
4. Type a file path in the Location box.
5. Type myFirstPage.aspx in the Filename box.
6. Select Visual Basic in the Language drop-down box.
7. Click OK. New File Dialog box:
Page 3 of 32
ASP.NET Web Developer Training
Module 2: ASP.NET Development Tools and Options
DEMO SCRIPT ACTIONS
SECTION
This is the default setup after we 8. The myFirstPage.aspx file will now open in Design view and be ready for editing.
have created the new ASP.NET page.
Point out the main sections of the
ASP.NET Web Matrix.
Namely:
Toolbox
Workspace
Properties
Explain the difference between the
following
Design View
Code View
HTML View
Page 4 of 32
ASP.NET Web Developer Training
Module 2: ASP.NET Development Tools and Options
DEMO SCRIPT ACTIONS
SECTION
Adding Overview
Controls and Here we demonstrate how to interact In this walkthrough, you will create a simple "hello world" ASP.NET Page. In the steps below you will do this by
Code with the components on the Toolbox adding three basic ASP.NET server controls to the ASP.NET page you created in the previous section, and then
Tab. add one line of code to dynamically access and modify them on the server. Open Microsoft ASP.NET Web
Matrix. You will see the New File dialog box appear.
Take a few minutes to explain what
the other Tabs are for; especially the 1. From the Web Controls tab in the Toolbox (on the left hand side of the tool), drag a Label control, a
“My Snippets” Tab and how it can TextBox control and a Button control onto the ASP.NET page. Press the Enter key between the
further boost productivity. placement of each control.
Page 5 of 32
ASP.NET Web Developer Training
Module 2: ASP.NET Development Tools and Options
DEMO SCRIPT ACTIONS
SECTION
2. Select the HTML tab at the bottom of the document window to view the HTML that ASP.NET Web Matrix
generated as a result of the three drag-and-drop operations above. Using ASP.NET Web Matrix you can
modify the html content of the page either using the graphical design tab (like you did with the previous
step) -- or by directly editing the html content using either the HTML tag or All tabs of the tool.
Label
3. Select the Design tab and double-click the Button control. ASP.NET Web Matrix will automatically wire-up
an ASP.NET server-side event handler method (named "Button1_Click") for the Button control's Click
event and open the page in Code view.
4. Add the below code in red to the Button1_Click method to update the Label control's Text property to
display a customized welcome message using the value entered in the TextBox:
Sub Button1_Click(sender As Object, e As EventArgs)
Label1.Text = "Hello " & TextBox1.Text & " welcome to the ASP.NET Web Matrix Project!"
End Sub
At Step 4.
Event handlers are added. Spend
some time explaining what event
5. Optionally select the all tab to view all of the contents for the ASP.NET page. This includes both the html
handlers are used for and how they
and code sections of the page, and provides a convenient view to allow you to see the entire code/content
are used.
of the page:
Page 6 of 32
ASP.NET Web Developer Training
Module 2: ASP.NET Development Tools and Options
DEMO SCRIPT ACTIONS
SECTION
Sub Button1_Click(sender As Object, e As EventArgs)
Label1.Text = "Hello, " & TextBox1.Text & "! Welcome to the ASP.NET Web Matrix
Project"
Step 5. End Sub
Take some time to go through and
explain the basic elements of the
code.
Especially the following
tags/elements:
Page and the Language Label
runat
6. You have now finished building a simple "hello world" ASP.NET Page. In the next section we'll walkthrough
how to run the page on a web server.
Page 7 of 32
ASP.NET Web Developer Training
Module 2: ASP.NET Development Tools and Options
DEMO SCRIPT ACTIONS
SECTION
Running the Overview
Briefly explain the concept of ASP.NET Web Matrix supports multiple Web Server deployment options for hosting and testing an ASP.NET application; including the
page with the ASP.NET Web Matrix Web Server, Microsoft Internet Information Server (IIS), and remote ISP Hosting providers.
built-in deployment focusing on ISP hosting
ASP.NET Web as it pertains to Web Applications
In this walkthrough, you will save and run the ASP.NET page you developed in the previous section using the
Matrix Web built-in ASP.NET Web Matrix Web Server. This simple web server is automatically installed with ASP.NET
Server Web Matrix and does not require any other web server to be installed on your machine (ideal for quick
development scenarios).
To run your page using the ASP.NET Web Matrix Web Server, please follow the steps below:
1. Save the ASP.NET page. There are two ways to save a file in the ASP.NET Web Matrix development
environment:
a. Choose Save from the File menu.
2. Click the Save File button on the Standard toolbar.
Page 8 of 32
ASP.NET Web Developer Training
Module 2: ASP.NET Development Tools and Options
DEMO SCRIPT ACTIONS
SECTION
3. Run the ASP.NET page. There are three ways to run a page in the ASP.NET Web Matrix development
environment:
a. Choose Start from the View menu.
b. Click the Start button on the Standard toolbar.
c. Press the F5 key. This shortcut causes the page to run.
Page 9 of 32
ASP.NET Web Developer Training
Module 2: ASP.NET Development Tools and Options
DEMO SCRIPT ACTIONS
SECTION
4. Selecting any of the above run options will display the Start Web Application dialog:
There are two options in the Start Web Application dialog box:
a. • Use ASP.NET Web Matrix Server: choose this option to host the web application using
the built-in web server that ships with ASP.NET Web Matrix. Note that the ASP.NET Web
Matrix Server supports only local browser requests (for security reasons). This means you
cannot browse any of the pages remotely.
b. • Use a new IIS Virtual Root: choose this option to host the web application using the
Microsoft IIS web server. Note that this option is discussed in a later section of the Guided
Tour.
5. Click the Use ASP.NET Web Matrix Server option and type 8080 in the Application Port box.
Take a minute to explain the
significance and the use of port
numbers in general.
Remind students that the default
http port number is 80.
6. Click the Start button.
Page 10 of 32
ASP.NET Web Developer Training
Module 2: ASP.NET Development Tools and Options
DEMO SCRIPT ACTIONS
SECTION
7. The ASP.NET Web Matrix Server will start and an icon will appear in the system tray.
8.
Note The Start Web Application dialog and ASP.NET Web Matrix Server system tray icon
notification appear the first time you run the page. On subsequent page runs, ASP.NET Web Matrix will
use the Web Server that was specified the first time you ran the page. ASP.NET Web Matrix will not
prompt you to specify a Web Server again until you either close and reopen the ASP.NET Web Matrix
development environment and run the page again or manually shut down and restart the ASP.NET
Web Matrix Server.
Page 11 of 32
ASP.NET Web Developer Training
Module 2: ASP.NET Development Tools and Options
DEMO SCRIPT ACTIONS
SECTION
9. Your ASP.NET page you developed in the previous section will now automatically appear in a new
If some students did not get the instance of your Web browser. Type a name in the TextBox and click the Button. The name will
following results. Have them check appear in the welcome message displayed in the Label.
to ensure that they had saved there
work and then pressed F5
10. Close the Web browser instance.
Page 12 of 32
ASP.NET Web Developer Training
Module 2: ASP.NET Development Tools and Options
(Optional Demo Steps)
DEMO SCRIPT ACTIONS
SECTION
ASP.NET Web Matrix provides you access to remote, hosted instances of your Web application files via the File
Publishing the Transport Protocol (FTP). You can open, edit and publish remote files from within The ASP.NET Web Matrix.
Page to a Explain that a New FTP Connection is
Hosting Server required to facilitate the easy In this walkthrough, you will add a new FTP connection so you can modify a hosted ASP.NET page.
deployment of there completed work to
a [remote] ISP Host
1. Choose Add FTP Connection from the Workspace menu.
2.
3. You will see the New FTP Connection dialog box appear.
4. Type an FTP site in the FTP Site box.
5. Type an FTP port in the Port box. The default Port is 21.
6. Type an FTP site user name in the User Name box.
7. Type an FTP site password in the Password box.
8. Type a valid, fully qualified Web site URL in the Web URL box. This should be the URL of the remote
Page 13 of 32
ASP.NET Web Developer Training
Module 2: ASP.NET Development Tools and Options
DEMO SCRIPT ACTIONS
SECTION
server's web address location -- and will be used by ASP.NET Web Matrix to resolve running pages.
9. Click OK.
10. You will see a new node in the Workspace tab of the Workspace window that represents the root
directory of the URL you specified in the New FTP Connection dialog box. Any child nodes represent
sub-folders off of the root directory.
11. In the Workspace window, drag the myFirstPage.aspx file you developed in the Your First ASP.NET
Page section of this Guided Tour from your local file system directory and drop it into the FTP
Workspace. This will copy the file to the hosting provider's FTP site.
12. To disconnect from the FTP host, right-click on the root node of the FTP hosting site in the Workspace
window and select Delete.
Page 14 of 32
ASP.NET Web Developer Training
Module 2: ASP.NET Development Tools and Options
Demo 2: Using J# with ASP.NET Web Matrix Project
Overview
In this walkthrough you will create a database to store and view user comments. You will use J#.NET to write the code to connect to and display information from the database.
DEMO SCRIPT ACTIONS
SECTION
Creating a We will now create a new page and Overview
New Page choose J# and the language to use. In this walkthrough you will create a new .aspx page
1. Open Microsoft ASP.NET Web Matrix. You will see the New File dialog box appear.
2. Select (General) from the Templates pane.
3. Select the ASP.NET Page template.
4. Type a file path in the Location box.
5. Type myFirstJSharpPage.aspx in the Filename box.
6. Select J# in the Language drop-down box.
7. Click OK. New File Dialog box:
Page 15 of 32
ASP.NET Web Developer Training
Module 2: ASP.NET Development Tools and Options
DEMO SCRIPT ACTIONS
SECTION
Page 16 of 32
ASP.NET Web Developer Training
Module 2: ASP.NET Development Tools and Options
DEMO SCRIPT ACTIONS
SECTION
Creating a We will now create a new SQl Database Overview
Database and call it MatrixComments. In this walkthrough you will create an new SQl Database named MatrixComments
1. In the Data Window (located in the top, right pane), click the Add Database Connection Button .
2. The Add New Project dialog appears, select SQL Server/MSDE Database and click OK
3. The Connect to Database dialog appears. Type (local) in the Server Text Box and Select Windows authentication
(default). Click on the Create a new database link.
Page 17 of 32
ASP.NET Web Developer Training
Module 2: ASP.NET Development Tools and Options
DEMO SCRIPT ACTIONS
SECTION
Type MatrixComments in the dialog that appears and click OK.
Page 18 of 32
ASP.NET Web Developer Training
Module 2: ASP.NET Development Tools and Options
DEMO SCRIPT ACTIONS
SECTION
Create We need to add table to the database Overview
and new that will store the User’s Comments. In this walkthrough you will create a new Table in the MatrixComments database called UserComments
database We’ll call the table UserComments
Table
1. A tree view of the MatrixComments database appears In the Data Window. Expand the tree and selected the Tables node.
2. Click on the New Database Object button .
3. Type UserComments in the dialog that appears and click OK.
4. The Table Editor Window appears. Add a Date Field.
Page 19 of 32
ASP.NET Web Developer Training
Module 2: ASP.NET Development Tools and Options
DEMO SCRIPT ACTIONS
SECTION
a. Type Date In the Name field.
b. Select datetime in DataType drop-down list.
c. Set InPrimaryKey to True.
d. Set IsUniqueKey to True.
Page 20 of 32
ASP.NET Web Developer Training
Module 2: ASP.NET Development Tools and Options
DEMO SCRIPT ACTIONS
SECTION
5. Select the New Button and add a Name field:
a. Type Name In the Name field.
b. Select varchar in DataType drop-down list.
c. Type 50 in the Size field
6. Add a Comments Field.
a. Type Comments In the Name field.
b. Select varchar in DataType drop-down list.
c. Type 500 in the Size field.
Page 21 of 32
ASP.NET Web Developer Training
Module 2: ASP.NET Development Tools and Options
DEMO SCRIPT ACTIONS
SECTION
7. Choose Save File from the File Menu or press Ctrl + S on your keyboard.
8. Close the Table Editor Window.
Page 22 of 32
ASP.NET Web Developer Training
Module 2: ASP.NET Development Tools and Options
DEMO SCRIPT ACTIONS
SECTION
Add We now need to add some input Overview
Controls to controls unto the page so that a user In this walkthrough Add Controls to the .aspx page and use the Code Wizard to generate code in J#.
the .aspx may enter his comments.
page
1. Select the Design Tab of myFirstJSharpPage.aspx. Select the HTML Elements tab of the Toolbox on the left and drag a
Table control unto the page.
2. Select the Web Controls tab of the Toolbox. Drag two Label controls to the first column of the table. Drag two Textbox
Controls to the second column of the table.
Page 23 of 32
ASP.NET Web Developer Training
Module 2: ASP.NET Development Tools and Options
DEMO SCRIPT ACTIONS
SECTION
3. Select the first label and select Properties Window. In the Text field, type Name:
4. Select the second label and set its Text property to Comment:
5. Select the first TextBox.
a. Set the MaxLength Property of the Textbox to 50
b. Type NameTextBox in the (ID) Property Field.
6. Select the second TextBox.
a. Set the MaxLength Property of the Textbox to 500.
b. Select MultiLine in the TextMode Dropdown List.
c. Set Rows Property to 5
d. Type CommentTextBox in the (ID) Property Field.
7. Add two Buttons to third cell of the second column of the table.
8. Select the first button and set the Text Property to Add.
9. Select the second button and set the Text Property to Reset.
Page 24 of 32
ASP.NET Web Developer Training
Module 2: ASP.NET Development Tools and Options
DEMO SCRIPT ACTIONS
SECTION
10. Select the UserComments Table in the Data Window and drag it unto the page below the table. An MxDataGrid is
created.
Page 25 of 32
ASP.NET Web Developer Training
Module 2: ASP.NET Development Tools and Options
DEMO SCRIPT ACTIONS
SECTION
Page 26 of 32
ASP.NET Web Developer Training
Module 2: ASP.NET Development Tools and Options
DEMO SCRIPT ACTIONS
SECTION
Page 27 of 32
ASP.NET Web Developer Training
Module 2: ASP.NET Development Tools and Options
DEMO SCRIPT ACTIONS
SECTION
Now add code J# code to reset the
form.
11. Double click on the Reset button. This wires up a Button Click Event Handler. Add the text in bold.
void Button2_Click(Object sender, EventArgs e) {
NameTextBox.set_Text("");
CommentTextBox.set_Text("");
}
12. Select the Code Wizards tab in the Toolbox. Select the INSERT Data Method Code Wizard and drag it onto the page.
13. The INSERT Data Code Wizard appears. Click Next and then Next again.
14. The Name Method dialog appears. Type InsertComment in the TextBox.
Page 28 of 32
ASP.NET Web Developer Training
Module 2: ASP.NET Development Tools and Options
DEMO SCRIPT ACTIONS
SECTION
15. Click Finish. The following Code is generated by the wizard.
Page 29 of 32
ASP.NET Web Developer Training
Module 2: ASP.NET Development Tools and Options
DEMO SCRIPT ACTIONS
SECTION
16. Select the to Design tab. Double-Click the Add button. This wires up a Click Event Handler for the button.
Type the following code in bold in the body of the method that it generated.
void Button1_Click(Object sender, EventArgs e) {
InsertComment(System.DateTime.get_Now(), NameTextBox.get_Text(),
CommentTextBox.get_Text());
MxDataGrid1.DataBind();
}
Page 30 of 32
ASP.NET Web Developer Training
Module 2: ASP.NET Development Tools and Options
DEMO SCRIPT ACTIONS
SECTION
Save and Let’s save and run the page. Overview
Run the In this walkthrough you will save and run the Page you created in J#.
Page
1. Chose Save File from the File Menu and press F5 on your Keyboard to run the page.
2. A new instance of the browser window appears. Type a name in the Name Field and write a Comment in the Comment Box
and press click the Add Button. Your Comment will be added to the page.
Page 31 of 32
ASP.NET Web Developer Training
Module 2: ASP.NET Development Tools and Options
DEMO SCRIPT ACTIONS
SECTION
Page 32 of 32