930 likes | 1.06k Views
HTML Applications with Visual Studio .NET. ASP.NET. Static and Dynamic Web Applications. Static Web pages Created with HTML controls—renders exactly the same every time the page is displayed Dynamic Web pages Allow users to interact with the Web page Changes appearance or content
E N D
Static and Dynamic Web Applications • Static Web pages • Created with HTML controls—renders exactly the same every time the page is displayed • Dynamic Web pages • Allow users to interact with the Web page • Changes appearance or content • One tool for creating dynamic content is Microsoft’s Active Server Pages .NET (ASP.NET) • Used to build server-side Web applications (code statements that build the page run on the server)
ASP.NET • Main ASP.NET applications: • Web Forms • Used to process forms and develop cross-browser applications • Uses .aspx file extension • Web Services • Other applications can interact with your program • Uses .asmx file extension
Web Forms • ASP.NET pages within an ASP.NET application • Identified with file extension .aspx • The Web Form consists of two (2) components: • The HTML template • The actual web page that contains the design layout, content and controls • A collection of code that commonly is located behind the Web Form • The code behind the page • Equivalent to a Form in Visual Basic .NET
Web Services • Exposes part of a program over the Internet • Web Service file has .asmx file extension • Uses open standards so it is supported across applications and platforms • Used to create business-to-business applications • Makes it possible to share data with other partners
HTML Server Controls • Similar to (and related to) HTML controls except that they are processed by the web server • The attribute and value runat="server" transforms an HTML control into an HTML Server control • HTML control: <input type="text"> • HTML Server control: <input type="text" runat="server" /> • Note: All XHTML controls must have a closing tag, if not, the tag must end with />
ASP.NET Server Controls • When they execute, they create HTML code • Similar to Visual Basic .NET controls • ASP.NET controls usually identified with prefix asp: followed by the name of the control, i.e. <asp:DropDownList> • Types of ASP.NET Server Controls • ASP.NET Form Controls (Web controls) • Data Validation Controls • User Controls • Mobile Controls (run on mobile devices)
HTML Server vs. ASP.NET Server Controls • ASP.NET form controls also have different properties than their HTML server control counterparts • HTML Server label control Message1.InnerHTML = "Product 1" • ASP server label control (properties are consistent with Visual Basic .NET controls) Message2.Text = "Product 2"
Browser Source Code • What is the Web server sending to the browser? (Look at the browser’s source code for an ASP.NET page): • ASP.NET code is never sent to the browser • Instead the ASP.NET code runs on the web server and builds an HTML document • Only HTML tags, along with client-side scripts (i.e. JavaScript statements), are sent to the browser
The Code Behind the Page • Written in an ASP.NET-compatible language • The file extension is .vb if the code is written in Visual Basic .NET • Compiled code behind the page is the class definition for the page • When the application is built, the code is compiled into an executable file stored in the bin directory
Locating Your ASP.NET Application • Web Server is called Internet Information Server • c:/Inetpub/wwwroot • This location maps to: • http://localhost/ • Applications are developed on a local Web server • The Web application is deployed to a production Web server on the Internet • Web application files can be transferred to a server using File Transfer Protocol (FTP) software
The .NET Framework • An architectural model for creating programs that interface with the operating system and base class libraries • Contains a hierarchical set of Base Class Libraries • Base class libraries are code libraries that provide general functions
Namespaces • Base class libraries are organized into namespaces • The top namespace for all .NET classes is System • All Web Forms inherit the "System.Web.UI" namespace • System.Web.UI contains classes for controls used on Web Forms: • HTML Server controls • ASP.NET Server controls (Web controls)
Registering ASP.NET with IIS • To develop ASP.NET applications, a web server such as Internet Information Server (IIS) must be installed on the computer • Even if the web server has previously been installed, ASP.NET still may need to be registered with IIS • From the command prompt, enter the following or similar: windowsDirectory\Microsoft.NET\Framework\versionNumber\aspnet_regiis.exe -i
Visual Studio .NET User Interface (Page 1) • Integrated Development Environment (IDE)—the shared development environment • Document windows(Edit and view documents) • Resource Tools • Solution Explorer—manage project files and resources • Server Explorer—access server public components and manage connections to databases
Visual Studio .NET User Interface (Page 2) • Resource Tools (continued) • Properties window—for setting properties for objects, controls, and classes • Document Tab—allows switching easily between open documents • Toolbox—contains commonly used controls • Task window—contains a to do list, i.e. errors that must be corrected before the application runs successfully
Creating a Web Application (Page 1) • A solution may contain pointers to many projects • Solution files are stored in a folder in the Visual Studio Projects folder • Project name is also the folder (directory) name • By default, project name is the solution name (one or more projects make up a solution) • Project files are stored in the same folder
Creating a Web Application (Page 2) • Any of the following may be the Web server name: • Localhost • the machine name • IP address • 127.0.0.1 • Default Web site is http://localhost/ProjectName/ as in http://localhost/Chapter2/
Creating a Web Application (Page 3) • To create an ASP.NET project: • Select the File menu from the menu bar, the New command from the File menu and Project… from the submenu • Make sure to verify that Visual Basic Projects is selected in the "Project Types" pane • Select the ASP.NET Web Application template • Name the solution by completing the "Location:" following "localhost/", i.e. http://localhost/Chapter2 • Click the <OK> button (may take a while to create)
The Solution Explorer Window • Contains folders, project files, and hidden files • Contains Reference folder—listing of base class libraries and namespaces • Contains a bin directory—stores the compiled application • Compiled application is named after the project name with the file extension .dll, i.e. "Chapter2.dll"
Adding an Existing Item • Existing items might include Web Forms, HTML Pages, Web User Controls, image files, etc. • Before starting, be certain folder that the item will be inserted into is selected in the "Solution Explorer" • Select Project from the menu bar • Select Add Existing Item… from the Project menu • Browse to "Look in:" folder • Select "Files of type:" from drop-down list • Select files and click <Open> button; the item(s) is/are added to specified folder in Solution Explorer
Chapter2 Project • Add all images from the Chapter02 download • Drill down to C:\Course Technology\????? \Chapter02\images • Select "All Files" from Files of type: dropdown list • Select all files and click <Open> button
Adding a New Item • Before starting, be certain folder where new item will be inserted into is selected in Solution Explorer • Select Project from the menu bar • Select the command from Project menu depending upon type of item to be added, i.e.: • Add Web Form… • Add Web User Control… • Add HTML Page… • Type filename (appropriate extension will be added) • Click <Open> button; the new item(s) is/are added to the selected folder in Solution Explorer
The Toolbox • Provides access to commonly used controls • Organized as tabs including: • HTML tab—contains the HTML controls • Web Forms tab—contains ASP.NET Server controls • Can be hidden and can slide out like several other windows—the Auto Hide feature • Default mode for the Toolbox • Click the Auto Hide icon (push pin) to turn off feature
Properties Window • Set the properties for objects, controls, and classes • Properties can be updated: • At design time • In the program code behind the page
HTML Controls (Page 1) • HTML is a markup language <hr noshade> • HTML standards are set by World Wide Web Consortium (W3C) • XHTML is the current version; it is "XML compliant" • Requires beginning and closing tags • If there is no closing tag, use "<tagName />" , i.e. <hr noshade />
HTML Controls (Page 2) • HTML Designer (two tabs near bottom of Web Form) • Design view—a graphical user interface (GUI) • HTML view—HTML code editor • The ms_positioning attribute of the <body> tag • GridLayout—absolute position objects on the page • FlowLayout—position elements in top-down format • IntelliSense—a drop-down list of commands related to the command that the developer is typing
Turning Off Auto Formatting • To keep ASP.NET from reformatting the HTML code every time an application is saved or when switching from Design to HTML view: • Select Tools from menu bar • Select Options… from Tools menu • Click Text Editor in Options dialog window • Select HTML/XML in Text Editor folder • Select Format command from HTML/XML folder • Apply Automatic Formatting—turn off both "When saving document" and "When switching from Design to HTML/XML view"
feedback.htm Return
feedback.htm (Page 1) • In HTML view, modify the following in the Properties window: • Title Tara Store • Keywords Irish Gifts, Ireland, Tara Store • In Design view, drag "header.jpg" file from "images" folder in Solution Explorer to upper-left corner of the Form and modify in the Properties window: • Alt Tara Store Banner
feedback.htm (Page 2) • In HTML view, add the following tag after <img … >: <hr> • Modify the position of the <hr> tag by updating the Style property (click Build (…) button in Properties window … • Position tab—Position Mode = Absolutely position; Top = 89; Left = 0;
feedback.htm (Page 3) • In Design view • Select Table from the menu bar • Select Insert from the Table menu • In the "Insert Table" dialog, set properties: • Rows=6; Columns=1 • Border=0 • Position=Absolute • Left=244; Top=132
feedback.htm (Page 4) • Enter into the first row of the Table "Tara Store Feedback Form" • Select entire phrase and on the Formatting toolbar: • Style Heading 2 • Font Verdana • Size 4
feedback.htm (Page 5) • From the HTML tab in the Toolbox, drag a Label control into the second row of the Table • Select the Label (click twice but slowly) and enter the following: • "Complete the form" • Then press <Shift> + <Enter> • "and click on the submit button" • Set properties: • Class TSHeading
feedback.htm (Page 6) • From the HTML tab in the Toolbox, drag a Text Field control into the third row of the Table • Set properties: • Class txtBox • ID Email • Size 30 • Value Enter your e-mail address
feedback.htm (Page 7) • From the HTML tab in the Toolbox, drag a Text Area control into the fourth row of the Table • Set properties: • Class txtBox • Cols 25 • ID comments • Rows 5 • In HTML view after (on the same line) the opening <textarea …> tag, enter the following: • "Enter your comments"
feedback.htm (Page 8) • In Design view from the HTML tab in the Toolbox, drag a Submit Button control into the fifth row of the Table • Set properties: • Class TSButton • ID btnSubmit • Value Send
feedback.htm (Page 9) • Type bulleted list (select from Formatting toolbar) into the last row of the Table as follows: • E-mail us at info@TaraStore.com • Visit us at www.TaraStore.com • In HTML view, one at a time select inside each of the <li> tags within the last row and set properties: • Class TSLinks