Web App Development with ASP.NET

Web Basics In its simplest form, a web page is nothing more than an HTML (HyperText Markup Language) document (with the extension .html or .htm) that describes to a web browser the document’s content and how to format it. HTML documents normally contain hyperlinks that link to different pages or to other parts of the same page. When the user clicks a hyperlink, a web server locates the requested web page and sends it to the user’s web browser.

Web Basics (cont.) Require a server and a client Server sends the Web Pages to the Client. Client displays the Web Pages in Browser.

Web Basics (cont.) HTTP Clients HTTP Servers Web Browsers: Chrome, IE, Firefox Mobile Apps Windows Apps HTTP Servers Microsoft Internet Information Services IIS) Apache

Multitier App Architecture Web-based apps are multitier apps (sometimes referred to as n-tier apps).

Web Basics (cont.) URIs and URLs URIs (Uniform Resource Identifiers) identify resources on the Internet. URIs that start with http:// are called URLs (Uniform Resource Locators). Common URLs refer to files, directories or server-side code that performs tasks such as database lookups, Internet searches and business app processing.

URI Pieces

Introduction In this chapter, we introduce web-app development with Microsoft’s ASP.NET technology. Web-based apps create web content for web-browser clients. Web Form files have the filename extension .aspx and contain the web page’s GUI. You customize Web Forms by adding web controls including labels, textboxes, images, buttons and other GUI components.

Introduction The Web Form file represents the web page that's sent to the client browser. We often refer to Web Form files as ASPX files. An ASPX file created in Visual Studio has a corresponding class written in a .NET language This class contains event handlers, initialization code, utility methods and other supporting code. The file that contains this class is called the code-behind file and provides the ASPX file’s programmatic implementation.

Common ASP.Net Controls Description WebForm Code Label Displays text on the HTML page <asp:Label id=Label1 runat="server">Label</asp:Label> TextBox Gives the user an input area on an HTML form <asp:TextBox id=TextBox1 runat="server"></asp:TextBox> Button A normal button control used to respond to click events on the server <asp:Button id=Button1 runat="server" Text="Button"></asp:Button> Hyperlink A normal hyperlink control that responds to a click event <asp:HyperLink id=HyperLink1 runat="server">HyperLink </asp:HyperLink> Image Very similar to the normal HTML control that displays an image within the page <asp:Image id=Image1 runat="server"></asp:Image> DropDownList A normal dropdown list control like the HTML control, but can be data bound to a data source <asp:DropDownList id=DropDownList1 runat="server"></asp:DropDownList> CheckBoxList Displays a group of check boxes that all work together <asp:CheckBoxList id=CheckBoxList1 runat="server"></asp:CheckBoxList> RadioButtonList Displays a group of radio button controls that all work together <asp:RadioButtonList id=RadioButtonList1 runat="server"></asp:RadioButtonList>

Your First Web App Our first example displays the web server’s time of day in a browser window. When this app executes—that is, a web browser requests the app’s web page—the web server executes the app’s code, which gets the current time and displays it in a Label. The web server then returns the result to the web browser that made the request, and the web browser renders the web page containing the time.

Laying Out Web Forms Factors that will effect the layout of page: Browsers Screen Sizes Screen Resolutions Window Sizes 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. Users must always be aware that users may have different browsers, different screen sizes, and different screen resolutions.

Using Tables for Layout HTML Tables contain rows and columns. Add controls and text to the table cells to align the columns. Table is an HTML control, requiring no server-side programming. If wanting to have more control over placement of elements of the Web page, HTML tables can be used. You can add controls and text to the table cells to align the columns as needed. Add a table to a Web page by selecting the Table tool from the toolbox HTML section, or allow the IDE to give more help.

Entering Controls or Text in a Table Controls can be added to a table cell or type text in a cell during design time. Add a label and give it an ID to be able to refer to the text in a cell at run time. –OR— Type text directly into the cell. There are some menu options that may help in adjusting the table—the Layout menu provides the ability to merge cells as well as selecting the table and inserting columns, rows, or cells.

Validation Controls Validation controls or validators, determine whether the data in another web control is in the proper format. For example, validators can determine whether a user has provided information in a required field or whether a zip-code field contains exactly five digits. Validators provide a mechanism for validating user input on the client and the server. When the page is sent to the client, the validator is converted into JavaScript that performs the validation in the client web browser.

