使用 ASP.NET AJAX Extensions 开发小工具

Scott Dowding

4.48/5 (11投票s)

2007年3月31日

3分钟阅读

74883

903

如何使用基于 ASP.NET AJAX Extensions 开发的基类来开发侧边栏小工具

引言

你将从本文中获得什么

使用基类开发小工具的概述，该基类内置了对显示加载、加载中和连接错误状态的支持

你将不会从本文中获得什么

小工具开发的介绍
ASP.NET AJAX Extensions 的介绍

背景

大多数处理远程数据的小工具都有三个基本状态：加载中、已加载和连接错误。为了简单起见，我特意忽略了停靠和取消停靠状态。

Screenshot - a_states.gif

当我开始开发我的第一个小工具时，我对需要编写多少代码来支持显示状态感到不满意。我写的代码似乎很混乱，而且更像是函数式的而不是面向对象的。为了解决这个问题，我创建了一个基类，它提供了对呈现显示模式的支持，并封装了一些基本的小工具 API。

Using the Code

为你的小工具创建 HTML

请确保在小工具的 HTML 文件中首先引用 MicrosoftAjax.js 和 Dowds.Gadgets.js 文件。

<head>
    <script type="text/javascript" src="Scripts/MicrosoftAjax.debug.js">
    </script>
    <script type="text/javascript" src="Scripts/Dowds.Gadgets.js">
    </script>
    <script type="text/javascript" 
        src="Scripts/##You_Gadgets_Javasctipt_File##.js"></script>
</head>

Dowds.Gadgets.Gadget 类没有动态地为每个状态生成 HTML，而是采用了一种更简单的方法。它期望小工具 HTML 文件为每个状态都有一个 DIV 元素。它们必须具有以下 id

dataLoadedDisplay，用于在数据成功加载时显示的 div
dataLoadingDisplay，用于在数据加载时显示的 div
dataNotAvailableDisplay，用于在出现连接错误时显示的 div

每个 DIV 都应该是绝对定位的，并且其 CSS 可见性应设置为 hidden。

<body>
    <div id="dataLoadedDisplay" style="position:absolute;visibility:hidden">
        <table id="movieListings">
            <tr><td class="percent"></td><td class="title"><div><a></a></div>
        </td></tr>
            ...
        </table>
    </div>
    <div id="dataLoadingDisplay" style="position:absolute;visibility:hidden">
        <img src="Images/Icon_Spinner.gif" /> Getting Data…
    </div>
    <div id="dataNotAvailableDisplay" 
        style="position:absolute;visibility:hidden">
        <img src="Images/Icon_Info.png" /> Service Not Available
    </div>
</body>

为你的小工具创建 JavaScript

使用 ASP.NET AJAX Extensions 创建一个新类。使用 registerClass 方法使其继承自 Dowds.Gadget.Gadget

Dowds.Gadgets.Movies = function()
{
    Dowds.Gadgets.Movies.initializeBase(this);
    this._data = null;
};
Dowds.Gadgets.Movies.registerClass("Dowds.Gadgets.Movies", 
                        Dowds.Gadgets.Gadget);

可以使用 ASP.NET AJAX Extensions 提供的 Sys.Net.WebRequest 类轻松访问远程数据，例如 XML 文件或 Web 服务。

Dowds.Gadgets.Movies.prototype =
{
    _requestData: function()
    {
        // Use ASP.NET Extensions to access the remote XML or web service
        var wRequest = new Sys.Net.WebRequest();
        wRequest.set_url
        ("http://i.rottentomatoes.com/syndication/rss/top_movies.xml");
        wRequest.add_completed(Function.createDelegate
                    (this, this._processData));
        wRequest.invoke();
    }
}

一旦返回数据，你需要调用 Dowds.Gadgets.Gadget 类的 _updateDisplay 方法。它完成了更新小工具状态的几乎所有工作。它根据 _dataNotAvailable 和 _dataLoaded 标志的值更新显示。

_dataNotAvailable	_dataLoaded	显示的 DIV
`true`	`true`	`dataNotAvailableDisplay`
`true`	`false`	`dataNotAvailableDisplay`
`false`	`true`	`dataLoadedDisplay`
`false`	`false`	`dataLoadingDisplay`

在调用 _updateDisplay 方法之前，请务必根据请求的成功情况更新 _dataNotAvailable 和 _dataLoaded 标志。

Dowds.Gadgets.Movies.prototype =
{
    ...
    _processData: function(executor)
    {
        if (executor.get_responseAvailable())
        {     // The data returned
            var movieDoc = executor.get_xml();
            this._dataLoaded = true;
            this._dataNotAvailable = false;
            this._data = Dowds.Gadgets.MovieInfo.ParseFromDoc(movieDoc);
            // Update the display HTML for the loaded state
            this._bindTable(this._data);
        }
        else
        {    // There was an error connecting to the data
            this._dataLoaded = false;
            this._dataNotAvailable = true;
        }
        // Refresh the data in 4 hours
        setTimeout(Function.createDelegate(this, this._requestData), 
                            (4 * 3600000));
        this._updateDisplay();
    }
}

每当状态标志发生变化时，都应调用 _updateDisplay 方法。你还需要添加自定义逻辑，以使用返回的数据更新 UI。在上面的例子中，我调用 _bindTable(this.data) 来使用返回的电影评论数据更新 dataLoadedDisplay DIV 中的表格。

打开弹出窗口

如果你打开一个已经打开的弹出窗口，它会失去焦点并变成灰色。为了避免这种情况，请检查弹出窗口是否已打开，如果是，则只需刷新数据。

_link_onclick: function(e)
{
    ...
    if(System.Gadget.Flyout.show)
    {
        this._updateFlyout();
    }
    else
    {
        System.Gadget.Flyout.show = true;
    }
    ...
},
_updateFlyout: function()
{
    var flyoutWindow = System.Gadget.Flyout.document.parentWindow;
    flyoutWindow.moviesFlyout.reload(this._selectedMovieInfo);
}

最终想法

非常重要的是，你要避免让你的小工具看起来像是开发人员设计的。尝试思考你可以用来直观地表示你的小工具的对象或隐喻。例如，我创建了一个电影评论小工具，所以场记板是一个合适的背景。