ASP.Net, Web Forms and Web Controls 1 Outline Introduction Simple HTTP Transaction System Architecture Creating and Running a Simple Web Form Example Web Controls Text and Graphics Controls AdRotator Control Validation Controls

Introduction Web-Based Application Development Creates Web content for Web browser clients, includes HyperText Markup Language (HTML) Client-side scripting Images and binary data Uses Web Forms, Web Controls, and C# programming Web Forms (Web Form pages) Represent what the Web page sent to client will look like File extension.aspx ASPX (Web Form files) contain written code, event handlers, utility methods and other supporting code Every ASPX file has a corresponding class written in.NET language (C#) called the code-behind file 2

Simple HTTP Transaction HyperText Transfer Protocol (HTTP) Defines methods and headers which allows clients and servers exchange information in uniform way Uniform Resource Locator (URL) IP address indicating the location of a resource All HTML documents have a corresponding URL Domain Name Server (DNS) A computer that maintains a database of hostnames and their corresponding IP addresses Microsoft Internet Information Services (IIS) Web server that programmers use when developing ASP.NET Web applications in Visual Studio 3

A Simple HTTP Transaction 4 Client interacting with Web server. Step 1: The GET request, GET /books/downloads.htm HTTP/1.1.

A Simple HTTP Transaction 5 Client interacting with Web server. Step 2: The HTTP response, HTTP/ OK or HTTP/ Not found

System Architecture Most Web-based applications are multi-tier applications Tiers are logical groupings of functionality Information Tier (data tier or bottom tier) Maintains data pertaining to the applications Usually stores data in a relational database management systems (RDBMS) Middle Tier Implements the business logic, controller logic and presentation logic Acts as an intermediary between data in the information tier and the application's clients Client Tier – application’s user interface (Web browser) 6

System Architecture 7 Three-tier architecture.

Creating and Running a Simple Web-Form Example Program consists of two related files ASPX file C# code-behind file Example Show the output Step-by-step process to create the program Present the code (much of which is generated by Visual Studio) 8

WebTime.cs Program Output 9 WebTime ouput

Creating and Running a Simple Web Form Example 10 Adding Web Form for project WebTime (Right click on project in Solution Explorer)

Creating and Running a Simple Web Form Example 11 Click on Add New Item and Add a Web Form for project WebTime.

Creating and Running a Simple Web Form Example 12 code-behind file ASPX file

Creating and Running a Simple Web Form Example 13 Solution Explorer window for project WebTime. code- behind file ASPX file

Creating and Running a Simple Web Form Example 14 Toolbox in Visual Web Developer.

Creating and Running a Simple Web Form Example 15 Source mode of Web Forms designer. Design mode button

Creating and Running a Simple Web Form Example 16 Design mode of Web Forms designer. Cursor’s current location Cursor

Creating and Running a Simple Web Form Example 17 Split mode of Web Forms designer.

Creating and Running a Simple Web Form Example 18 Code-behind file for WebTime.aspx.cs generated by Visual Web Developer.

Designing the Page Designing a Web Form as simple as a Windows Form Use Toolbox to add controls to page in Design mode Unlike working with Windows Form, type text directly on a Web Form at the cursor location or insert XHTML elements using menu commands Control and other elements are placed sequentially on a Web Form position is relative to Web Forms upper left corner Alternate type layout (absolute positioning) is discouraged 19

Designing the Page 20 WebForm.aspx after adding Label and setting its properties. label Web Form

Adding Page Logic Open WebTime.aspx.cs Add to Page_Load event handler //display the server's current time in timeLabel timeLabel.Text = DateTime.Now.ToString("hh:mm:ss"); 21

Running the Program Can view the Web Form several ways Select Debug > Start Without Debugging runs the app by opening it in a browser window If created on a local file system URL Debug>Start Debugging view web app in a web browser with debugging enabled Do you want IDE to modify the web.config file to enable debugging? Click OK To view ASPX file right click either the Web Forms Designer or the ASPX file name and select View in Browser to load the page Finally, can open web browser and type the web page’s URL in the Address field 22