Validation Controls (cont.) JavaScript is a scripting language that enhances the functionality of web pages and is typically executed on the client. Unfortunately, some client browsers might not support scripting or the user might disable it. For this reason, you should always perform validation on the server. ASP.NET validation controls can function on the client, on the server or both.

Validation Controls (cont.) Validating Input in a Web Form The previous Web Form prompts the user to enter a name, e-mail address and phone number. After the user enters any data, but before the data is sent to the web server, validators ensure that the user entered a value in each field and that the e-mail address and phone-number values are in an acceptable format.

Unobtrusive Validation Prior to ASP.NET 4.5, when you used the validation controls presented in this section, ASP.NET would embed substantial amounts of JavaScript code in a web page to perform the work of the validation controls in the client web browser. ASP.NET 4.5 now uses unobtrusive validation, which significantly reduces the amount of JavaScript that gets embedded into the web page—this, in turn, can improve the performance of your website by making pages load faster. This is accomplished with HTML5 data attributes

PostBack Differentiating Between the First Request to a Page and a Postback PostBack is the name given to the process of submitting an ASP.NET page to the server for processing. Enables the program to receive input, process it and display the results. The first time that the web page is requested, IsPostBack is false, when the postback occurs (from the user clicking Submit), IsPostBack is true.

Validation Controls (cont.) Server-Side Web Form Validation Server-side Web Form validation must be implemented programmatically. Use the Page’s Validate method to validate the information in the request. This validates the information as specified by the validation controls in the Web Form. The IsValid property of class Page to check whether the validation succeeded. If this property is set to True (that is, validation succeeded and the Web Form is valid), then we display the Web Form’s information. Otherwise, the web page loads without any changes, except that any validator that failed now displays its ErrorMessage.

Session Tracking Originally, critics accused the Internet and e-business of failing to provide the customized service typically experienced in “brick-and- mortar” stores. To address this problem, businesses established mechanisms by which they could personalize users’ browsing experiences, tailoring content to individual users. Businesses can achieve this level of service by tracking each customer’s movement through the Internet and combining the collected data with information provided by the consumer, including billing information, personal preferences, interests and hobbies.

Session Tracking (cont.) Privacy A trade-off exists between personalized business service and protection of privacy. Some consumers embrace tailored content, but others fear the possible adverse consequences if the info they provide to businesses is released or collected by tracking technologies. Consumers and privacy advocates ask: What if the business to which we give personal data sells or gives that information to other organizations without our knowledge?

Session Tracking (cont.) Recognizing Clients To provide personalized services to consumers, businesses must be able to recognize clients when they request information from a site. As we’ve discussed, the request/response system on which the web operates is facilitated by HTTP. Unfortunately, HTTP is a stateless protocol—it does not provide information that would enable web servers to maintain state information regarding particular clients.

Maintaining State HTTP is a stateless protocol. Once the server serves any request from the user, it cleans up all the resources used to serve that request. These resources include the objects created during that request, the memory allocated during that request, etc.

Maintaining State with ASP.Net Client side state management View state Hidden fields Cookies Query Strings Server side state management Application state Session state

View State ASP.NET uses this mechanism to track the values of the controls on the web page between page request for same page.

Hidden Fields Hidden field are the controls provided by the ASP.NET and they let us store some information in them. <asp:HiddenField runat=“server” id=“hdnField” value=“something”/>

Cookies Cookies are small pieces of information that can be stored in a text file on users' computer. The information can be accessed by the server and can be utilized to store information that is required between page visits and between multiple visits on the same page by the user. Response.Cookies(“number”).Value = “0”

Query Strings Query strings are commonly used to store variables that identify specific pages, such as search terms or page numbers. A query string is information that is appended to the end of a page URL. Request.QueryString(“CID”)

Application State ASP.NET allows us to save values using application state. A global storage mechanism that is accessible from all pages in the Web application. Application state is stored in the Application key/value dictionary. This information will also be available to all the users of the website. In case we need user specific information, then we better use sessionstate. Application.Lock() Application["number"] = 1234 Application.UnLock()

Session State Like Application state, this information is also in a global storage that is accessible from all pages in the Web application. Session state is stored in the Sessionkey/value dictionary. This information will be available to the current user only, i.e., current session only. Session("number“) = 1234