Developing Web Applications Using ASP.

NET
Objectives

In this session, you will learn to:

Identify the ASP.NET AJAX server controls Identify the ASP.NET AJAX client life-cycle events Consume Web services in AJAX-enabled applications Implement internationalization

Ver. 1.0

Slide 1 of 41

Developing Web Applications Using ASP.NET

Identifying the ASP.NET AJAX Server Controls

ASP.NET offers various AJAX server controls that implement AJAX functionality in a Web application. Some of the controls offered by ASP.NET are:
ScriptManager control ScriptManagerProxy control UpdatePanel control UpdateProgress control Timer control

Ver. 1.0

Slide 2 of 41

Developing Web Applications Using ASP.NET

The ScriptManager Control

The ScriptManager control can be used to manage the client script for AJAX-enabled Web applications. The ScriptManager control provides:
The custom scripts The JavaScript classes The JavaScript proxy classes

The ScriptManager control can be added to a Web page by using the following code snippet:
<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>

Ver. 1.0

Slide 3 of 41

Developing Web Applications Using ASP.NET

The ScriptManager Control (Contd.)

The following table describes some properties of the ScriptManager control.

Property AsyncPostBackErrorMessage Description Sends error message to the client when an unhandled server exception occurs during an asynchronous postback. Gets or sets a value that indicates the period of time, in seconds, before asynchronous postbacks are timed out. Gets or sets a value that indicates whether static page methods on an ASP. page can be called from a client script. The default value is false. It is true if the static page methods on an ASP. page can be accessed from the client script as Web methods. Gets or sets a value that enables partial rendering of a page, which in turn enables you to update regions of the page individually by using the UpdatePanel server controls.

AsyncPostBackTimeout

EnablePageMethods

EnablePartialRendering

Ver. 1.0

Slide 4 of 41

Developing Web Applications Using ASP.NET

The ScriptManagerProxy Control

The ScriptManager control has certain limitation, that is, you can add only one instance of the ScriptManager control to a Web page. A Web page can include the control either directly or indirectly inside a nested component such as a user control or a content page for a master page. This means that if a master page has a ScriptManager control, then you cannot add a ScriptManager control to the content page, which is using the master page. This limitation can be overcome by using the ScriptManagerProxy Control. The ScriptManagerProxy control enables you to add scripts and services that are specific to nested components.

Ver. 1.0

Slide 5 of 41

Developing Web Applications Using ASP.NET

The ScriptManagerProxy Control (Contd.)

The following table describes some properties of the ScriptManagerProxy control.

Property Scripts Description Gets a ScriptReferenceCollection object that contains a ScriptReference object for each script file that is explicitly registered with the ScriptManagerProxy control.

Services

Gets a ScriptReferenceCollection object that contains a ScriptReference object for each service that is explicitly registered with the ScriptManagerProxy control.

Ver. 1.0

Slide 6 of 41

Developing Web Applications Using ASP.NET

The UpdatePanel Control

The UpdatePanel server control is a container control that helps you create highly interactive and responsive Web applications. The UpdatePanel control is used with the ScriptManager control to enable partial-page rendering. The UpdatePanel control can contain other Web server controls such as, Label and TextBox controls. You can add an UpdatePanel controls to a Web page by using the following code snippet:
<asp:UpdatePanel ID="UpdatePanel1" runat="server"> </asp:UpdatePanel>

Ver. 1.0

Slide 7 of 41

Developing Web Applications Using ASP.NET

The UpdatePanel Control (Contd.)

The following table describes some properties of the UpdatePanel control.

Property ChildrenAsTriggers Description Gets or sets a value that indicates whether postbacks from immediate child controls of an UpdatePanel control update the panel's content. The default value is false. Gets a collection of all the triggers that are applied on the UpdatePanel control such as AsyncPostBackTrigger and PostBackTrigger objects. Gets or sets a value that indicates when an UpdatePanel control's content is updated. Gets or sets a value that indicates whether an UpdatePanel control's content is enclosed in an HTML <div> or <span> element.

Triggers

UpdateMode RenderMode

Ver. 1.0

Slide 8 of 41

