ASP.NET in Microsoft .NET Framework

Lecture #1 ASP.NET in Microsoft .NET Framework

Introduction ASP stands for Active Server Pages, while .Net simply means it is part of Microsoft’s .Net Framework. Although it was developed by Microsoft, ASP.NET is an open source server-side Web application framework designed for Web development to produce dynamic Web pages. When an ASP.NET application runs, the server maintains information about the current application, such as session, the current HTTP request, the requested page, and so on. Programmers can thus use a combination of ASP.NET tools to build function-rich applications to interact with the users and the client browsers. The Request object, for example, contains a property named Browser that returns an object of type HttpBrowserCapabilities. This object also provides properties such as browser, version, major version, and minor version such that programmers can use to determine the client browser type. The following is a sample ASP.NET code that can display information about the client browser.

<%@ Page Language="VB" %>

The following is the C# version

<%@ Page Language="C#" %>

......

ASP.Net – Penn Wu, PhD. 1 It is necessary to note that the curriculum guide for this class recommends that the instructor use Visual Basic .Net as the primary language to write demo scripts for the rest of this course’s lectures. The instructor, however, will provide C# version of the sample code for those who are familiar with the C# language throughout this course. Students have the options to use either VB .Net or C# to write ASP.NET programs to fulfil all course requirements, including assignments, exams, all learning activities.

“Classic ASP” Prior to the integration with .NET Framework, ASP is Microsoft’s first server-side script script and engine for dynamically generated web pages and was initially released as an add-on to Internet HTML Information Services (IIS) via the Windows NT 4.0 Option Pack in 1996. Throughout this course, the instructor uses the term “class ASP” to describe the syntax to write ASP codes before the integration of ASP and the .NET Framework in January 2002. Microsoft used to define “classic ASP” as a development framework for building web pages and web sites with HTML and CSS (cascading style sheet). A “classic ASP” script usually:  uses HTML tags to define the page layout  uses CSS to set the appearance of the page content  uses server-side ASP code, surrounded by the delimiters <% and %>, to dynamic generate contents.

It is necessary to note that “classic ASP” is a server-side language that must run inside IIS (Internet Information Services) servers. ASP codes will not run in a Windows machine unless IIS server is present. Instructions about how to obtain a free version of IIS, known as IIS Express, are available in a later section and the learning activities. The following is a very simple “class ASP” file whose file name extension is “.asp” (e.g. “test.asp”). It is created using “Notepad” (notepad.exe) which is a very generic text-editor included in all versions of Microsoft Windows since Windows 1.0 in 1985. By the way, the instructor purposely uses VBScript to write the following “classic ASP” script for the sake of demonstration. The code will return the current date and time values. By the way, throughout this course, let the file extension be “.aspx” to comply with the new naming convention of ASP.NET. A later section will discuss the new naming convention.

The server's current time:
<% Response.Write(Now()) %>

Unlike an .exe application, an ASP file is just a text file. An ASP file can contain text, HTML, XML, and ASP scripts; however, only the ASP scripts are executed on the server. In the above example, classic ASP scripts are enclosed by a pair of “<%” and “%>”. The rest of generic HTML codes. When a browser requests an ASP file, IIS passes the request to the ASP engine on the server. The ASP engine reads the file, line by line, and executes the scripts in the file. Finally, the ASP file is returned to the client browser as plain HTML. The following is a sample HTML content the above “classic APS” code will generate for the IIS server to send to the client browser.

The server's current time:
1/3/2015 11:47:04 AM

ASP.Net – Penn Wu, PhD. 2

Server-side scripts can only be read, interpreted, and executed by web servers to produce output; therefore, programmers must upload ASP files to an IIS server before an execution request can be made. The client browser can request ASP script for execution; however, the client browser does not and cannot have access to view the server-side script. It is necessary to note that server scripts are executed on the server, only HTML outputs will be returned to the client browser. During the HTTP-based communication, a client browser can only see and read HTML tags, CSS, and the results of server-side script.

Request execution Upload ASP Of ASP scripts ASP scripts IIS Client Programmers Server Browser Return HTML outputs

The following is a simple “classic” ASP script and its client-side result. ASP server-side script can contain any expressions, statements, procedures, or operators. In this script, the instructor declares a variable named “msg” using the dim keyword. The instructor then assigns a string, "Welcome to ASP!", to the “msg” variable as value. The response.write() method is a generic ASP method that writes output to a client browser. The client browser only receives the output produce by the response.write() method.

Server-side script Client-side result

<% Welcome to ASP! dim msg

msg = "Welcome to ASP!" response.write(msg) %>

HTML is the de facto language for creating web pages. ASP codes are typically embedded in an HTML page, even if the file extension is .apsx or .asp. It is necessary to have a basic understanding of HTML elements. HTML uses angle brackets to indicate how your content should be rendered (or displayed) in the browser. The angle brackets are referred to as tags; a pair of tags holding some text is referred to as an element. The following is a very simple HTML code. The declaration is a statement that declares to the web browser about what version of HTML the page is written in. This course adopts HTML5.

Hello World!

I am learning ASP.NET.

ASP.Net – Penn Wu, PhD. 3 An HTML element must start with a greater than (<) followed by the name of element and ends with less than sign (>). The “” and “” tags make a pair that encloses all the HTML contents. The “” tag is said to be the opening tag and “” is the closing tag. The closing tag always requires a forward slash (/). The “” and “” tags define a section that contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc. The

element, with an opening tag (

) and a closing tag (

), is used to signify a heading at level one. The

tag defines a paragraph. Basically ASP is a development framework for building dynamic web pages and web sites with HTML.

The following is a list HTML elements frequently used throughout this course. The table is provided by Imar Spaanjaars, the author of a good reference book: Beginning ASP.NET 3.5: In C# and VB (ISBN: 978-0-470-18759-3).

