Beginning Web Site Development Module 1 – Dynamic Web Site Development Fundamentals of building dynamic Web sites with ASP.NET 2.0 and C# Version

Introduction Target audience New to programming but want to build a dynamic Web site Prerequisites Basic understanding of HTML, familiarity with Web interfaces Expectations Learn the basics of building dynamic Web sites with VWD Express and ASP.NET 2.0

Agenda Creating Web applications with VWD Creating new sites, working with pages Using ASP.NET 2.0 Server-side controls, code, and events Debugging Preparing for debugging and using VWD Deploying Using the Copy Website utility

Web site architecture Files Images Data Client browser Web Server Internet Request Response (HTML)

Creating a new Web site Choice of C# or Visual Basic for programming language

2 ways to add page content Type HTML directly (source view) Use the HTML toolbar (design mode)

Adding pages to your site Use the ‘Add new item...’ command Create new.aspx pages, HTML, and more... Right click ASP.NET Web Form HTML Page Style Sheet

Creating a Web site Setting up the initial site Adding and populating pages Using the HTML toolbox

Static versus dynamic content Static content Typically HTML files (.htm) – return the same thing each time requested Updates to content require updating.htm files Dynamic content ASP.NET Web Forms (.aspx) – can contain dynamically generated content No need to update.aspx files for new content Content typically drawn from other sources (databases, XML files, …)

ASP.NET Controls ASP.NET server-side controls Marked with “asp:” prefix Render as standard HTML Can be modified programmatically Shall I compare thee to a summer's day? Thou art more lovely and more temperate: Rough winds do shake the darling buds of May, And summer's lease hath all too short a date... Shall I compare thee to a summer's day? Thou art more lovely and more temperate: Rough winds do shake the darling buds of May, And summer's lease hath all too short a date... Renders as

Page loading Page load event Triggered as page prepares response Use to initialize ASP.NET control content Add handler by defining server-side method protected void Page_Load(object src, EventArgs e) { // Initialization code goes here }

Sample control modification Change control content in Page_Load Enables dynamic content without modifying.aspx files protected void Page_Load(object sender, EventArgs e) { if (DateTime.Now.Hour < 12) { sonnetLabel.Text = "Shall I compare thee to a......"; } else { sonnetLabel.Text = "When I do count the clock......"; } Shall I compare thee to a … When I do count the clock … Change Label content based on time of day (refer to control Using ID) After noon renders asBefore noon renders as

Complete dynamic page protected void Page_Load(object sender, EventArgs e) { if (DateTime.Now.Hour < 12) { sonnetLabel.Text = "Shall I compare thee to a......"; } else { sonnetLabel.Text = "When I do count the clock......"; } My sonnet page This sonnet will change every 12 hours Shall I compare thee to a summer's day?... Server code placed in <script runat="server" … section ASP.NET Server- Side Control

Available controls ASP.NET server-side controls Some simply mirror HTML tags Label ( ) TextBox ( ) Button ( ) DropDownList ( ) Table ( ) Panel ( ) Some render composition of HTML Calendar MultiView AdRotator

ASP.NET controls Using server-side controls Populating controls in Page_Load

Server-side events Some controls generate POSTs to server (issue another request to server) Subscribe to event to respond Button LinkButton DropDownList ListBox CheckBox (AutoPostBack='true' must be set to generate POST)

Handling a server-side event protected void MyButton_Click(object sender, EventArgs e) { ResultLabel.Text = "You clicked the button!"; } Postback controls Some controls that can post back <asp:Button ID="MyButton" runat="server" Text="Click me!" OnClick="MyButton_Click" /> On attribute in control (method and attribute added automatically with double-click in designer) Method defined with standard event handler signature

Code behind Server-side code in separate file Removes code from page, leaving only layout Page Language="C#" AutoEventWireup="true" CodeFile="CodeBehindSample.aspx.cs" Inherits="CodeBehindSample" %> <asp:Button ID="MyButton" runat="server" Text="Click me!" OnClick="MyButton_Click" /> public partial class CodeBehindSample : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { // initialize controls here } protected void MyButton_Click(object sender, EventArgs e) { ResultLabel.Text = "You clicked the button!"; } CodeBehindSample.aspx.cs

Events and code behind Using code behind pages Separating layout from logic Writing event handlers Responding to control events

Debugging with VWD VWD Express provides a full debugger Set breakpoints, step through code Inspect variables, controls when page runs Launch with Debug | Start Debugging (F5) Click to set break point Launch debug session

Debugging with VWD Step Into/Over Hover mouse over variable to see value Inspect local variable values Current line of execution

Debugging with VWD Preparing for debugging Setting breakpoints Inspecting variables

Deploying your site Deploying ASP.NET sites is just copying Copy all site files to live server FTP, Explorer drag+drop, xcopy, robocopy,... Copy Web Site utility available

Hosting options Many ASP.NET hosts available today Manage server for you Simply copy site files to host to deploy

Setting up IIS ASP.NET sites must be hosted in IIS ASP.NET hoster will set up an IIS application for you Hosting on your own machine requires IIS Development server for testing only (no remote access) Administrative Tools

Deploying Web sites Preparing IIS application on server Copying site Manually Using Copy Web Site utility

Summary Creating sites in VWD ASP.NET server-side controls Modify content dynamically Respond to events Debugging with VWD Deploying your site IIS preparation and copying the site