Transcript Chpt2Lecture

Chapter 2
Creating Website with Web Forms
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
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-Cand-VB.productCd-111884677X,descCd-DOWNLOAD.html
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.
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.
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)
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
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.
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
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.
Working with Web Forms
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
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).
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:
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.
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.
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>
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>
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
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.
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