Developing Web Applications Using ASP.NET

The UpdateProgress Control

The UpdateProgress control is used to provide information on the status of the partial-page updates in the UpdatePanel controls. If the partial-page update is slow, you can use the UpdateProgress control to provide a message about the status of the update. The UpdateProgress control can be customized. You can modify the default content and the layout of the UpdateProgress control. The UpdateProgress control can be added to a Web page by using the following code snippet:
<asp:UpdateProgress ID="UpdateProgress1" runat="server"> </asp:UpdateProgress>

Ver. 1.0

Slide 9 of 41

Developing Web Applications Using ASP.NET

The UpdateProgress Control (Contd.)

The following table describes some properties of the UpdateProgress control.

Property AssociatedUpdatePanelID Description Gets or sets the ID of that UpdatePanel control for which the UpdateProgress control displays the status of update. Gets or sets the value (in milliseconds) before the UpdateProgress control is displayed. The default value is 500 milliseconds. Gets or sets a value that determines whether the progress template is rendered dynamically.

DisplayAfter

DynamicLayout

Ver. 1.0

Slide 10 of 41

Developing Web Applications Using ASP.NET

The Timer Control

The Timer control is used with the UpdatePanel control to perform partial-page updates at a predefined time interval. The Timer control can also be used to post the entire Web page at a predefined time interval. You can use the Timer control in your Web application to perform the following tasks:
Periodical updates of one or more UpdatePanel controls without refreshing the entire Web page. Execution of the code at the server each time the Timer control causes a postback. Synchronous postback of the entire Web page to the Web server at predefined time intervals.

Ver. 1.0

Slide 11 of 41

Developing Web Applications Using ASP.NET

The Timer Control (Contd.)

The Timer control embeds a JavaScript component into the Web page. You can place multiple Timer controls in a Web page. You can associate each Timer control with a different UpdatePanel controls. You can add a Timer control to a Web page by using the following code snippet:
<asp:Timer ID="Timer1" runat="server> </asp:Timer>

Ver. 1.0

Slide 12 of 41

Developing Web Applications Using ASP.NET

The Timer Control (Contd.)

The following table describes some properties of the Timer control.

Property Enabled Description Gets or sets a value that indicates whether the Timer control initiates a postback to the server after the number of milliseconds specified in the Interval property has elapsed. Gets or sets the number of milliseconds to wait before initiating a postback to the server. The default value is 60,000 milliseconds.

Interval

Ver. 1.0

Slide 13 of 41

Developing Web Applications Using ASP.NET

Activity 10.1: Implementing AJAX Controls

Problem Statement:
The AlbumDetails.aspx Web page enables a user to select an album and get details about that album. As the number of records increase in the database, the processing of the Web page will take time and the user has to wait to get the details. In addition, the user cannot interact with the Web page till the details are retrieved from the server. To make the page interactive and enable users to interact with the Web page while the album details are retrieved, you have to implement AJAX. In addition, you have to use the UpdateProgress control to display the status while the album details are being retrieved from the server.

Ver. 1.0

Slide 14 of 41

Developing Web Applications Using ASP.NET

Activity 10.1: Implementing AJAX Controls (Contd.)

Solution:
To make the page interactive and enable users to interact with the Web page while the album details are retrieved, you need to perform the following steps:
1. Modify the Albums page. 2. Execute the application.

Ver. 1.0

Slide 15 of 41

Developing Web Applications Using ASP.NET

Identifying the ASP.NET AJAX Client Life-Cycle Events

AJAX-enabled Web applications mainly consist of a client-side script that is processed by the Web browser. When a user interacts with an ASP.NET AJAX-enabled application, it raises some client events. These events are handled at the client side and are called client life-cycle events. Client events are raised by the classes present in the Microsoft AJAX Library. The two main Microsoft AJAX Library classes that raise events are:
Application PageRequestManager

Ver. 1.0

Slide 16 of 41

Developing Web Applications Using ASP.NET

Client Events of the Application Class

