Transcript Slide 1

Chapter 2 – Building an ASP .NET Web Site
Dr. Stephanos Mavromoustakos
Adding New Items
Right-Click your website name in the Solution Explorer and
choose Add New Item
Adding Existing Files
Right-Click your Windows
desktop and choose
NewText Document.
Rename the file Style.css (not
Style.css.txt). To do so, open
Windows Explorer and
choose ToolsFolder Options
(in Win XP) or choose the
Organize button in Win Vista
and Win 7.
Then choose Folder and Search
Options. Switch to the View
tab and deselect the option
“Hide Extensions for known
File Types”.
Now you may rename the file
from Styles.css.txt to
Styles.css (the icon should
change).
Adding Existing Files
 Drag the CSS file into the Solution Explorer (not anywhere else).
 Note that the CSS file has been added to your site
Organizing your Site
 Group them by function in separate folders
 E.g. Style sheets in styles, .js in Scripts, user controls in
Controls, and master pages in MasterPages folder
Right-click the site in the Solutions Explorer and select New
Folder. Type MasterPages and press Enter. Create 2 more,
called Styles and Controls.
Drag the file MasterPage.master and drop it into the
MasterPages folder you just created. Also move the file
Styles.css to the Styles folder
Your Solution Explorer should look like this now:
Organizing your Site
Special File Types
 Some files require that you put them in a special
folder, e.g. when you try to add a class file (.vb) should
be in the App_Code folder
 Always say “Yes”
Working with Web Forms
 Web forms are represented by .aspx files
 Web forms can contain a mix of HTML, ASP .NET server controls, client-side JavaScript, CSS,
and programming code.
 Web forms can be either:
1.
2.
aspx with a Code Behind file (an additional .vb or .cs)
aspx with Inline Code (embedded)
 In the Solution Explorer, Right-Click your Site and choose New Folder. Name the folder
Demos and press Enter.
 Right-Click the Demos folder and choose Add New Item. Select Web Form and name the file
CodeBehind.aspx. Make sure that the check box for Place Code in Separate File is selected.
Click the Add button.
 Select the Design View. The dashed rectangle is the <div> tag you saw in Source view.
 From the Toolbox drag a Label control from the Standard category and drop it in the dashed
area of the page.
 Double-click in the white area below the dashed line of the <div> tag. VWD switches from
Design View into the Code Behind of the file and adds code that fires when the page loads in
the browser.
Working with Web Forms
Type the following code:
Label1.Text = "Hello World; the time is now " +
DateTime.Now.ToString()
Right-Click the page (CodeBehind.aspx) in the Solution Explorer and choose View
in Browser. Click Yes if you get a dialog box to save changes.
Similarly, you can set up a page with Inline Code by adding a new file to the
Demos folder. Call it InLine.aspx and make sure you uncheck the Place Code
in Separate File option
Follow the previous steps
VWD now switches your page into Source View and adds the Page_Load code
directly to the page.
Now type the same code as before
Right-Click the page in the Solution Explorer and choose View in browser (or
Ctrl+F5)
You should see something like this
Working with Web Forms
Other
You can assign a page as the Start Page by right-clicking
it in the Solution Explorer and choosing Set As Start
Page.
If the code is too long for one line in VB.NET use the
underscore (_). A new line indicates the end of
statement.
Inserting and Formatting Text
 Switch to Design View
 Make sure the Style Application toolbar is visible. If not, right-
click an existing toolbar and select it from the list. When the
toolbar is visible, make sure that the Style Application dropdown list on the toolbar is set to Manual, and not to Auto.
 Click inside the dashed rectangle and type “Hi there visitor and
Welcome to Planet Wrox” and highlight the text using the
mouse. From the Block Format drop-down list choose Heading 1
<h1>. After Wrox press Enter and type the following text:
“We are glad you are paying a visit to www.PlanetWrox.com the
coolest music community on the Internet.
Feel free to have a look around as there are lots of interesting
reviews and concert pictures to be found here.”
Press Ctrl+F5 to see the page in your browser.
Inserting and Formatting Text
Inserting and Formatting Text
Adding Tables and Other Markup
 Under the Demos folder, create a new Web Form called




TableDemo.aspx. Make sure it uses Code Behind by
checking the Place code in separate file option.
Switch to Design View.
Click inside the dashed rectangle, and choose
TableInsert Table. Set Rows to 3 and Columns to 2.
Click OK.
If you see only a single table cell, and not the entire table
with three rows and two columns, you need to enable
Visual Aid for tables using ViewVisual Aids Visible
Borders from the Main Menu to turn the borders on.
Adding Tables and Other Markup
Adding Tables and Other Markup
Adding Tables and Other Markup
 Drag the right border of the very first cell in the table to the left. You’ll
see a visual indicator showing the width of the cell. Keep dragging it to
the left until it has a width of 200 pixels.
Adding Tables and Other Markup
 To add more rows or columns to the table, you can right-click an existing cell.
From the pop-up menu that appears, choose Insert to add additional
rows/columns. Similarly, you can use the Delete, Select, Modify options.
 Place your cursor in the first cell of the first row and type the words Bulleted
List.
 Place your cursor in the second cell of the first row and choose Bullets and
Numbering from the Format menu.
 Switch to the Plain Bullets tab, click the picture with the round, solid bullets
and click OK.
 Type some text, like (Pank, Rock, Techno, etc), and then press Enter.
 Now create a Numbered List in the first cell of the second row. Then position
your cursor in the second cell of the same row, and choose FormatBullets and
Numbering. Switch to the Numbers tab and click the second picture in the
first row which shows a standard numbered list, and click OK. Type few items
for the list, pressing ENTER after each item.
 Open the page in the browser by pressing Ctrl+F5
Connecting Pages





You can create links between pages using:
1. HTML <a> element
2. <asp:Hyperlink> control (discussed later)
3. Programmatically through code (discussed later)
Open the page TableDemo.aspx from the Demos folder
Switch to Design view. In the first cell of the third row type the
text Link.
In the second cell of the same row, type Go HOME and
highlight it with your mouse.
On the Formatting Toolbar, click the Convert to Hyperlink
button. It’s the last button on the toolbar with a green globe on
it. Click the Browse button and choose the Default.aspx page
in the root of your site and click OK. Next, click OK again.
Connecting Pages
Connecting Pages
 Switch to Source view to see the code:
<a href="../Default.aspx">Go HOME</a>
If you want to change the page being linked to from the code
window, click somewhere between the opening and closing
quote of the href attribute and press Ctrl+Spacebar. You can
select another page or the Pick URL option and browse for the
new page somewhere in your site.
Right-click the page TableDemo.aspx in the Solution Explorer and
choose View in browser. When the page has finished loading,
click the Go HOME link. The request is sent to the web server
and, as a response, you get the home page of the web site.
If you want to link to external sites use the full address, e.g.
<a href=“http://www.google.com">Go to Google</a>
Connecting Pages
Connecting Pages