WebTime.aspx Simple Web Form Example #form1 { height: 255px; width: 655px; }.style1 { font-size: large; } 23 This attribute determines how event handlers are linked to a control’s events AutoEventWireUp set to true so ASP.NET treats method of name Page_eventName as an event handler for a specified event Specify class in the code- behind file from which this ASP.NET document Document type declaration, specifies document element name and URI Title for web page Directive to specify information needed to process file

Current time on the Web Server: <asp:Label ID="timeLabel" runat="server" BackColor="Black" Font-Size="XX-Large" ForeColor="Lime"> 24 Body tag, beginning of Web page’s viewable content Attribute indicates the server processes the form and generates HTML for client The asp:Label control maps to HTML span element – markup for the Label Web control

// WebTime.aspx.cs // The code-behind file for a page that displays the Web server's time. using System; using System.Configuration; using System.Data; using System.Linq; using System.Web; using System.Web.Security; // definitions for graphical controls used in Web Forms using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; public partial class WebTime : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { //display the server's current time in timeLabel timeLabel.Text = DateTime.Now.ToString("hh:mm:ss"); } 25 Contains classes that manage client requests and server responses Contain classes for creation of Web-based applications and controls Set timeLabel’s Text property to Web server’s time Event raised when Web page loads

Creating and Running a Simple Web-Form Example How are ASPX file and code-behind file used to create the Web page that is sent to the client? WebTimeTest.aspx.cs is the base class specified in the ASPX file WebTimeTest inherits from Page, which defines general functionality of a Web page Also defines some of its own functionality (displaying time) WebTime.ASPX defines the GUI When client requests an ASPX file… Class is created behind the scenes that contains both the visual aspect of our page (.aspx) and the logic of our page (.aspx.cs) New class inherits from Page First time Web page is requested, class is compiled, and instance created (put in project’s bin directory) This instance represents the page – creates the HTML sent to the client 26

Creating and Running a Simple Web-Form Example Once the web page has been created Multiple clients can use that instance (w/o recompilation) Project is recompiled only when programmer modifies the application; this is detected by the runtime environment How does it execute? When the Web server creates an instance of our page to serve a client request The Init event occurs first, invoking method OnInit This method calls InitializeComponent Then Load event is generated, which calls Page_Load Page_Load executes processing time will be updated with every page request After this event handler finishes, the page processes any events raised by page’s controls (such as button clicks). When ready for garbage collection, an UnLoad event is generated and method Page_Unload is called 27

Simple Web Form Example #form1 10 { 11 height: 255px; 12 width: 655px; 13 } 14.style1 15 { 16 font-size: large; 17 } Current time on the web server: 28 <span id="timeLabel" style="color:LimeGreen;background 29 color:Black;font-size:XX-Large;">03:10: Defines the body of the documentHidden inputs from the user Look at HTML response when browser requests WebTime.aspx span element to represent the text in the label Using Cascading Style Sheets

Instructions to get IIS and ASP.NET running First Install IIS (need Windows 7 CD) Start IIS by executing inetmgr.exe (?) Expand node representing your computer Right click Default Web Site and select Start Run C:\WINDOWS\Microsoft.NET\Framework\v4.nnnn\aspnet_regiis /i 29

Summary Instructions to Create a Web App project 1.File>New Web Site Type in project name in the Location field 2.Examine the newly created project View aspx file Click on display all files icon and expand the node for ASPX page – View code-behind file 3.Rename the ASPX file and the Class in the code-behind file 4.Design the page Change page title EnableSessionState property set to false Add labels, rename, change BackColor, ForeColor and Font-Size properties 5.Add page logic in code-behind file in Page_Load 30

Instructions to Run the Program Three ways 1.Debug>Start Without Debugging 2.Right-click Web Form designer or ASPX file name in Solution Explorer and select View In Browser 3.Open browser and type in URL 31