The following table lists the client events of the Application class that are raised in AJAX-enabled Web pages.
Event Sys.Application.init Description Raised after all scripts have been loaded in the Web browser. You can use this event to add your custom component to the Web page. This event is raised only when the page is rendered for the first time. Raised after all scripts have been loaded in the Web browser and all the objects in the application are initialized. This event is raised for all postbacks to the server, including the asynchronous postbacks. Raised before all objects are disposed and before the window.unload event of the Web browser window occurs. Raised when a property of a component changes. To raise this event, you need to call the Sys.Component.raisePropertyChange method in a set accessor. Raised when the Application instance is disposed.

Sys.Application.load

Sys.Application.unload

Sys.Component.propertyChanged

Sys.Component.disposing

Ver. 1.0

Slide 17 of 41

Developing Web Applications Using ASP.NET

Client Events of the PageRequestManager Class

The following table lists the client events of the PageRequestManager class that are raised in the AJAX-enabled Web pages.
Event Sys.WebForms.PageRequestManagerint ializeRequest Sys.WebForms.PageRequestManagerbeg inRequest Description Raised before an asynchronous request starts. You can use this event to cancel a postback. Raised before an asynchronous postback starts and till the postback is sent to the server. If a postback is already processing, the other postback is stopped by using the abortPostBack method. Raised after the response from the server to an asynchronous postback is received by the Web browser, but before any content on the page is updated or displayed. Raised after all content on the page is refreshed, as a result of either a synchronous or an asynchronous postback. Raised after the response for an asynchronous postback is processed and the page is updated, or during the processing of the response if there is an error. If an error occurs, the page is not updated.

Sys.WebForms.PageRequestManagerpag eLoading

Sys.WebForms.PageRequestManagerpag eLoaded Sys.WebForms.PageRequestManagerend Request

Ver. 1.0

Slide 18 of 41

Developing Web Applications Using ASP.NET

Consuming Web Services in AJAX-Enabled Applications

In AJAX-enabled Web applications, the Web service is called by using client-side scripts. To enable client scripts to communicate asynchronously with the server, ASP.NET AJAX provides the asynchronous communication layer. The communication layer enables a client application to call Web services by using JavaScript. The asynchronous communication layer acts as an intermediary layer between the browser and the server. It uses the XMLHTTP object to communicate asynchronously.

Ver. 1.0

Slide 19 of 41

Developing Web Applications Using ASP.NET

The Asynchronous Communication Layer

The asynchronous communication layer offers the following features:

It enables the JavaScript code to perform asynchronous calls to the server. It can invoke methods in Web services that are implemented as .asmx or .svc files. It makes Web service interactions easier by generating JavaScript proxies for Web services that can be accessed from the client script. It can invoke ASP.NET static page methods like a Web service method. It supports a variety of serialization formats such as JavaScript Object Notation (JSON), string data, and XML data for passing data between the browser and the server. It provides extensibility for client executors that are used by the proxy objects.
Ver. 1.0

Slide 20 of 41

Developing Web Applications Using ASP.NET

JSON Support in Consuming Web Services

JSON:
Is a standard and default format used for serialization by the asynchronous communication layer. Makes the interaction between the client and the server easy by eliminating the need for the client script to construct request. Is the ideal format for data exchange for AJAX-enabled Web applications. Can also be used to exchange or store structured information as text.

A JSON object provides the following two methods:

JSON.parse JSON.stringify

Ver. 1.0

Slide 21 of 41

Developing Web Applications Using ASP.NET

Creating and Registering Client Scripts

Creating and registering client scripts:

An AJAX-enabled Web application calls a Web service by using client script. A custom client script can be created and integrated with an AJAX-enabled ASP.NET application as:
Inline script. External java script file. Script embedded as a resource in an assembly.

Let us see how to embed a JavaScript file as a resource in an assembly

Ver. 1.0

Slide 22 of 41

Developing Web Applications Using ASP.NET

Activity 10.2: Implementing AJAX Controls

Problem Statement:
The AlbumDetails.aspx page shows the reviews for the album that is selected by the user. These reviews are provided by a Web service. You need to call the Web service in the MusicMania website.

Ver. 1.0

Slide 23 of 41

Developing Web Applications Using ASP.NET

