1. Trang chủ >
  2. Công Nghệ Thông Tin >
  3. Quản trị mạng >

Fixing Bookmarks and Back/Forward Buttons with Controls Using the ASP.NET AJAX Futures

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (8.86 MB, 475 trang )


Example 20-2. Fixing bookmarks and back/forward buttons with the Futures release (continued)


Ready ...

Set ...


Fixing Bookmarks and Back/Forward Buttons with Controls Using the ASP.NET AJAX Futures |



Figure 20-4. The Wizard with Back/Forward button support — note the longer URL

One advantage of the Futures control is that it also exposes a JavaScript API. So, you

do not even need an UpdatePanel control. If you are using JavaScript to maintain

state information, you can use the History control’s JavaScript API to write state

information (which in turn appends data to the URL hash). Also, the control automatically executes the pageNavigate( ) JavaScript function. This is the place where

you can then recreate the page’s state using the data from the History control.

For this example, we try to recreate a client-side version of the ASP.NET 2.0 Wizard

control, albeit a limited one. The three wizard steps are modeled in three HTML

table rows, which are all initially invisible:

For navigation between the wizard steps, the three links in the left sidebar are used,

this time using a custom JavaScript implementation:



Chapter 20: Fixing Bookmarks and Back/Forward Buttons


border="0" style="border-collapse: collapse;">


Step 1


Step 2


Step 3

The gotoStepClick( ) function first adds a new history point. The corresponding

JavaScript method for the server-side addHistoryPoint( ) method of the History control looks like this:

function gotoStepClick(nr) {

Sys.Application.get_history( ).addHistoryPoint({myHistory: nr});

Then the gotoStepClick( ) function calls another helper function, gotoStep( ):



The gotoStep( ) function takes care of displaying the correct wizard step (and hiding

the other one). Also, the link for the current step is made bold:

function gotoStep(nr) {

if (nr >= 1 && nr <= 3) {

$get("Wizard1_Step1").style.display = "none";

$get("Wizard1_Step2").style.display = "none";

$get("Wizard1_Step3").style.display = "none";

$get("Wizard1_SideBar1").style.fontWeight = "normal";

$get("Wizard1_SideBar2").style.fontWeight = "normal";

$get("Wizard1_SideBar3").style.fontWeight = "normal";

$get("Wizard1_Step" + nr).style.display = "";

$get("Wizard1_SideBar" + nr).style.fontWeight = "bold";



The final piece of this sample is the code that recovers the page state when the user

clicks on the forward or back button in the browser. As mentioned earlier, this can be

handled in the pageNavigate( ) JavaScript function. The second argument that is passed

automatically to this function contains all state variables. The get_state( ) methods

Fixing Bookmarks and Back/Forward Buttons with Controls Using the ASP.NET AJAX Futures |



return them. Because we were using myHistory when adding the history point, you can

use get_state( ).myHistory to retrieve the specific state we set previously.

function pageNavigate(sender, e) {

var step = 1;

if (e.get_state( ).myHistory != null) {

step = e.get_state( ).myHistory;




And that’s it! Example 20-3 contains the complete code for the example, and

Figure 20-5 shows the custom wizard in the browser.

Example 20-3. Fixing bookmarks and back/forward buttons with JavaScript code


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



id="Wizard1_SideBarContainer_SideBarList" cellspacing="0" border="0" style="bordercollapse:collapse;">


href="javascript:gotoStepClick(1)">Step 1


href="javascript:gotoStepClick(2)">Step 2


href="javascript:gotoStepClick(3)">Step 3

cellpadding="0" border="0" style="height:100%;width:100%;bordercollapse:collapse;">

Fixing Bookmarks and Back/Forward Buttons with Controls Using the ASP.NET AJAX Futures |



Example 20-3. Fixing bookmarks and back/forward buttons with JavaScript code (continued)

Figure 20-5. The simulated Wizard control

Creating Permalinks

A permalink describes a permanent link for a web page, including its state. You have

probably noticed that the URLs of the sample applications in this chapter change

whenever the state changes (and we have included code to handle that). So, whenever

you bookmark the current page, the URL contains all the information to reproduce the

page state.

The History control also offers a helper method to retrieve the bookmark URL information. You could, of course, read out the location.href JavaSscript property. You

can also resort to the following methods:

getStateString( )

Server method to retrieve the bookmark URL

Sys.Application.get_history().get_stateString( )

Client method to retrieve the bookmark URL

Some web pages include a permalink hyperlink. Whenever the page state changes, the

URL of this hyperlink is updated appropriately.



Chapter 20: Fixing Bookmarks and Back/Forward Buttons



This chapter introduced two well-known problems of many Ajax applications: lack

of bookmark support, and nonfunctional back/forward browser buttons. However,

this chapter also provided solutions for these problems. These may require some

extra effort, but can make the usability of an Ajax-powered page so much better.

For Further Reading


Documentation for the History control

Wenz, Christian. Ajax, Software & Support (Entwickler Press)

Introduces code solutions to solve the bookmark and back/forward button


For Further Reading |




21 21


Web Parts


Using Ajax can help you make web applications behave more like desktop applications. And the more web applications become like desktop applications, the more

developers tend to design and reuse components to deliver greater functionality to

their pages.

ASP.NET AJAX offers several ways to reuse components toward adding functionality to browser-based clients. The control extenders in the ASP.NET AJAX Control

Toolkit are a prime example. This chapter covers another one, Web Parts, an ASP.NET

feature (introduced in ASP.NET 2.0), that benefits from an extra boost thanks to the

ASP.NET AJAX Futures release.

Using ASP.NET AJAX with ASP.NET Web Parts

This section will show how you can use ASP.NET AJAX with ASP.NET Web Parts to

give users more control over the layout and content of an ASP.NET AJAX page.

ASP.NET Web Parts are a set of controls enabling users to add, remove, and

change elements on a page at runtime. Web Parts offer the ability to create pages such

as the Google personalized home page (http://www.google.com/ig) in ASP.NET.

Web Parts are enabled using client script to support drag-and-drop, expand and collapse, and other similar features. However, a limitation of Web Parts as shipped with

ASP.NET 2.0 is that most of their functionality is available only in Internet Explorer.

Therefore, ASP.NET Web Parts are mostly used in intranet environments that can

rely on working with Internet Explorer.

Of course, Internet Explorer is not the only browser available and many web users

have Firefox or other browsers. So, although Web Parts are a nice feature, they are

not necessarily suitable for broadly-accessed public web sites.

ASP.NET AJAX compensates for this limitation. With the ASP.NET AJAX Futures

release, it is now possible to use Web Parts that are equally functional in Internet



Explorer and Firefox. If you are developing a public web site and need cross-browser

support, ASP.NET AJAX Web Parts are a very appealing option.

In this section, you’ll learn how to implement Web Parts using ASP.NET AJAX. I won’t

provide background information on Web Parts (which is a rather large subject), so if

you want more information about the basics of Web Parts, you might try the documentation. A good place to start might be the ASP.NET Web Parts pages (http://


In the example that that will follow, we’ll use ASP.NET AJAX Web Parts to package

a calendar control and a wizard control, then we’ll enable drag-and-drop functionality for both so the user can arrange them to personal preference in a browser. These

changes are persisted (maintained), so if cookies are activated and the page is visited

again, the two controls will be at the same position as the previous visit.

There are two ways to work with ASP.NET AJAX-specific Web Parts. One is to

remap the existing ASP.NET Web Parts tags to equivalent ASP.NET AJAX tags—in

which case, uses the ASP.NET AJAX version of Web Parts. You

might do this if you have existing pages that use Web Parts and you want to extend

the controls to use ASP.NET AJAX but do not want to build the site from scratch


To remap the tags, you can use a element in the site’s Web.config file.

This element redirects all tag references of a certain type to one of another type.

The following snippet from a Web.config file shows how to remap two ASP.NET

Web Parts tags (defined in the System.Web.UI.WebControls.WebParts.WebPartManager

namespace), to the equivalent ASP.NET AJAX Web Parts (defined in the Microsoft.

Web.Preview.UI.Controls.WebParts.WebPartManager namespace).



This markup remaps the default ASP.NET WebPartManager and WebPartZone types to

their ASP.NET AJAX counterparts. (Generally, the type provided in the tagType

attribute gets mapped to the type provided in the mappedTagType attribute.) This

strategy maps all Web Part tags for the application.

The second way to work with ASP.NET AJAX-specific Web Parts is to simply use the

Web Parts control directly. This enables you to use Web Parts on individual pages

without affecting the application as a whole.

Using ASP.NET AJAX with ASP.NET Web Parts |



To do this, you need to register the Microsoft.Web.Preview.UI.Controls.WebParts

namespace. Enter the following markup in the element in the Web.config




tagPrefix="ajax" />

Now you can access the ASP.NET AJAX Web Part elements using the ajax prefix, for

instance .

In this chapter we will use the former approach (tag mapping), so we do not need to

introduce an additional tag prefix. Be sure you add the element to the

Web.config file before you run the example in this chapter. Also keep in mind this

will remap all the Web Parts controls in the web site.

Now you can create an ASP.NET page with ASP.NET AJAX Web Parts. As always, a

ScriptManager control is required. You must also add a WebPartManager control to

enable Web Parts support:

Web Part zones are areas on the page where Web Parts can appear—in effect, containers for Web Parts. You can drag Web Parts between zones, and you can hide or

show zones to hide or show the Web Parts inside them. You create a zone with the

WebPartZone control whose child element, , contains the contents of

that Web Part. Here are two Web Part zones, each containing an ASP.NET Calendar

and Wizard control:



Chapter 21: Web Parts


To give your Web Part drag-and-drop functionality, you need to set the DisplayMode

property of the WebPartManager control to DesignDisplayMode. The display mode cannot be set declaratively, but the following server-side C# code comes to the rescue:

void Page_Init ( )


WebPartManager1.DisplayMode =




Because you now have two WebParts namespaces (one for ASP.NET 2.0

and one for ASP.NET AJAX), references to WebPartManager.

DesignDisplayMode are ambiguous. Therefore, you must fully qualify

any reference to the display mode.

Example 21-1 contains the complete code for this example. In Figure 21-1, you can

see the result as displayed in Firefox—dragging and dropping a Web Part is now

supported. The first time you run the example, there will be a delay as ASP.NET

configures the database in which the Web Parts information is stored. When you

drag a Web Part or close a zone, information about the state of the Web Parts is persisted between browser sessions.

Remember you need to configure the tag mapping in the Web.config


Example 21-1. Web Parts with ASP.NET AJAX


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



Using ASP.NET AJAX with ASP.NET Web Parts |


Xem Thêm
Tải bản đầy đủ (.pdf) (475 trang)

Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Tải bản đầy đủ ngay