Creating ASP.NET Web Forms Website Structure and Design

1. Chapter 2 Creating Website with Web Forms

2. Objectives • Understand the different project types and templates when building ASP.NET web sites. • The different type of files available in ASP.NET and what they are used for. • How to create a structure Website • How to use the designer to create formatted web pages

3. Wrox Code • You can download the code used in the book in the following link: • http://www.wrox.com/WileyCDA/WroxTitle/Beginning-ASP-NET-4-5-1-in-C-and-VB.productCd-111884677X,descCd-DOWNLOAD.html

4. Different type of Projects • Web Application Projects: Everything is managed as a project, with a project file. Provides more structured centralized organization. • Web Site Projects: A Windows folder with files and subfolders. No project file that keeps track of all files. • Templates: Web Forms, Empty Web Site, Dynamic Data Entities, WCF Service. • We will be using Web Sites with the Web Forms Template • When we launch a website, it will be execute by IIS express a built in web server that ships with Visual Studio.

5. Creating a new Website / Existing Website • You can create a new website with New -> Website. Point it to the Chapter 2 folder  called c:\BegASPBET\Site. Choose  "ASP.NET Empty Website". • You can always configure to show the solution with Tools -> Options and go to "Projects and Solutions" Hit Always show solution. • You can also Open an Existing Website by going to File -> Open Website.

6. Adding Files • Different Files to be added can be classified as web files, code files or data files. • Web Files: Web Form (.aspx), • Master Page (.masterpage), • Web User Control (.ascx), • HTML Page (.html), Style Sheet  (.css) , • Web Configuration File (.config) , • Sitemap (.sitemap)  , Javascript (.js), • Skin Files (.skin)

7. Adding Files • Code Files: • WCF Service (.svc) : Can be called by other systems. (Chapt 10) • Class (.cs/.vb):  Contains the code that is bound to web files. • Global Application Class (.asax): Contain code that is fired in response to events that occur in your website • Data Files: • XML (.xml) , SQL DB (.mdf) , ADO.NE Entity Data Model (.edmx)  : Used to  access databases declaratively

8. Organizing your Website • You can create Folders to organize the site. Add-> New Folder • Some examples are a folder for styles or a folder for controls.

9. Adding code files • With the exception of asp.cs code behind files, .cs files that you try to add will want to be added to the App_Code folder. Follow this criteria

10. Working with Web Forms • Web Forms (.aspx files) contain a mix of HTML, ASP.NET Server Controls, javascript, CSS and programming logic. • You can see the web form by looking at the Design, Source or split view • Source View: Default view shows you HTML and markup (recommended) • Design View: Shows you how the HTML might look in a browser. (THIS IS JUST TO GET AN IDEA, BUT SHOULD NEVER BE HEAVILY RELIED UPON. ELEMENTS MAY RENDER DIFFERENTLY IN THE BROWSER) • Split View: A combination of both.

11. Working with Web Forms

12. Code behind or inline code? • It is better to use the code behind method, so that the programming is separated into the .cs file and the aspx. file is used for the markup

13. Requesting an ASPX resource • From the browsers perspective, when a request is made to a page, say MyPage.aspx the request gets sent to the web server. • Any .net components are processed by the web server (IIS) and rendered into html. • Any programing logic is executed and the end result will be browser compatible code (html).

14. Programmability in the source file • When an ASP.NET resource is loaded into memory, several events may file. The basic one is code that is executed “Page Load” occurs when the page is loaded. • We see this under the Page_Load method in the source code. We can add logic here. • Supposed we create an asp label and named id “Label 1”. We can change its value with:

15. Adding Markup (the .aspx) • Adding markup becomes easier through the design view first, because it creates a lot of the code for you by dragging the particular element.  • In the source view though, you will see the actual tag and attributes that get added when you add a particular element. • In Design view, the formatting toolbar is available.

16. Adding Tables and Other Markup • Tables are one of the main HTML elements that are often used. • The tags <table> create the start of the table. • The tags <tr> define the row in the table. • The tags <td> define the cells in the table row. • Tables can often be misused, but are practical unless you are really familiar with CSS styling. • <ol> can be used to create an ordered list or <ul> can create an un ordered list. • <li> defines the elements within the list.

17. Example (Table) <style> table,th,td { border: 1px sold black; border-collapse: collapse; } th, td { padding: 15px; } </style> <table >  <tr>    <td>Alex</td>    <td>Roque</td>     <td>100</td>  </tr>  <tr>    <td>Emmit</td>    <td>Jackson</td>     <td>90</td>  </tr></table>

18. Examples (Ordered List) <ol> <li>6/27 Classes Start</li> <li>7/4 NO CLASS</li> <li>7/13 Online Lecture</li> <li>8/3 Final</li> </ol>

19. Adding Markup to your page • Try it out Page 53 – Adding Formatted Text • Try it out Page 57 – Adding Tables and Other • Try it out Page 59 – Linking Pages

20. Connecting Pages • It is important for websites to be able to navigate through different pages by creating links or Hyperlinks. • We can connect pages through the following: • The HTML Anchor <a> element • The <asp:HyperLink> control • Programmatically through code by doing Redirects or Transfer.

21. Summary • In this chapter we covered: • Understanding the differences between the various project types and templates. • Requesting a .NET resource, what goes on behind the scenes. • How do we add a web form and how does a web form work • How to add markup to your pages