Activity 10.2: Implementing AJAX Controls (Contd.)

Solution:
To call the Web service in the MusicMania website, you need to perform the following steps:
1. Add a Web reference of the Web service. 2. Modify the AddReviews.aspx.cs file. 3. Execute the application.

Ver. 1.0

Slide 24 of 41

Developing Web Applications Using ASP.NET

Implementing Internationalization

Web applications are accessed by people from different countries, cultures, and regions. Applications need to be internationalized to accommodate users from different countries and to enable them to use the website efficiently. International applications should be customizable according to the preferences of users belonging to different nations, cultures, or regions. The development of an international application goes through the following phases:
Globalization Localizability Localization

Ver. 1.0

Slide 25 of 41

Developing Web Applications Using ASP.NET

Factors Related to Creating International Applications

Application developers need to attend to locale considerations when they develop international applications. The factors that need to be considered while designing an internationalized application are:
Language Issues Formatting Issues String-related Issues User-interface Issues

Ver. 1.0

Slide 26 of 41

Developing Web Applications Using ASP.NET

Creating International Applications

The structure of an application that is created with internationalization in mind is divided into the following two blocks:
Data block: Contains user-interface resources, such as the text on Label controls that are to be translated into various languages. Code block: Contains the application code or the executable part of an application that is applicable for all cultures/locales.

The .NET Framework represents different cultures across the world by using a culture code. A culture code consists of two parts, a two-letter language code and an optional two-letter country/region code. The general format of the culture code is: <Language code>-<Country/Region code>
Ver. 1.0

Slide 27 of 41

Developing Web Applications Using ASP.NET

Creating International Applications (Contd.)

The following table lists some culture codes and their descriptions.
Culture Code En Description Specifies English language, no region

en-CA
fr-FR De Zh-CN de-DE

Specifies English language, Canada

Specifies French language, France Specifies German language, no region Specifies Chinese language, region Specifies German language, region

Ver. 1.0

Slide 28 of 41

Developing Web Applications Using ASP.NET

Creating International Applications (Contd.)

Culture codes that only specify a language are called neutral cultures, whereas culture codes that specify a language as well as a region are called specific cultures. To implement globalization in an application, you need to include the System.Gloablization namespace in your application. The System.Gloablization namespace provides classes that define culture-related information, such as the language, country, calendars, and formats. Two important classes included in the System.Gloablization namespace are:
CultureInfo: Provides information about a specific culture. RegionInfo: Contains information about a country/region.

Ver. 1.0

Slide 29 of 41

Developing Web Applications Using ASP.NET

Creating International Applications (Contd.)

The following table lists some of the commonly used properties of the CultureInfo class.
Property CurrentCulture Description Returns an instance of the CultureInfo class that represents the culture for the current thread. Returns an instance of the CultureInfo class that represents the current culture used by the Resource Manager to look for culturespecific resources at run time. Returns the name of the culture in the <Language code>-<Country/Region code> format. Returns a Boolean value indicating whether the culture represented by the CultureInfo object is a neutral culture. Gets or sets a NumberFormatInfo object that defines the appropriate format of displaying numbers, currency, and percentage.

CurrentUICulture

Name

IsNeutralCulture

NumberFormat

Ver. 1.0

Slide 30 of 41

Developing Web Applications Using ASP.NET

Creating International Applications (Contd.)

The following table lists some of the commonly used methods of the CultureInfo class.
Method CreateSpecificCulture Description Creates a CultureInfo object that represents the specific culture that is associated with the specified name. Returns a read-only instance of a culture. Gets a list of supported cultures filtered by the specified type. Returns an object that represents the format of a specified type. For example, this method will return an object representing the format of the date when the specified type is date/time.

GetCultureInfo GetCultures GetFormat

Ver. 1.0

Slide 31 of 41

Developing Web Applications Using ASP.NET

Creating International Applications (Contd.)

The following table lists some properties of the RegionInfo class.

Property CurrencySymbol Description Gets the currency symbol for the country/region. Gets a RegionInfo object that represent the county/region used by the current thread. Gets a value that indicates whether the country/region uses the metric system for measurement.

