CSC209 Web Programming

1. CSC209 Web Programming Chapter 2 – Building an ASP .NET Web Site Dr. StephanosMavromoustakos

2. Adding New Items Right-Click your website name in the Solution Explorer and choose Add New Item

3. 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).

4. 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

5. 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:

6. Organizing your Site

7. 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”

8. 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: • 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.

9. 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

10. Working with Web Forms

11. 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.

12. 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 drop-down 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.

13. Inserting and Formatting Text

14. Inserting and Formatting Text

15. 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.

16. Adding Tables and Other Markup

17. Adding Tables and Other Markup

18. 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.

19. 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

20. Connecting Pages • You can create links between pages using: • HTML <a> element • <asp:Hyperlink> control (discussed later) • 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.

21. Connecting Pages

22. 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>

23. Connecting Pages

24. Connecting Pages