Download - Web Programming: Client/Server Applications
![Page 1: Web Programming: Client/Server Applications](https://reader033.vdocuments.net/reader033/viewer/2022061610/5681538f550346895dc19491/html5/thumbnails/1.jpg)
Web Programming: Client/Server Applications• Server sends the web pages to the client.
– built into Visual Studio for development purposes
• Client displays the web pages in a browser.– e.g., IE, Firefox, Chrome, Safari– web pages are Web Forms in VB.NET
![Page 2: Web Programming: Client/Server Applications](https://reader033.vdocuments.net/reader033/viewer/2022061610/5681538f550346895dc19491/html5/thumbnails/2.jpg)
Web Documents (Pages)
• Documents (web pages) consist of HTML, CSS, Java applets, Javascript.
• Web page is generally stateless
• does not store any information about its contents from one invocation to the next
• Techniques for working around stateless issue:
• cookies stored on local machine
• send state information to server as part of the page's address, uniform resource locator (URL)
![Page 3: Web Programming: Client/Server Applications](https://reader033.vdocuments.net/reader033/viewer/2022061610/5681538f550346895dc19491/html5/thumbnails/3.jpg)
ASP.NET
• ASP.NET is a Web programming technology from Microsoft.
• ASP.NET provides libraries, controls, and programming support for:
• Interacting with the user
• Maintaining state, rendering controls
• Displaying data, and generating appropriate HTML
• When using Web Forms in VB .NET you are using ASP.NET.
• 2 files are generated:•.aspx extension contains HTML
•.aspx.vb extension hasVB code (not compiled into .exe)
![Page 4: Web Programming: Client/Server Applications](https://reader033.vdocuments.net/reader033/viewer/2022061610/5681538f550346895dc19491/html5/thumbnails/4.jpg)
Create a New Project in Visual Web Developer
• Under Visual Basic/Web, select
ASP.NET Empty Web Application
When project opens, connection to a Web Server is established.
![Page 5: Web Programming: Client/Server Applications](https://reader033.vdocuments.net/reader033/viewer/2022061610/5681538f550346895dc19491/html5/thumbnails/5.jpg)
IDE for Visual Web Developer with New Web Project
![Page 6: Web Programming: Client/Server Applications](https://reader033.vdocuments.net/reader033/viewer/2022061610/5681538f550346895dc19491/html5/thumbnails/6.jpg)
Viewing the HTML Code
• Design and Sources tabs at bottom of the form in the Designer allow you to switch between the HTML code and VB code.
• Click on the Source tab to view the static HTML code.
![Page 7: Web Programming: Client/Server Applications](https://reader033.vdocuments.net/reader033/viewer/2022061610/5681538f550346895dc19491/html5/thumbnails/7.jpg)
ToolBox Controls
• VS Designer adds a small green arrow in the upper-left corner of server controls.
ASP Server Control
Client-side HTML Control
• Several types of controls are available for Web Forms and can be mixed on a single form.
• Very often used are the Standard (ASP.NET server controls) — provided by ASP.NET and the .NET framework.
![Page 8: Web Programming: Client/Server Applications](https://reader033.vdocuments.net/reader033/viewer/2022061610/5681538f550346895dc19491/html5/thumbnails/8.jpg)
Using Tables for Layout
• ASP.NET generates appropriate HTML to render the page in various browsers but cannot be aware of the screen size, resolution, or window size on the target machine.
• Table is an HTML control, requiring no server-side programming, and provides good layout capabilities.
• Add controls and text to the table cells to align the columns.
![Page 9: Web Programming: Client/Server Applications](https://reader033.vdocuments.net/reader033/viewer/2022061610/5681538f550346895dc19491/html5/thumbnails/9.jpg)
Entering Controls or Text in a Table
• Add a label and assign it a property for ID to be able to refer to the text in a cell at run time. –OR—
• Type text directly into the cell.
![Page 10: Web Programming: Client/Server Applications](https://reader033.vdocuments.net/reader033/viewer/2022061610/5681538f550346895dc19491/html5/thumbnails/10.jpg)
Including Images on Web Pages
• Use the Image control to add graphics to a Web page.
• Concept is similar to the PictureBox control on Windows Forms but the graphic file is connected differently due to the nature of the Web applications.
• Each Image control has an ImageUrl property that specifies the location of the graphic file.
• To place an image on a Web page, the graphic should first be copied into the Web site folder.
• Image controls can be added to a cell in a table or directly on a Web page.
![Page 11: Web Programming: Client/Server Applications](https://reader033.vdocuments.net/reader033/viewer/2022061610/5681538f550346895dc19491/html5/thumbnails/11.jpg)
Navigating Web Pages
• Add a HyperLink control to allow the user to navigate to another site or page.
• Enter a Text property for the text to display for the user.
• Enter a NavigateUrl property to specify the URL to which to navigate; the Select URL dialog box displays.
• Select the page from a list.
• To go to another website, type the Web address as the NavigateUrl property value.
![Page 12: Web Programming: Client/Server Applications](https://reader033.vdocuments.net/reader033/viewer/2022061610/5681538f550346895dc19491/html5/thumbnails/12.jpg)
Adding a Second Web Page
To add a new web form to a web site, select Web Form in the Add New Item dialog box.
Make sure to choose Visual Basicfor the language and check Place code in separate file.
![Page 13: Web Programming: Client/Server Applications](https://reader033.vdocuments.net/reader033/viewer/2022061610/5681538f550346895dc19491/html5/thumbnails/13.jpg)
Using the Validator Controls
• ASP.NET provides several controls that can automatically validate input data. Examples:
•RangeValidator control verifies user input is within a minimum and maximum value.
•RequiredFieldValidator control verifies the user input is not empty.
• First add a validator control then attach it to an input control and set the error message (done by setting properties).
• At run time, when data is input, the error message displays if the validation rule is violated.
• Validator controls run on the client side.
![Page 14: Web Programming: Client/Server Applications](https://reader033.vdocuments.net/reader033/viewer/2022061610/5681538f550346895dc19491/html5/thumbnails/14.jpg)
Maintaining the State of a Web Page
• When an ASP.NET application loads, the Page-Load event occurs—the page is reloaded for each “round-trip” to the server. This is known as a postback. Postbacks occur many times in a Web application and you lose the value of controls upon each reload.
• Use module-level variables in controls to hold their values during postback. (Do not use local variables!)
• Set EnableViewState to True (default), so the control contents reappear for each postback.
• The page’s IsPostBack property is set to False for the initial page load and to True for all page loads after the first. Check for a True value to make sure that actions are only performed on postbacks.
![Page 15: Web Programming: Client/Server Applications](https://reader033.vdocuments.net/reader033/viewer/2022061610/5681538f550346895dc19491/html5/thumbnails/15.jpg)
A Couple of Final Facts
• By default, web projects are tested in Microsoft Internet Explorer. To test in another browser on your machine:
• Right-click on the project name
• Select Browse With
• To copy a web project you’ve created, simply copy the Solution folder to the desired location (just as for Windows projects).
![Page 16: Web Programming: Client/Server Applications](https://reader033.vdocuments.net/reader033/viewer/2022061610/5681538f550346895dc19491/html5/thumbnails/16.jpg)
A Complete Example
• Exercise 9.3, page 395:
–Create a web page to enter customer information like name, email, username, password.
–Format the web page using a table.
–Validate the fields.
–When the user clicks Submit, display a second confirmation page.