CurrentRegion
IsMetric

Ver. 1.0

Slide 32 of 41

Developing Web Applications Using ASP.NET

Creating International Applications (Contd.) The following table lists some methods of the RegionInfo class.
Method Equals GetType Description Determines whether the specified object is the same instance as the current RegionInfo object. Gets the type of the current instance.

Ver. 1.0

Slide 33 of 41

Developing Web Applications Using ASP.NET

Activity 11.1: Implementing Internationalization

Problem Statement:
The top level management at MusicMania has decided to open a new store in France. The management wants the website to be customized for French users. For this, the information displayed on the website needs to be in French language. In the initial phase, this functionality is to be implemented only on the home page so that the welcome message is displayed in French on the home page when the page is accessed by a user whose browser settings specify French as the preferred language.

Ver. 1.0

Slide 34 of 41

Developing Web Applications Using ASP.NET

Activity 11.1: Implementing Internationalization (Contd.)

Solution:
To solve the preceding problem, you need to perform the following steps:
1. Modify the Home page. 2. Verify the application.

Ver. 1.0

Slide 35 of 41

Developing Web Applications Using ASP.NET

Implementing Culture-Specific Formatting

To change the format of date, time, or currency values depending on the current culture, you need to specifically write code for implementing the same. Some date formats, and their corresponding format characters are listed in the following table.
Date Format Short Date Long Date Full Date and Time (Long date and short time) Full Date and Time (Long date and long time) Short Time Long Time Format Character d D f F t T Format Pattern for en-US Culture MM/dd/yyyy dddd, dd MMMM yyyy dddd, dd MMMM yyyy HH:mm dddd, dd MMMM yyyy HH:mm:ss HH:mm HH:mm:ss

Ver. 1.0

Slide 36 of 41

Developing Web Applications Using ASP.NET

Implementing Culture-Specific Formatting (Contd.)

The following code snippet demonstrates how to use a different format for displaying a date depending on the current culture:
protected void Page_Load(object sender, EventArgs e) { DateTime dt = DateTime.Now; CultureInfo USCulture = new CultureInfo("en-US"); CultureInfo FrenchCulture = new CultureInfo("fr-FR"); if (CultureInfo.CurrentCulture.Equals (FrenchCulture)) Label2.Text = dt.ToString("d", FrenchCulture); else Label2.Text = dt.ToString("d", USCulture); }

Ver. 1.0

Slide 37 of 41

Developing Web Applications Using ASP.NET

Summary

In this session, you learned that:

Some of the AJAX server controls offered by ASP.NET are:
ScriptManager control ScriptManagerProxy control UpdatePanel control UpdateProgress control Timer control

Client events are raised when a user interacts with an ASP.NET AJAX-enabled application. Client events are raised by the classes present in the Microsoft AJAX Library. The two main Microsoft AJAX Library classes that raise events are:
Application PageRequestManager

Ver. 1.0

Slide 38 of 41

Developing Web Applications Using ASP.NET

Summary (Contd.)

The ASP.NET AJAX architecture provides an asynchronous communication layer that enables a Web browser to call the Web service methods by using JavaScript. JSON is a standard and default format used for serialization by the asynchronous communication layer. A custom client script can be created and integrated with an AJAX-enabled ASP.NET application as:
Inline script. External java script file. Script embedded as a resource in an assembly.

Ver. 1.0

Slide 39 of 41

Developing Web Applications Using ASP.NET

Summary (Contd.)

The process of making an application ready for international users is called internationalization. The phases that are involved in developing an internationalized application are:
Globalization Localizability Localization

The factors that need to be considered while designing an internationalized application are:
Language issues Formatting issues String-related issues User-interface issues

Ver. 1.0

Slide 40 of 41

Developing Web Applications Using ASP.NET

Summary (Contd.)

The two blocks that make a structure of an internationalized application are:

Data block Code block

The System.Gloablization namespace provides classes that define culture-related information, such as the language, country, calendars, and formats. The two important classes included in the System.Gloablization namespace are:
CultureInfo RegionInfo

Ver. 1.0

Slide 41 of 41