Tag Description Example Used to denote the start and end of the entire page. Used to denote a special section <head> of the page that contains data <head> <title>Welcome to my <title> about the page, including its site title. Page body goes Used to denote the start and end of the body of the page. here Used to link one web page to another. AT&T site Used to embed images in a page. Used to format text in a bold, This is bold text while italic, or underline font. this text is in italic

Used for input forms that allow <input type="text" value="Some <select> users of a web site to submit Text" /> <input> information to the server. These tags are used to create a layout with a table. The <table> <table><tr> <td>This is a Cell <table> in Column 1</td> <td>This is a <tr> tag defines the entire table, Cell in Column <td> while the <tr> and <td> are used to define rows and cells, 2</td></tr></table> respectively. These three tags are used to create numbered or bulleted <ul> <li>First item with a lists. The <ul> and the <ol> bullet</li> <li>Second item <ul> with a bullet</li></ul><ol> <ol> define the looks of the list <li>First item with a <li> (either unordered, with a simple bullet, or ordered, with a number</li> <li>Second item number), while the <li> is used with a number</li></ol> to represent items in the list. This tag is used to wrap and influence other parts of the This is some normal text while document. It appears as inline, red;">this text appears in so it adds no additional line red break to the page. Just like the tag, the <div> is used as a container for <div>This is some text on 1 line</div><div>This text is put <div> other elements. However, the directly under the previous <div> acts as a block element, text on a new line. </div> which causes an explicit line ASP.Net – Penn Wu, PhD. 4 break after the <div> tag by default. There is a shorthand way for displaying text in ASP.NET which does not use the response.write() method, instead, it uses the “=” sign. The following two “classic ASP” scripts produce exactly the same output. The IIS server reads and interprets the script, <% response.write("Welcome to ASP!") %>, and produces the output -- Welcome to ASP!. The IIS server also knows that the “=” technically equals to the “response.write()” method. <% response.write() %> <%= %> <!DOCTYPE html> <!DOCTYPE html> <html> <html> <body> <body> <% <%="Hello World!" %> response.write("Hello World!") %> </body> </html> </body> </html> In the above sample code, the instructor also use CSS to define the background color of the elements. Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly braces: p { color:red; text-align:center; } Accessing The .NET Framework is a software framework developed by Microsoft that runs primarily on .NET Microsoft Windows operating systems. It is also described as a programming infrastructure Framework created by Microsoft for building, deploying, and running applications and services that use tools from .NET technologies, such as desktop applications and Web services. class ASP scripts Interestingly, “classic ASP” scripts have the scalability to use certain properties and methods provided by the .NET Framework. This is possibly because ASP codes must be executed and interpreted by IIS server. Since all IIS servers must running in Windows operating systems, ASP codes can use properties and methods provided by the .NET Framework. The Math class is part of the .NET Framework which provides constants and static methods for trigonometric, logarithmic, and other common mathematical functions. The sin() method of the Math class can return the sine of the specified angle. The following script, which must be executed at an IIS server (or an IIS Express server), demonstrates how a classic ASP code uses the sin() method of the Math class. By the way, let the file name be something similar to “test.aspx”. <!Doctype html> <html><body> <%= Math.sin(100) %> </body></html> The output is: -0.506365641109759 The following is another example that demonstrates how to retrieve the value of the PI property. <!Doctype html> <html><body> ASP.Net – Penn Wu, PhD. 5 <%= Math.PI %> </body></html> Interestingly, between “<%=” and “%>” of the following example, there is a very generic .NET Framework statement which use the “Now” property of the “DateTime” struct to retrieve the current date and time values from the <a href="/tags/Operating_system/" rel="tag">operating system</a> that runs IIS Express. <!Doctype html> <html><body> <h1>Hello Web Pages</h1> The time is <%= DateTime.Now %> </body></html> A sample output is: The following is another example that does not declare the language. It uses the ToLongTimeString() method which is another .NET Framework method of the “DateTime” struct to set the format of the output. <!Doctype html> <html><body> <h1>Hello Web Pages</h1> The time is <%= DateTime.Now.ToLongTimeString() %> </body></html> The above classic ASP scripts only use simple and generic tools provided by the .NET Framework; therefore, any IIS server can understand it and execute it. However, most tools provided by .NET Framework are designed to work with Visual C#, Visual Basic .NET, and Visual C++. Without a .NET compliant language, such as C# or Visual Basic, it is difficult to implement most tools provided by the .NET Framework, particularly tools that are created using object-oriented paradigm and those that supports the Common Language Runtime (CLR). The rise of ASP.NET is the latest version of Microsoft’s Active Server Pages technology. Microsoft said ASP.NET they re-designed ASP.NET based on the Common Language Runtime (CLR) to allow programmers to write ASP.NET code using any supported .NET language. Unlike “classic ASP”, ASP.NET is “a unified Web development model that includes the services necessary for you to build enterprise-class Web applications with a minimum of coding…..,” because Microsoft includes ASP.NET to its Microsoft .NET framework to make ASP.NET a powerful tool for creating dynamic and interactive web pages. In other words, ASP.NET is now part of the .NET Framework. When coding ASP.NET applications, programmers have access to classes in the .NET Framework to use all methods, properties, and classes provided by the .NET Framework. Programmers can code Web applications in any language compatible with the common language runtime (CLR), including Microsoft Visual Basic and C#. These languages enable you to develop ASP.NET applications that benefit from the common language runtime, type safety, inheritance, and so on. The following figure illustrates the languages Microsoft uses in the architecture of .NET Framework. Figure. Visual Studio.NET VB C++ C# Jscript JavaScript ASP.Net – Penn Wu, PhD. 6 Common Language Specification ASP.NET Web Servers and <a href="/tags/Windows_Forms/" rel="tag">Windows Forms</a> Web Forms ADO.NET: Data and XML Base Classes Common Language Runtime This is a bottom-to-top architecture, meaning that the lower layers support upper layers. ASP.NET is in a layer below the language layer. Microsoft meant to design the architecture in such a way that ASP.NET can work with any of the .NET compatible language such as VB.NET, C#, Managed C++ or Jscript.NET. “Class ASP” file uses “.asp” for file extensions. An ASP.NET file also has meaningful file extension, “.aspx”, “.ascx”, or “.asmx”. The “.aspx” extension implies that the files contain static (X)HTML markup. The following table illustrates the meaning of file extensions used by ASP.NET. Table: Common ASP.NET File Extensions. Extension Description .aspx ASP.NET page file .ascx ASP.NET User Control file (to be discussed in a later lecture) .asmx Web Service file .aspx.vb Visual Basic .NET code file for an ASP.NET page .aspx.cs C# code file for an ASP.NET page .sln Visual Studio .NET Solution file (not used in this course) Throughout this course, the instructor chooses to use “.aspx” as file extension for all demo scripts. The following is the naming convention where n is the number of lecture note and m is the number of learning activity. labn_m.aspx Structure of an An ASP.NET page is a text file consisting of structural elements. Each structural element can ASP.NET file perform one or more specific tasks. The output of one structural element could be used as input of another. Typically, a dynamic ASP.NET web page might consists of four types of structural elements: page directive, code declaration block(s), code rendering block(s), and HTML block(s) (which may include CSS codes). The HTML block is optional; however, programmers frequently use HTML code to define the page layout and content formats. The following is an example that demonstrates what structural element are and how they work in a generic ASP.NET file. By the way, its code is written in Visual Basic .NET. In VB.NET, the combined “&=” is the concatenation operator which can append string to another string, while the addition sign (&) is used to combine two values to make a new string. A later lecture will discuss how to use the for loop in details. <%@ Page Language="VB" %> Page directive <script runat="server"> Code declaration block Sub Page_Load() Code Render block For i As Integer = 1 To 6 using VB.NET codes label1.Text &= "<h" & i & ">Hi!</h" & i & ">" Next End Sub ASP.Net – Penn Wu, PhD. 7 </script> End of code declaration <!Doctype html> HTML block <html> <body> <asp:Label id="label1" runat="server" /> Code render block </body> </html> The output of the above code looks: The following is the C# version. <%@ Page Language="C#" %> <script runat="server"> void Page_Load() { for (int i=1; i<=6; i++) { label1.Text += "<h" + i + ">Hi!</h" + i + ">"; } } </script> Both “page directive” and “code declaration block” are “declarative,” which means they are used to specify certain characteristics (e.g. cache enabled) and properties (e.g. language) of the ASP.NET page. Both “code rendering block” and “HTML block” and are “descriptive”, which means they are used to describe how the output should be generated and how they should look like. All ASP.NET script start with one page directive, which specifies how the page should be processed. Typically, page directives are placed at the very beginning of an ASP.NET file. Next to “<%”, page directives start with the “@” symbol, followed by attribute/value pairs, and ends with “%>”. The following table lists directives supported by ASP.NET’s Web Forms page framework. Directive Description @ Page Defines page-specific attributes used by the ASP.NET page parser and compiler. Can be included only in .aspx files. @ Control Defines control-specific attributes used by the ASP.NET page parser and compiler. Can be included only in .ascx files (user controls). @ Import Explicitly imports a namespace into a page or user control. @ Implements Declaratively indicates that a page or user control implements a specified .NET Framework interface. ASP.Net – Penn Wu, PhD. 8 @ Register Associates aliases with namespaces and class names, thereby allowing user controls and custom server controls to be rendered when included in a requested page or user control. @ Assembly Declaratively links an assembly to the current page or user control. @ OutputCache Declaratively controls the output caching policies of a page or user control. @ Reference Declaratively links a page or user control to the current page or user control. The following illustrates how to specify the chosen language, where lang must be one of the compliant language such as “VB” or “C#”. ASP.NET treats any directive block (<%@ %>) that does not contain an explicit directive name as an @ Page directive for a page. Other declarations will be discussed in later lectures whenever they are used. If no language is specified in the directive, the default is “VB”, or the default language specified in the application’s Web.config file. <%@ Page Language="lang" %> IIS servers will rigidly abide by language declaration. The following example specifies that the inline ASP.NET code in the page must be written in VB.NET. <%@ Page Language="VB" %> In the following example, the instructor declares the page language to be “VB”, yet the instructor also purposely uses C# to write a for loop to confuse the interpreter. By the way, the following ASP.NET file contains both “page directive” and “code rendering block”, yet it does not have “code declaration block”. In C#, the combined “+=” is the concatenation operator which can append string to another string, while the addition sign (+) is used to combine two values to make a new string. <% @Page language="VB"%> <script runat="server" language="C#"> void Page_Load() { for (int i=1; i<6; i++) { label1.Text += "<h" + i + ">Hi</h" + i + ">"; } } </script> <!Doctype html> <html><body> <asp:Label id="label1" runat="server" /> </body></html> The server simply returns the following error message, which evidentially shows that the server is using “VB” syntax to investigate the code due to the page declaration. Parser Error Message: Cannot use 'C#' because another language has been specified earlier in this page (or was implied from a CodeFile attribute). The following is the correct C# version. The page declaration specifies that the ASP.NET script should be executed using C# language. <% @Page language="C#"%> ASP.Net – Penn Wu, PhD. 9 <script runat="server"> void Page_Load() { for (int i=1; i<6; i++) { label1.Text += "<h" + i + ">Hi</h" + i + ">"; } } </script> <!Doctype html> <html><body> <asp:Label id="label1" runat="server" /> </body></html> The following demonstrates how to use the Import directive to the System.Globalization namespace and then use the CultureInfo class to specify a specific culture. In the CreateSpecificCulture() method, the instructor uses "he-IL" to specify a CultureInfo that means “Hebrew”. <%@ Page Language="VB" %> <%@ Import Namespace="System.Globalization" %> <script runat="server"> Sub Page_Load() Dim culture As CultureInfo = CultureInfo.CreateSpecificCulture("he-IL") End Sub </script> A Code Declaration Block defines a section of server code that are embedded in ASP.NET application files within <script> blocks marked with a runat="server" attribute. The following illustrates its general syntax. <script runat="server" language="lang" Src="path"> Code...... </script>  lang: Specifies the language used in this code declaration block. If no language is specified, this value defaults to that specified in the @ Page. However, the language must comply with the one specified in the page directive.  Src: Specifies the path and file name of an external script file to load. When this attribute is used, any other code in the declaration block is ignored. For example: <script runat="server" src="test.cs" />. The following is an example demonstrates how to load a long VB.NET code from an individual file named “areacode.vb”. <%@ Page Language="VB" %> <script runat="server"> Sub button1_Click(sender As Object, e As EventArgs) label1.Text = findAreaCode(textBox1.Text) End Sub </script> <script runat="server" Src="areacode.vb"></script> <!Doctype html> <html> ASP.Net – Penn Wu, PhD. 10 <body> <form id="form1" runat="server"> <asp:TextBox id="textBox1" runat="server" /> <asp:Button id="button1" runat="server" Text="Check" OnClick="button1_Click" /> </form> <asp:Label id="label1" runat="server" /> </body> </html> The following is the C# version. <%@ Page Language="C#" %> <script runat="server"> void button1_Click(Object sender, EventArgs e) { label1.Text = findAreaCode(textBox1.Text); } </script> <script runat="server" Src="areacode.cs"></script> <!Doctype html> <html> <body> <form id="form1" runat="server"> <asp:TextBox id="textBox1" runat="server" /> <asp:Button id="button1" runat="server" Text="Check" OnClick="button1_Click" /> </form> <asp:Label id="label1" runat="server" /> </body> </html> The following is a sample code that only contains a “code declaration block” in its ASP.NET part of code. The instructor purposely omits the page declaration. Since the page directive is not in use, the instructor places “language declaration” inside the <script> tag. By the way, the following code produces the same results as the above one. <script runat="server" language="VB"> Sub Page_Load() For i As Integer = 1 To 6 label1.Text &= "<h" & i & ">Hi!</h" & i & ">" Next End Sub </script> <!Doctype html> <html><body> <asp:Label id="label1" runat="server" /> </body></html> The above code also demonstrates what “on demand” means. The for loop is placed within a subroutine named “Page_Load” which is defined by “Sub” and “End Sub”. According to the “event model” of .NET Framework, the Load event is raised when an ASP.NET page is launched. In the above code, the instructor creates the Page_Load() method as event handler of ASP.Net – Penn Wu, PhD. 11 the Load event. In other words, the Page_Load() subroutine is tied to the Load event. Since the Load event is raised when the ASP.NET file is launched, IIS server will automatically call the Page_Load() subroutine every time when the ASP.NET page is loaded. In the above example, the for loop defined in the “Page_Load” subroutine repeatedly inserts a string “Hi!” to ASP.NET’s <asp:Label> control which has an ID “label1”. ASP.NET controls are ASP.NET tools provided by the .NET Framework to be used on ASP.NET Web pages. They are called for execution on a "on-demand" basis, such as when the page is loaded or a button is clicked, to render HTML markup to be sent to a client browser. Many Web server controls resemble familiar HTML elements, such as buttons and text boxes. Other controls encompass complex behavior, such as a calendar controls, and controls that manage data connections. Later lectures will discuss ASP.NET controls in details. The following is the C# version of the above code. Yet, the instructor purposely demonstrates the use of “Response.Write” method (which is a method of “classic ASP”) in an ASP.NET file to show the “downward compatibility” of ASP.NET. The protected access modifier specifies that one or more declared programming elements are accessible only from within their own class or from a derived class. By the way, the private access modifier to specify that one or more declared programming elements are accessible only from within their declaration context, including from within any contained types. If the access modifier is omitted, it is default to public. The public access modifier can specify that one or more declared programming elements have no access restrictions. <!Doctype html> <html> <body> <script runat="server" language="C#"> protected void Page_Load() { for (int i=1; i<6; i++) { Response.Write("<h" + i + ">Hi</h" + i + ">"); } } </script> </body> </html> In the following example (written in Visual Basic .NET), the If..Then statement is a decisive structure that makes decisions. It will take a language-specific interpreter to understand the language-specific structure because every language has its own syntax and statement pattern. Since the following If..Then statement was written in Visual Basic structure, it is necessary to specify the language by place a language declaration: <%@ Page Language="VB" %>. <%@ Page Language="VB" %> <!Doctype html> <html><body> <h1>Hello Web Pages</h1> It is <% If DateTime.Now.Hour > 12 Then Response.Write("afternoon") End If %>. </body></html> ASP.Net – Penn Wu, PhD. 12 The following is the C# version of the above code. The language declaration statement is: <%@ Page Language="C#" %>. <%@ Page Language="C#" %> <!Doctype html> <html><body> <h1>Hello Web Pages</h1> It is <% if (DateTime.Now.Hour > 12) { Response.Write("afternoon"); } %>. </body></html> Apparently how ASP.NET is interpreted and executed completely depends on how the <a href="/tags/Programmer/" rel="tag">programmer</a> declares the language, not how the server that hosts the code was configured. In this class, you will soon find out most of the ASP.NET file are a combination of ASP.NET code and Visual Basic .NET code. ASP.NET Page Unlike class ASP, when an ASP.NET page runs, the page goes through a life cycle in which it Life Cycle performs a series of processing steps. These include initialization, instantiating controls, Overview restoring and maintaining state, running event handler code, and rendering. In general terms, the page goes through the stages outlined in the following table. Stage Description Start In the start stage, the page determines whether the request is a “postback” or a new request. Initialization During page initialization, controls on the page are activated to accept and process data. However, if the current request is a postback, the postback data has not yet been loaded and control property values have not been restored to the values from view state. Load During load, if the current request is a postback, control properties are loaded with information recovered from view state and control state. Postback event If the request is a postback, control event handlers are called. After handling that, the Validate method of all validator controls is called, which sets the IsValid property of individual validator controls and of the page. Rendering During the rendering stage, the page calls the Render method for each control, providing a text writer that writes its output to the OutputStream object of the page's Response property. Unload The Unload event is raised after the page has been fully rendered, sent to the client, and is ready to be discarded. Unlike class ASP, ASP.NET pages requires “automatic event wire-up”, meaning that ASP.NET looks for methods with particular names and automatically runs those methods when certain events are raised. If the AutoEventWireup attribute of the @ Page directive is set to true, page events are automatically bound to methods that use the naming convention of Page_event, such as Page_Load() and Page_Init(). In the following example, when a page loads ASP.NET will automatically call the subroutine Page_Load() to display the current local date/time values. ASP.Net – Penn Wu, PhD. 13 <% @Page language="VB"%> <script runat="server"> Sub Page_Load() label1.Text = "Local time is " & DateTime.Now End Sub </script> <!Doctype html> <html><body> <asp:Label id="label1" runat="server" /> </body></html> The following is the C# version. <% @Page language="C#"%> <script runat="server"> void Page_Load() { label1.Text = "Local time is " + DateTime.Now; } </script> The Page_Load() method is the basic “automatic event wire-up.” When the Load event is raised, the Page object calls the Page_Load() method on the Page automatically, and then recursively does the same for each child control until the page and all controls are loaded. The term “postback” refers to an HTTP value that is given by a client browser to the same page as a response to a control. In the following script, the user is asked to select from one of the time zones (local or UTC). The selected value is the “postback” that would be passed to the server in order to decide which set of date/time values to display. ASP.NET uses the Page.IsPostBack property for the programmers to get a value that indicates whether the page is being rendered for the first time or is being loaded in response to a postback. The following is a sample code that uses the Page_Load() method to display the local date/time values. It will also display a button asking if the user prefers using the UTC time zone. By clicking the button, the user send a postback request to the same page, the value of IsPostBack is thus set to False. By the way, a later lecture will discuss how to create HTML server controls in details. <% @Page language="VB"%> <script runat="server"> Sub Page_Load() If Not IsPostBack Then label1.Text = "Local time is " & DateTime.Now ShowFrom() Else label1.Text = "UTC time is " & DateTime.UtcNow End If End Sub Sub ShowFrom() Dim form1 As New HtmlForm() form1.ID = "Form1" form1.Method = "post" Dim button1 As New Button() button1.Text = "Use UTM Time Zone" form1.Controls.Add(button1) Controls.Add(form1) ASP.Net – Penn Wu, PhD. 14 ENd Sub </script> <!Doctype html> <html><body> <asp:PlaceHolder id="placeHolder1" runat="server" /> <asp:Label id="label1" runat="server" /> </body></html> The following is the C# version. <% @Page language="C#"%> <script runat="server"> void Page_Load() { if (!IsPostBack) { label1.Text = "Local time is " + DateTime.Now; ShowFrom(); } else { label1.Text = "UTC time is " + DateTime.UtcNow; } } void ShowFrom() { HtmlForm form1 = new HtmlForm(); form1.ID = "Form1"; form1.Method = "post"; Button button1 = new Button(); button1.Text = "Use UTM Time Zone"; form1.Controls.Add(button1); Controls.Add(form1); } </script> <!Doctype html> <html><body> <asp:PlaceHolder id="placeHolder1" runat="server" /> <asp:Label id="label1" runat="server" /> </body></html> Installing IIS All the demo scripts as well as codes of learning activities provided throughout this course Express require Microsoft’s IIS (Internet Information Server) server. However, not every student has the luxury to run IIS on her/his Windows operating systems. One alternative is to use the IIS Express which is a lightweight, self-contained version of IIS optimized for developers. IIS Express makes it easy to use the most current version of IIS to develop and test IIS-based websites. Although the word “Express” implies that it is “not a full version” of IIS server, IIS Express provides every needed feature to learning ASP.net programming. According to Microsoft, IIS Express has all the core capabilities of IIS sever with the following features designed to facilitate the learning of ASP.NET website development:  It does not run as a service or require administrator user rights to perform most tasks.  Multiple users of IIS Express can work independently on the same computer. ASP.Net – Penn Wu, PhD. 15 As of January 2016, the latest version of IIS Express is 10.0. Students of this course can install IIS 10.0 Express through the Microsoft Download Center. The URL is: https://www.microsoft.com/en-us/download/details.aspx?id=48264. Depending on the version of Windows operating systems, there are two versions of IIS Express .msi file, as distinguished below. OS File Name 32-bit iisexpress_x86_en-US.msi 64-bit iisexpress_x64_en-US.msi Upon completing the installation, students can immediately launch the IIS Express from a Windows Command Prompt (cmd.exe). They do not need Administrator user rights to develop, test, and debug ASP.NET script with IIS Express. The default host name is http://localhost which uses the local loopback IP address: http://127.0.0.1. The default port is 8080. However, they must have Administrator user rights if you want to run IIS Express on ports numbered 1024 or less. In an opened Command Prompt of a 32-bit OS with a sample prompt of “C:\Users\D99324192”, programmer can type cd \Program Files\IIS Express and then press [Enter] to navigate to the IIS Express directory. C:\Users\D99324192>cd \Program Files\IIS Express In a 64-bit OS, the command is cd \Program Files (x86)\IIS Express instead, as shown below. C:\Users\D99324192>cd \Program Files (x86)\IIS Express In the “IIS Express” directory, type iisexpress and press [Enter] to launch the IIS Express, as shown below: C:\Program Files\IIS Express>iisexpress The following message appears if the server is up and running. The IIS Express server will create a default website named “WebSite1”. The following message also indicates the default port number (e.g. 8080) the server is designate to use for HTTP connection. Starting IIS Express ... Successfully registered URL "http://localhost:8080/" for site "WebSite1" application "/" Registration completed for site "WebSite1" IIS Express is running. Enter 'Q' to stop IIS Express Advanced Throughout this entire course, the above is what students need to install and configure in order Configuration to launch and operate the IIS Express server. The following is a few “advanced” skills about usage of the “iisexpress” command. Type iisexpress /? and press [Enter] to view the IIS Express usage string. The output looks: IIS Express Usage: ------iisexpress [/config:config-file] [/site:site-name] [/siteid:site-id] [/systray:boolean] iisexpress /path:app-path [/port:port-number] [/clr:clr-version] [/systray:boolean] ASP.Net – Penn Wu, PhD. 16 /config:config-file The full path to the applicationhost.config file. The default value is the IISExpress8\config\applicationhost.config file that is located in the user's Documents folder. /site:site-name The name of the site to launch, as described in the applicationhost.config file...... iisexpress /path:c:\myapp\ /port:80 This command runs the site from c:\myapp folder over port 80. IIS Express and IIS use the ApplicationHost.config file, which specifies global settings for sites, application pools, handlers, etc. IIS Express uses a default, user-specific ApplicationHost.config file to allow many users to share the same computer without interfering with other user’s settings. This file is located in the %username%\Documents\IISExpress\config folder (where “%username%” is the programmer’s actual user name such as “D99324192”) or %username%\My Documents\IISExpress\config folder, depending on the generation of Microsoft’s Windows OS. Those who wish to run ASP.NET scripts from a specific website such as “Website2” by default can modify the following statement in the ApplicationHost.config configuration file. iisexpress /site:WebSite2 Review 1. Which is the classic ASP code that can return the current date and time values? Questions A. <% Response.Display(Now()) %> B. <% Response.Write(Now()) %> C. <% Response.Show(Now()) %> D. <% Response.Return(Now()) %> 2. Which can produce exactly the same result as the following code segment? <%="Hello World!" %> A. <% Response.Display("Hello World!") %> B. <% Response.Write("Hello World!") %> C. <% Response.Show("Hello World!") %> D. <% Response.Return("Hello World!") %> 3. Which is the correct file extension for either Visual Basic.NET code or Visual C# code to be incorporated in an ASP.NET Web page? A. .aspx B. ascx C. .ascx.vb D. .asvb.cs 4. Which is an example of the page directive used in ASP.NET? A. <@?ASP Page Language="VB" /> B. <?ASP Page Language="VB" > C. <%@ Page Language="VB" %> D. <%@ Page Language="VB" /> ASP.Net – Penn Wu, PhD. 17 5. Given the following code segment, which part specifies that the code must be executed by server? <script runat="server" language="VB"> ASP.NET code...... </script> A. <script> B. runat="server" C. language="VB" D. All of the above 6. Given the following code segment, which part is optional if you have declared it in the page directive section? <script runat="server" language="VB"> ASP.NET code...... </script> A. <script> B. runat="server" C. language="VB" D. All of the above 7. Which is the class ASP ode to display "Hello world!"? A. <% MessageBox.Show("Hello World") %> B. <% Document.Write("Hello World") %> C. <% Response.Show("Hello World") %> D. <%="Hello World" %> 8. Which of the following specifies that one or more declared programming elements are accessible only from within their own class or from a derived class? C# version of answers are enclosed by []. A. protected sub Page_load() [protected void Page_Load() { }] B. private sub Page_load() [private void Page_Load() { }] C. public sub Page_load() [public void Page_Load() { }] D. partial sub Page_load() [partial void Page_Load() { }] 9. Given the following code, which is the identifier of the <asp:Label> control? <asp:Label id="label1" Text="msg" Value="Show" runat="server" /> A. Label B. label1 C. msg D. Show 10. Which can declare a subroutine that is automatically tied to the Load event such that the subroutine will be launched automatically? C# version of answers are enclosed by []. A. Sub Page_Load()...End Sub [void Page_Load() { }] B. Sub Page_Start()...End Sub [void Page_Start() { }] C. Sub Page_Begin()...End Sub [void Page_Begin() { }] D. Sub Page_Launch()...End Sub [void Page_Launch() { }] ASP.Net – Penn Wu, PhD. 18 Lab #1 ASP.NET in Microsoft .NET Framework Preparation #1: Installing IIS 10.0 Express 1. To find out if your computer is running a 32-bit or 64-bit version of Windows in Windows 7/Vista, open System by clicking the Start button , right-clicking Computer, and then clicking Properties. Under System, you can view the system type. Record your OS type: ______. 2. Use a web browser to go to https://www.microsoft.com/en-us/download/details.aspx?id=48264 to download the Internet Information Services (IIS) 10.0 Express. There are two different versions: 32 bit and 64 bit. Be sure to scroll up and down to find the correct version of file and then download it. OS Sample file name 32-bit iisexpress_x86_en-US.msi 64-bit iisexpress_x64_en-US.msi 3. Launch the installation. You need to accept the license agreement, and then click Install. 4. Wait till the installation completes. Click Finish. ASP.Net – Penn Wu, PhD. 19 5. To launch IIS 10.0 Express, go to the “X:\Program Files\IIS Express” directory (X is the drive name and is typically “C”) using Windows Explorer. Find the “iisexpress.exe” file and double click it. Note: You can consider creating a shortcut on the Windows desktop for “iisexpress.exe” because you will need to launch it every time before you can test ASP.NET scripts. 6. A Command Prompt window will pop up with the following message. Do not close this window. You need to keep it running. Be sure to write the URL and its port number (e.g. http://localhost:808). Starting IIS Express ... Successfully registered URL "http://localhost:8080/" for site "WebSite1" application "/" Registration completed for site "WebSite1" IIS Express is running. Enter 'Q' to stop IIS Express 7. Use a web browser to go to http://localhost:8080/ (use the correct one if your is different from example), and you should now see the following. 8. Use Windows Explorer to go to the “X:\Users\%USERNAME%\My Documents\My Web Sites\WebSite1” directory (which will be the default directory for testing all ASP.NET scripts in this semester), use Notepad to create a new text file named “lab0.aspx“ with only one of the following versions of code: Visual <a href="/tags/BASIC/" rel="tag">Basics</a> and C#. <%@ Page Language="VB" %> <script runat="server"> Sub Page_Load() label1.Text = "Welcome to ASP.NET!! " & DateTime.Now End Sub </script> <!DOCTYPE html> <html><body> <asp:Label id="label1" runat="server" /> </body></html> Or ASP.Net – Penn Wu, PhD. 20 <%@ Page Language="C#" %> <script runat="server"> void Page_Load() { label1.Text = "Welcome to ASP.NET!! " + DateTime.Now; } </script> <!DOCTYPE html> <html><body> <asp:Label id="label1" runat="server" /> </body></html> 9. Double check to make sure the lab0.apsx file is saved to the “WebSite1” directory. The file path must be: “X:\Users\%USERNAME%\My Documents\My Web Sites\WebSite1\lab0.aspx” 10. Use a web browser to go to http://localhost:8080/lab0.aspx. If you see something similar to the following, you are ready to cruise through this course. Learning Activity #1: Testing a simple ASP.NET script locally (with IIS installed) (Note: Be sure to complete Preparation #1 before you move on to the next step.) 1. Use Notepad to create a new file X:\Users\%USERNAME%\My Documents\My Web Sites\WebSite1\lab1_1.aspx with only one of the following versions of code: Visual Basics and C#. <%@ Page Language="VB" %> <script runat="server"> Sub Page_Load() Dim str As String = "" str & = "User Agent: " & Request.UserAgent & " " str & = "Browser: " & Request.Browser.Browser & " " str & = "Version: " & Request.Browser.Version & " " str & = "Major: " & Request.Browser.MajorVersion & " " str & = "Minor: " & Request.Browser.MinorVersion & " " label1.Text = str End Sub </script> <!DOCTYPE html> <html> ASP.Net – Penn Wu, PhD. 21 <body> <asp:Label id="label1" runat="server" /> </body> </html> Or <%@ Page Language="C#" %> <script runat="server"> void Page_Load() { String str = ""; str += "User Agent: " + Request.UserAgent + " "; str += "Browser: " + Request.Browser.Browser + " "; str += "Version: " + Request.Browser.Version + " "; str += "Major: " + Request.Browser.MajorVersion + " "; str += "Minor: " + Request.Browser.MinorVersion + " "; label1.Text = str; } </script> <!DOCTYPE html> <html> <body> <asp:Label id="label1" runat="server" /> </body> </html> 2. Use a web browser to access http://localhost:8080/lab1_1.aspx, you should now see: 3. Download the “assignment template”, and rename it to lab1.doc if necessary. Capture a screen shot similar to the above and paste it to a Microsoft Word document named “lab1.doc” (or .docx). Learning Activity #2: 1. Use Notepad to create a new file X:\Users\%USERNAME%\My Documents\My Web Sites\WebSite1\lab1_2.aspx with only one of the following versions of code: Visual Basics and C#. <%@ Page Language="VB" %> <script runat="server"> Sub Page_Load() label1.Text = "Local time is " & DateTime.Now label2.Text = "UTC time is " & DateTime.UtcNow End Sub </script> <!DOCTYPE html> <html> <body> ASP.Net – Penn Wu, PhD. 22 <asp:Label id="label1" runat="server" Font-Size=14 /> <asp:Label id="label2" runat="server" Font-Size=14 ForeColor="Red"> </asp:Label> </body> </html> Or <%@ Page Language="C#" %> <script runat="server"> void Page_Load() { label1.Text = "Local time is " + DateTime.Now; label2.Text = "UTC time is " + DateTime.UtcNow; } </script> <!DOCTYPE html> <html> <body> <asp:Label id="label1" runat="server" Font-Size=14 /> <asp:Label id="label2" runat="server" Font-Size=14 ForeColor="Red"> </asp:Label> </body> </html> 2. Use a web browser to access http://localhost:8080/lab1_2.aspx, you should now see: 3. Capture a screen shot similar to the above and paste it to a Microsoft Word document named “lab1.doc” (or .docx). Learning Activity #3: 1. Use Notepad to create a new file X:\Users\%USERNAME%\My Documents\My Web Sites\WebSite1\lab1_3.aspx with only one of the following versions of code: Visual Basics and C#. <%@ Page Language="VB" %> <script runat="server"> Sub Page_Load() Dim str1 As String = "" Dim str2 As String = "" For i As Integer = 1 To 6 str1 &= "<h" & i & ">Hi!</h" & i & ">" str2 &= "<h" & (7-i) & ">ASP.NET!</h" & (7-i) & ">" Next ASP.Net – Penn Wu, PhD. 23 label1.Text = str1 label2.Text = str2 End Sub </script> <!Doctype html> <html> <body> <table><tr> <td> <asp:Label id="label1" runat="server" /> </td> <td> <asp:Label id="label2" runat="server" /> </td> </tr></table> </body> </html> Or <%@ Page Language="C#" %> <script runat="server"> void Page_Load() { String str1 = ""; String str2 = ""; for (int i=1; i<=6; i++) { str1 += "<h" + i + ">Hi!</h" + i + ">"; str2 += "<h" + (7-i) + ">ASP.NET!</h" + (7-i) + ">"; } label1.Text = str1; label2.Text = str2; } </script> <!Doctype html> <html> <body> <table><tr> <td> <asp:Label id="label1" runat="server" /> </td> <td> <asp:Label id="label2" runat="server" /> </td> </tr></table> </body> </html> 2. Use a web browser to access http://localhost:8080/lab1_3.aspx, you should now see: ASP.Net – Penn Wu, PhD. 24 3. Capture a screen shot similar to the above and paste it to a Microsoft Word document named “lab1.doc” (or .docx). Learning Activity #4: 1. Download the areacode.zip and extract both areacode.vb and areacode.cs files to the “X:\Users\%USERNAME%\My Documents\My Web Sites\WebSite1” directory. 2. Use Notepad to create a new file X:\Users\%USERNAME%\My Documents\My Web Sites\WebSite1\lab1_4.aspx with only one of the following versions of code: Visual Basics and C#. <%@ Page Language="VB" %> <script runat="server"> Sub button1_Click(sender As Object, e As EventArgs) label1.Text = findAreaCode(textBox1.Text) End Sub </script> <script runat="server" Src="areacode.vb"></script> <!Doctype html> <html> <body> <form id="form1" runat="server"> <asp:TextBox id="textBox1" runat="server" /> <asp:Button id="button1" runat="server" Text="Check" OnClick="button1_Click" /> </form> <asp:Label id="label1" runat="server" /> </body> </html> Or <%@ Page Language="C#" %> <script runat="server"> void button1_Click(Object sender, EventArgs e) { label1.Text = findAreaCode(textBox1.Text); } </script> <script runat="server" Src="areacode.cs"></script> <!Doctype html> <html> <body> <form id="form1" runat="server"> <asp:TextBox id="textBox1" runat="server" /> <asp:Button id="button1" runat="server" Text="Check" OnClick="button1_Click" /> </form> ASP.Net – Penn Wu, PhD. 25 <asp:Label id="label1" runat="server" /> </body> </html> 3. Use a web browser to access http://localhost:8080/lab1_4.aspx, you should now see: 4. Capture a screen shot similar to the above and paste it to a Microsoft Word document named “lab1.doc” (or .docx). Learning Activity #5: 1. Use Notepad to create a new file X:\Users\%USERNAME%\My Documents\My Web Sites\WebSite1\lab1_5.aspx with only one of the following versions of code: Visual Basics and C#. <% @Page language="VB"%> <script runat="server"> Sub Page_Load() If Not IsPostBack Then label1.Text = "Local time is " & DateTime.Now ShowFrom() Else label1.Text = "UTC time is " & DateTime.UtcNow End If End Sub Sub ShowFrom() Dim form1 As New HtmlForm() form1.ID = "Form1" form1.Method = "post" Dim button1 As New Button() button1.Text = "Use UTM Time Zone" form1.Controls.Add(button1) Controls.Add(form1) ENd Sub </script> <!Doctype html> <html><body> <asp:PlaceHolder id="placeHolder1" runat="server" /> <asp:Label id="label1" runat="server" /> </body></html> Or <% @Page language="C#"%> <script runat="server"> void Page_Load() { if (! IsPostBack) { label1.Text = "Local time is " + DateTime.Now; ASP.Net – Penn Wu, PhD. 26 ShowFrom(); } else { label1.Text = "UTC time is " + DateTime.UtcNow; } } void ShowFrom() { HtmlForm form1 = new HtmlForm(); form1.ID = "Form1"; form1.Method = "post"; Button button1 = new Button(); button1.Text = "Use UTM Time Zone"; form1.Controls.Add(button1); Controls.Add(form1); } </script> <!Doctype html> <html><body> <asp:PlaceHolder id="placeHolder1" runat="server" /> <asp:Label id="label1" runat="server" /> </body></html> 2. Use a web browser to access http://localhost:8080/lab1_5.aspx, you should now see: and 3. Capture a screen shot similar to the above and paste it to a Microsoft Word document named “lab1.doc” (or .docx). Submittal 1. Complete all the 5 learning activities in this lab. 2. Create a .zip file named lab1.zip containing ONLY the following self-executable files.  Lab1_1.aspx  Lab1_2.aspx  Lab1_3.aspx  Lab1_4.aspx  Lab1_5.aspx  Lab1.doc (or .docx) 3. Upload the zipped file as response to question 11 of the Assignment (available at Blackboard). Programming Exercise #01 1. Use Notepad to create a new text file named “ex01.aspx” with the following lines as heading. <%--Heading Student: YourFullName 'File name: ex01.aspx --%> ASP.Net – Penn Wu, PhD. 27 2. Next to the above heading, write ASP.NET code that will use as Labe control to display a string “Welcome come to YourFullName’s ASP.NET site.”, as shown below. Figure Ex01 3. Download the “programming exercise template”, and rename it to ex01.doc. Capture a screen similar to “Figure Ex01” and paste it to a Microsoft Word document named “ex01.doc” (or “ex01.docx”). 4. Compress both ex01.aspx and ex01.doc(x) to a .zip file named “ex01.zip”. 5. Upload the zipped file as response to question 12 of the Assignment. Important Note: Your code must be fully functional to earn the credit. No partial credit is given. You will be given zero points if either .aspx or .docx is not submitted. ASP.Net – Penn Wu, PhD. 28 </div> </article> </div> </div> </div> <script type="text/javascript" async crossorigin="anonymous" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8519364510543070"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script> var docId = 'a47a3f2932d1e2f186a82fd32f15af92'; var endPage = 1; var totalPage = 28; var pfLoading = false; window.addEventListener('scroll', function () { if (pfLoading) return; var $now = $('.article-imgview .pf').eq(endPage - 1); if (document.documentElement.scrollTop + $(window).height() > $now.offset().top) { pfLoading = true; endPage++; if (endPage > totalPage) return; var imgEle = new Image(); var imgsrc = "//data.docslib.org/img/a47a3f2932d1e2f186a82fd32f15af92-" + endPage + (endPage > 3 ? ".jpg" : ".webp"); imgEle.src = imgsrc; var $imgLoad = $('<div class="pf" id="pf' + endPage + '"><img src="/loading.gif"></div>'); $('.article-imgview').append($imgLoad); imgEle.addEventListener('load', function () { $imgLoad.find('img').attr('src', imgsrc); pfLoading = false }); if (endPage < 7) { adcall('pf' + endPage); } } }, { passive: true }); </script> <script> var sc_project = 11552861; var sc_invisible = 1; var sc_security = "b956b151"; </script> <script src="https://www.statcounter.com/counter/counter.js" async></script> </html>