ASP , Web Forms and Web Controls.ppt

1、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

2、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

3、 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 info

4、rmation 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 addressesMicrosoft Internet Information Services (I

5、IS) 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

6、 response, HTTP/1.1 200 OK or HTTP/1.1 404 Not found,System Architecture,Most Web-based applications are multi-tier applications Tiers are logical groupings of functionalityInformation Tier (data tier or bottom tier) Maintains data pertaining to the applications Usually stores data in a relational d

7、atabase 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 applications clients Client Tier applications user interface (Web browser),6,System Architecture,7,Three-tier arc

8、hitecture.,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,

9、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-

10、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 Fo

11、rms designer.,Design mode button,Creating and Running a Simple Web Form Example,16,Design mode of Web Forms designer.,Cursors 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

12、 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

13、 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.,Adding Page Logic,Open WebTi

14、me.aspx.cs Add to Page_Load event handler/display the servers current time in timeLabeltimeLabel.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 loc

15、al file system URL http:/localhost:PortNumber/WebTime/WebTime.aspx DebugStart 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 a

16、nd select View in Browser to load the page Finally, can open web browser and type the web pages URL in the Address field,22,WebTime.aspx,Simple Web Form Example#form1height: 255px;width: 655px;.style1font-size: large;,23,This attribute determines how event handlers are linked to a controls events,Cu

17、rrent time on the Web Server:,24,/ WebTime.aspx.cs / The code-behind file for a page that displays the Web servers 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

18、 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 servers current time in timeLabeltimeLabel.Text = Date

19、Time.Now.ToString(“hh:mm:ss“); ,25,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 func

20、tionality 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

21、 Page First time Web page is requested, class is compiled, and instance created (put in projects 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 ins

22、tance (w/o recompilation) Project is recompiled only when programmer modifies the application; this is detected by the runtime environmentHow 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

23、 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 pages controls (such as button clicks). When ready for garbage collecti

24、on, an UnLoad event is generated and method Page_Unload is called,27,1 Simple Web Form Example#form1height: 255px;width: 655px;.style1font-size: large;Current time on the web server:03:10:03,28,Look at HTML response when browser requests WebTime.aspx,Instructions to get IIS and ASP.NET running,First

25、 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:WINDOWSMicrosoft.NETFrameworkv4.nnnnaspnet_regiis /i,29,Summary Instructions to Create a Web App project,FileNew Web SiteType in project

26、name in the Location field 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 Rename the ASPX file and the Class in the code-behind file Design the page Change page title EnableSessionState property set to false Ad

27、d labels, rename, change BackColor, ForeColor and Font-Size properties Add page logic in code-behind file in Page_Load,30,Instructions to Run the Program,Three ways DebugStart Without Debugging Right-click Web Form designer or ASPX file name in Solution Explorer and select View In Browser Open browser and type in URL http:/localhost/ProjectFolder/PageName.aspx,31,