Chapter 9 Programming with Web FormsPowerPoint PresentationC# and Web ProgrammingClient/Server Web ApplicationWeb ClientsWeb PagesASP.NETC# and ASP.NETCreating Web FormsWeb Forms in the Visual Studio IDECreating Your First Web Form – Step-by-StepViewing the HTML CodeBrowser ViewControlsControls cont.Event HandlingFilesCoding Event Handlers – Step-by-StepDebugging and Testing in Other BrowsersLaying Out Web FormsUsing Tables for LayoutEntering Data in a TableUsing the Validator controlsASP.NET Validator ControlsManaging Web ProjectsMoving a ProjectCreating a Virtual DirectoryWeb Sharing the Project FolderRenaming a Web ProjectDeleting a Web ProjectSome Web AcronymsYour Hands-On Programming ExampleSlide 33Chapter 9Programming with Web FormsProgramming in C# .NET © 2003 by The McGraw-Hill Companies, Inc. All rights reserved.23C# and Web ProgrammingC# uses Web Forms to create the user interface for Web projectsASP.NET Web ApplicationWeb Forms display in a browserInternet ExplorerNetscape NavigatorMobile Internet ToolkitMobile Web Forms4Client/Server Web ApplicationWeb applications require a server (IIS) and a client (a browser)Web servers send Web pages to the clientNeed a remote or local Web server to develop Web applicationshttp://22.64.217.151:8088/UserID/AppName - CSNT2 remote development serverInstall Internet Information Services (IIS) and FrontPage 2000 Server Extensions on local machineMust install IIS before installing C#5Web ClientsBrowsers display hypertext markup language (HTML) pages which may include a programming language in scriptMay know browser type if on an intranetTest Web applications on multiple browsers6Web PagesHTML Web pages are stateless A stateless page does not store information from one invocation to the nextCan store cookies or send state information to server with URL to handle state issuesAfter request for Web page from client, server sends client a preformatted HTML file or a dynamically generated (DHTML) pageActive server pages (ASP) also used to send pages to client by server7ASP.NETASP.NET replaces ASP as a Web development toolProvides libraries, controls, programming support to write interactive programs that maintain state, render controls, display data and generate required HTMLWeb Forms in C# uses ASP.NET8 C# and ASP.NETEach Web Form has two parts:The HTML and instructions to render page in a browserThe C# codeWeb Form HTML file has .aspx extensionWeb Form C# code has .aspx.cs extensionHTML is generated automatically by the Visual Studio IDEUse C# code to write code to respond to eventsC# code file is called the “CodeBehind” file9Creating Web FormsIn the New Project dialog box, select ASP.NET Web ApplicationDefault project location is http://localhostUse http://22.64.217.151:8088/UserID/AppName Name the project by modifying the LocationYou must have the correct Web Permission settings to create Web projects10Web Forms in the Visual Studio IDEConnection to Web server established when project opensWeb page or Web form displayed with message indicating the layout typeGrid Mode or Flow LayoutMessage disappears when a control is added to the formToolbar and files in the Solution Explorer are different from Windows FormsToolbox has some different controls, and similar controls have some different properties and eventsWeb form inherits from System.Web.UI.Page not System.Windows.Form11Creating Your First Web Form – Step-by-StepThis simple step-by-step tutorial creates a Web application that displays “Hello World” on a document in a browser window.1. Begin the Project2. Create the User Interface3. Run the Web Application – Without Debugging12Viewing the HTML CodeClick on HTML tab at bottom of Web Form in the designer to see the static HTML codeHTML code is automatically generated13Browser ViewRight-click on form and select View in BrowserNew tab added to the Editor window to display page is it appears in a browser14ControlsTypes of controls available for Web FormsHTML controls – Operate only on the clientUse when converting existing pages HTML server controls HTML controls convert to Server controlsMatch HTML controls one-for-one with same attributes plus object-oriented, event-driven, server-side programmingWeb server controls (ASP.NET server controls) Richest, most powerful controlsRendered differently for different browsersYou can mix the control types on a single form15Controls cont.You can see available controls in the toolboxClick on HTML, Web Forms, and ComponentsWeb server controls on Components list are non-visual components in component trayIn Design view, server controls display a small green arrow in the upper-left corner16Event HandlingWrite C# code for events of Web controlsEvents occur on client or server sideEvents of Web Forms and controls are somewhat different from those of Windows FormsPage_Load event17FilesWeb application uses different files than a Windows application.aspx file holds user interface specifications used by server to render the page.aspx.cs file holds the C# code (“code-behind” file)Styles.css is the Cascading Style Sheet fileWeb.config file may appear in multiple directories.dll (dynamic link library) file is created when Web project is compiled and stored in project’s bin folder.dll file produces HTML output for page upon user requestContains the “Code Behind”18Coding Event Handlers – Step-by-StepIn this continuation of the earlier step-by-step tutorial, you will add a text box and a button and code an event-handling method for the button. When the user clicks the button, the page is submitted to the server. The event handler executes on the server and the page is sent back to the client.1. Add Controls and Code2. Add Remarks19Debugging and Testing in Other BrowsersVisual Studio IDE is designed to debug in many languagesSet breakpoints, single-step execution, display contents of variables and propertiesWEB.Config Custom Errors set to OffTwo ways to test in other browsersLaunch the browser and type URL of your page into Address barWith form displayed in Design window select File/Browse With and select from browsers installed on your computer20Laying Out Web FormsASP.NET generates HTML for various browsers but is not aware of screen sizes, resolution or window size on clientPageLayout property determines how and where controls appear on Web pageGrid layout – Determine placement of control using x and y gridFlow layout – Works similar to adding text in a word