Introduction

Beginning Web Site DevelopmentModule 1 – Dynamic Web Site DevelopmentFundamentals 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 Client browser Request Web Server Files Internet Images Data 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 <asp:Label runat="server" ID=“sonnetLabel"> Shall I compare thee to a summer's day?<br /> Thou art more lovely and more temperate:<br /> Rough winds do shake the darling buds of May,<br /> And summer's lease hath all too short a date... </asp:Label> Renders as <span id=“sonnetLabel"> Shall I compare thee to a summer's day?<br /> Thou art more lovely and more temperate:<br /> Rough winds do shake the darling buds of May,<br /> And summer's lease hath all too short a date... </span>

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 ...<br />..."; } else { sonnetLabel.Text = "When I do count the clock ...<br />..."; } } Change Label content based on time of day (refer to control Using ID) <asp:Label runat="server" ID=“sonnetLabel"> </asp:Label> Before noon renders as After noon renders as <span id="poemLabel"> Shall I compare thee to a …<br /> </span> <span id="poemLabel"> When I do count the clock …<br /> </span>

Complete dynamic page <%@ PageLanguage="C#"%> <script runat="server"> protected void Page_Load(object sender,EventArgse) { if (DateTime.Now.Hour < 12) { sonnetLabel.Text = "Shall I compare thee to a ...<br />..."; } else { sonnetLabel.Text = "When I do count the clock ...<br />..."; } } </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>My sonnet page</title> </head> <body> <form id="form1" runat="server"> <div> <h2>This sonnet will change every 12 hours</h2> <asp:Labelrunat="server" ID="sonnetLabel"> Shall I compare thee to a summer's day?<br/>... </asp:Label> </div> </form> </body> </html> 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 (<span>) • TextBox (<input type='text' >) • Button (<input type='button' >) • DropDownList (<select>) • Table (<table>) • Panel (<div>) • 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 <%@ PageLanguage="C#"%> <script runat="server"> protected void MyButton_Click(object sender, EventArgse) { ResultLabel.Text ="You clicked the button!"; } </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Postback controls</title> </head> <body> <form id="form1" runat="server"> <div> <h2>Some controls that can post back</h2> <asp:ButtonID="MyButton" runat="server" Text="Click me!" OnClick="MyButton_Click" /> <br/><br/> <asp:LabelID="ResultLabel" runat="server" /> </div> </form> </body> </html> Method defined with standard event handler signature On<event name> attribute in control(method and attribute added automatically with double-click in designer)

Code behind • Server-side code in separate file • Removes code from page, leaving only layout <%@ PageLanguage="C#" AutoEventWireup="true" CodeFile="CodeBehindSample.aspx.cs" Inherits="CodeBehindSample" %> <html xmlns="http://www.w3.org/1999/xhtml" > <body> <form id="form1" runat="server"> <asp:ButtonID="MyButton" runat="server" Text="Click me!" OnClick="MyButton_Click" /> <br/><br/> <asp:LabelID="ResultLabel" runat="server" /> </form> </body> </html> CodeBehindSample.aspx.cs 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!"; } }

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 Current line of execution Hover mouse over variable to see value Inspect local variable values

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 • http://asp.net/hosters • Manage serverfor you • Simply copy sitefiles 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

Introduction

Introduction

Presentation Transcript

Introduction to introduction to introduction to … Optimization

INTRODUCTION/ INTRODUCTION

Introduction

INTRODUCTION

Introduction

Introduction