Web Site Structure and Path

IT 4203 Advanced Web Development

Jack G. Zheng Fall 2010

Introduction

Web pages in the same site consists of two type of UI elements

Specific page level content Common site level content

Main menu Style and script links Common HTML header information Layout, header, footer, logo, etc.

Common site level contents should be easily and flexibly developed and maintained

Usually requires the development and maintenance at the site level, rather than at the page level.
2

Basic Approaches

Content module approach Template approach

Hybrid approach (template + modules)

Content Module Approach

Content module approach

Heavy use of include on individual pages Example: SSI

Module 1: Header Module 2: Footer

Header Page 1 content Footer

Header Page 2 content Footer

4

Content Module Approach

Content module approach

Heavy use of include on individual pages Example: SSI

Module 1: Header Module 2: Footer

Header Page 1 content Footer

Header Page 2 content Footer

5

Hybrid Approach

Template + Modules

Example: many blog sites

Modules Modules Modules Page 1 (template applied): Common Header Page 1 Content Common Footer

Page Template: Common Header

Template Module

Page Module Page Module

Dynamic Content Place Holder

Page 2 (template applied): Common Header Page 2 Content

Page Module Page Module

6

Common Footer Common Footer

Basic Techniques

Server Side Includes ASP.Net

Response.WriteFile() Server.Execute() User controls Master page

Client side

Frames HTML DOM + JavaScript AJAX

7

Server Side Includes (SSI)

Server Side Includes (SSI) is a web scripting language (not ASP.Net exclusive) to include the contents of one or more files into a web page

Frequently used for content modulation SSI can include HTML files, source code file, and other raw file source. Note that whats included is the source code, not the generated content.
This SSI script can be put anywhere in the web page (where the content of header.htm should be inserted.)

Example

<!-- #include virtual=header.htm" -->

header.htm is the content module.

For more information

http://en.wikipedia.org/wiki/Server_Side_Includes
8

SSI Limitations

SSI scripts are evaluated before ASP.Net framework code or, included files are processed and inserted before the scripts are executed.

The following codes do NOT work

<% NOT Working! string fname="header.aspx"; %> <!--#include file="<%= fname%>"--> <!--#include file="header.aspx?choice=1" -->

SSI is problematic to work with dynamic ASP.Net pages (aspx files with .Net code)
9

Response.WriteFile()

Response.WriteFile() can insert a files content directly in the output stream.

The included file content are processed and inserted after the scripts are executed.
The raw source is directly inserted without additional processing, which is not appropriate in this context. Use static content file instead.

Example

Response.WriteFile("header.aspx")

It is mainly used for inserting static content programmatically.

10

Server.Execute()

Server.Execute() can return a files execution restuls (content) in the current context.

Whats included is not the raw source, but the execution results.

Examples (all are valid):

string fname="header.aspx"; Server.Execute(fname); Server.Execute(footer.htm"); Server.Execute(module.aspx?choice=1");

Reference:

http://msdn.microsoft.com/enus/library/system.web.httpserverutility.execute.aspx
11

User Controls

User controls are containers into which you can put markup and Web server controls. A user control can be treated as a unit and be reused in different pages. User controls work in a similar way as SSI, only with richer functionalities.

12

Example: User Control

links.ascx: user control files end with .ascx

A user control begins with a Control directive.

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="links.ascx.cs" Inherits="structure_links" %>

A user control can use code-behind class.

<h1>This is a user control</h1> <asp:Image ID="Image1" runat="server" /> <%= Request.QueryString[0] %> A user control consists of
The query string is from the URL of its container page.
HTML tags, web server controls, and code.
13

Using User Controls

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="structure_Default" %> <%@ Register src="links.ascx" tagname="links" tagprefix="uc1" %>
Register a user control first.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <body> <form id="form1" runat="server"> <uc1:links ID="links1" runat="server" /> <div></div> </form> </body></html>
Insert the user control just like SSI to where it is actually needed.

14

Dynamically Loading Controls

Container page .aspx

Define a place holder where the user control should be inserted.

<asp:PlaceHolder ID="ControlHolder1" runat="server"> </asp:PlaceHolder>

Container page code-behind

Control myControl =(Control)Page.LoadControl("Links.ascx"); ControlHolder1.Controls.Add(myControl);
15

Master Page

ASP.NET master page is a web page template that defines the common elements and behaviors of many pages. A web page that implements the master page consists of two pieces

The master page itself Content pages: which contains the page specific content

When content pages are requested, master pages and content pages are merged

The output combines the layout of the master page with the content from the content page.
16

How Master Page Works

1. In the content page, you create the content by adding Content controls and mapping them to ContentPlaceHol der controls on the master page.

In addition to static text and controls that will appear on all pages, the master page also includes one or more ContentPlaceHolder controls. These placeholder controls define regions where replaceable content will appear.

2. Add text and controls to Content controls. In a content page, anything that is not inside the Content controls (except script blocks for server code) results in an error. You can perform any tasks in a content page that you do in an ASP.NET page. For example, you can generate content for a Content control using server controls and database queries.
When a content page is requested, its content is merged with the master page, and the page runs in the context of the content page.

17

Example Master Page: it4203.master

A master page begins with a Master directive, and can have its own code-behind file.

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="it4203.master.cs" Inherits="MasterPage_it4203" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <asp:ContentPlaceHolder id="head" runat="server"></asp:ContentPlaceHolder> </head>
A place holder is defined in the head section.

<body> <form id="form1" runat="server"> <h2>IT 4203 - Fall 2010</h2><h1>Advanced Web Development</h1> <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server> </asp:ContentPlaceHolder> <p id="footer">2010 Jack G. Zheng</p> A place holder is defined in the body section. </form> </body></html>
18

Example Content Page

A content page has its own title.
A master page is specified.

<%@ Page Title="IT 4203" Language="C#" MasterPageFile="~/it4203.master" AutoEventWireup="true" CodeFile="it4203-contentpage.aspx.cs" Inherits="structure_it4203_contentpage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> </asp:Content>
A place holder is created corresponding to the one defined in the master page, but without any content.

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <h2>Course Description</h2> <p>This course covers more advanced topics on web application development including server-side programming ...</p> </asp:Content>
Create some page specific content in the second place holder. No other elements are outside place holders.
19

File Paths in Master Pages

The master page and content page do not have to be in the same folder.

This can affect how you specify relative paths for resources, such as image files and target pages, in anchors.

The context for the merged content page and master page is that of the content page. In general, when working with elements on master pages, it is recommended that you use a server control, even for elements that do not require server code.

In server controls on master pages, ASP.NET dynamically modifies the URLs of properties that reference other resources.

20

Advantages of Master Page

Master page is a direct implementation of the template approach for common web site elements

They allow you to centralize the common functionality of your pages so that you can make updates in just one place. They make it easy to create one set of controls and code and apply the results to a set of pages. They give you fine-grained control over the layout of the final page by allowing you to control how the placeholder controls are rendered. They provide an object model that allows you to customize the master page from individual content pages.
21

Application Path

Application root (home) directory operator ~

Example: the website is http://student.zwebinfo.net/demo/

demo is the application root ~/ refers to /demo/ ~/default.aspx refers to /demo/default.aspx

Use this operator with server controls where path information is needed

Get application path information

In your application, you might need to determine the path of a file or other resource on the server. See http://msdn.microsoft.com/en-us/library/ms178116(v=VS.90).aspx

Determining physical file path for a resource

Server.MapPath(string virtualpath) Example: Server.MapPath("~") returns the physical path of the application root directory defined in IIS, which could be C:\inetpub\wwwroot\student\demo\
22

Web Navigation

Web navigation (moving from page to page) can be initiated by user actions such as clicking on a link/button or submitting a form

Web navigation can also be initiated by the browser and server

Server.Trasfer() Response.Redirect()

23

Summary

Key concepts

Server Side Includes User controls Master page and content page

Key skills

Know the different approaches and techniques to develop and maintain the common content blocks of a website. Apply master pages for the common look and feel of a website.
24

Key Readings and Resources

Server Side Includes

http://en.wikipedia.org/wiki/Server_Side_Includes

ASP.Net User Controls

http://msdn.microsoft.com/en-us/library/y6wb1a0e(v=VS.85).aspx

ASP.NET Master Pages Overview

http://msdn.microsoft.com/en-us/library/wtxbf3hh(v=VS.90).aspx

ASP.NET Web Site Paths

http://msdn.microsoft.com/en-us/library/ms178116(v=VS.90).aspx

25