讲座展示：Live From Redmond: Microsoft AJAX Patterns - Implementing Predictive Fetch with Microsoft ASP.NET 2.0 AJAX Extensions

简介

这次我选择的讲座，是最近在Live From Redmond系列WebCast中Joe Stagner的讲座“Microsoft AJAX Patterns - Implementing Predictive Fetch with Microsoft ASP.NET 2.0 AJAX Extensions”。Joe Stagner是UI, Tools & Platforms Team的Program Manager。作者在他的Blog上也提供了这个讲座的PPT和演示代码下载（VB.NET编写，不过我想在阅读上应该不会有很大问题）。另外，Microsoft Events也以On-Demand Webcast Events的形式提供了这个讲座的完整视频（不过这个视频从形式到质量都比TechEd和Mix的要差远了）。

在AJAX形式的Web开发中存在着一些常用的编程模式。在这个讲座里，Joe会讲述并且使用ASP.NET 2.0 AJAX Extensions做一个简单的演示，用来说明“Predictive Fetch”模式。

关于Live From Redmond系列

　　“Live From Redmond”是一系列由微软各个产品部门所设计，面向社区的Live Meeting讲座。这些讲座的演讲者都是来自真正的微软产品组，他们都为某个特定的技术工作。这些讲座都是从他们那里获得各种信息的好机会。

 

讲座内容

现在已经存在了一系列的有关AJAX的设计模式，或者说是一系列使用AJAX的形式。我们现在来看一下今天要实现的设计模式，这个AJAX模式叫做“Predictive Fetch”。我们现在已经有了增加用户体验，改善UI的方式，那就是更新页面的一部分，而避免对于整张页面进行完整的刷新，页面上其余的内容依旧留在页面上。也就是说，我们现在已经有了一个方法，能够使用JavaScript和服务器交换数据，而这个过程可以不为用户所察觉。那么我们现在就有了一个更加好的想法：用户下一步会做什么？我们需要预测用户下一步最有可能执行的操作，例如，最典型的“Predictive Fetch
”使用场景（不过我们这次不把它作为例子），就是在一篇有许多页的文章里，我们会想：“现在用户在第一页，他有90%的可能会点击下一页”、“如果他已经看到了所有6页中的第3页，那么他会有66%的可能性会查看下一页，而会有33%的可能性会看前一页。”这样，我们就根据UI的当前状况，我们可以预测用户下一步最有可能会作哪些事情，然后对于所需要的数据进行“预获取”。而这时候用户不会察觉到浏览器正在从服务器上获取数据。

我们在这里可以使用UpdatePanel来做到这一点，不过我更喜欢使用JavaScript从头开始开发——不要误会我的意思，UpdatePanel是个神奇的东西——不过有时候我还是比较乐意使用JavaScript进行开发。UpdatePanel的优点在于它非常容易使用，不过它的缺点在于每一次使用UpdatePanel做页面部分刷新时，都会产生一次完整的PostBack，包括所有的ViewState会被传递到服务器端，而在服务器上也会出现一次完整页面生命周期。我们能够很方便地将一个UpdatePanel拖到页面上产生部分刷新的效果，但是如果我们使用自己的Callback就会避免将页面的大量数据被传递到服务器端，也不会在服务器上出现完整的页面生命周期，因为我们很明确的去访问了一个Service Method，这就会高效许多。这也是我们这次演示会使用的方法。

使用AJAX的话我们也必须明白，在这里Page Navigation的含义变了。在大多数AJAX形式的应用中，“前进”和“后退”带来的效果和传统的应用不一样了，比如我父亲——他不会理解到底浏览器的运作方式和使用的技术——有时候他们会被搞糊涂，他们如果想看之前的内容，他们会去点击“后退”按钮。现在的AJAX应用都会使用一些方式去“弥补”这个问题。

在AJAX应用中，还必须考虑的一个话题就是“状态”。如果我在页面中使用了JavaScript获取了数据并且修改了内容，这些内容往往不会被带到服务器端，我们必须设法保留这些状态。一会儿我会演示该如何做到这些——您能够简单地使用Cookie，但是我在示例中将会使用JavaScript来编写一个简单的状态保存机制。

 

讲座演示

我是一个拳击迷，所我在这里将会展示的网站，它的作用就是查看运动员的状况。如图（点击小图可查看大图）：

当我切换下拉框里时，页面会自动地PostBack，以此获得不同的运动员的图片。如图（点击小图可查看大图）：

如果您想让它看上去更“AJAX”一些，您可以使用客户端控件然后编写一些客户端代码，不过这对于我们的示例来说并不重要。这里还有一个按钮来获得这个运动员的资料，我已经“预测”您会需要查看这些信息，已经提前获取了。因此在您点击这个按钮时，它们能被很快地显示出来，并且页面没有刷新。如图（点击小图可查看大图）：

现在按钮已经变成了“Get Record”，因此我也“提前”获得了这个运动员的战绩。当您点击时，它们也被显示出来了，页面没有刷新和闪烁。如图（点击小图可查看大图）：

按钮又变成了“Get Stats”，这样我们就能在运动员的资料和战绩之间来回切换。可能在本地我们无法看出效果，事实上我在每次得到当前的信息后都会“预测”用户会获得下次的信息，因此进行“预加载”。当然，如果您选择其它的运动员也一样。

我们现在看一下应该如何创建这样一个应用。

自然一开始，依旧是要引入ASP.NET AJAX的功能：引入程序集，编辑web.config文件等等。然后在页面里添加一个ScriptManager，再添加一些必要的元素——一个图片控件、一个下拉框、一个按钮以及最后一个用来显示信息的DIV。如下：

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div style="text-align: center">
    <asp:Image ID="FighterPhoto" runat="server" 
        ImageUrl="~/images/blank_fighter.jpg"
        Height="223px" Width="162px" />
    <br /><br />
    <asp:DropDownList ID="ddFighterList" runat="server"
        AutoPostBack="True">
        <asp:ListItem Selected="True" Value="None">
            Select Athlete ...
        </asp:ListItem>
        <asp:ListItem>Jeff Roufus</asp:ListItem>
        <asp:ListItem>Rick Roufus</asp:ListItem>
        <asp:ListItem>Duane Ludwig</asp:ListItem>
    </asp:DropDownList>
    <br /><br />
    <input id="btnMore" style="width: 171px" type="button"
        value="Get Stats" language="javascript" 
        onclick="return btnMore_onclick()" />
    <br /><br />
    <div id="divDetails" style="width: 868px; height: 100px"></div>
</div>

 

按理来说，我们应该从数据库里得到这些信息，但是在这里我完全使用了静态的信息——我不想让一个简单的演示也要动用数据库。请注意我们这里的按钮不是一个服务器控件，因为我们会对它们进行客户端的开发，进行“Predictive Fetch”，所以我们在这里使用了一个标准的HTML按钮。

如果您对于ASP.NET AJAX有什么意见的话，您可以写Email给我，我将会把这些功能整理后提交给负责所有功能的GPM。比如在1.0版的ASP.NET中，我们将会提供一个可以将程序集放在Bin目录下的解决方案，这样在没有安装ASP.NET AJAX的虚拟主机下也能使用ASP.NET AJAX的功能了。ASP.NET AJAX的正式版将在12月发布，虽然还没有确定一个时间，但是应该可以在12月份发布它的1.0正式版。

接下去我们将为下拉框在Code-Behind中响应它的事件。如下：

Protected Sub ddFighterList_SelectedIndexChanged
    (ByVal sender As Object, ByVal e As System.EventArgs)
    Handles ddFighterList.SelectedIndexChanged
    Select Case (ddFighterList.SelectedValue)
        Case "Jeff Roufus"
            FighterPhoto.ImageUrl = "images/Jeff Roufus.jpg"
        Case "Rick Roufus"
            FighterPhoto.ImageUrl = "images/Rick Roufus.jpg"
        Case "Duane Ludwig"
            FighterPhoto.ImageUrl = "images/Duane Ludwig.jpg"
        Case Else
            FighterPhoto.ImageUrl = "images/blank_fighter.jpg"
    End Select
End Sub

 

然后我们就要开始编写客户端的功能了。再这之前我们还需要编写一个Web Service。它的作用是能够从客户端得到一个运动员的资料或战绩。如下（省去了许多代码）：

<%@ WebService Language="VB" Class="DataService" %>
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Microsoft.Web.Script.Services.ScriptService()> _
Public Class DataService
    Inherits System.Web.Services.WebService
    
    <WebMethod()> _
    Public Function FetchData(ByVal strWho As String, 
        ByVal strWhat As String) As String
        Dim strDetails As String
        strDetails = ""
        
        Select Case (strWho)
            Case "Rick Roufus"
                If strWhat = "Stats" Then
                    strDetails = ...
                ElseIf strWhat = "Record" Then
                    strDetails = ...
                End If
            Case "Jeff Roufus"
                ...
        End Select
        
        Return strDetails
    End Function
End Class

 

我们的FetchData方法接受两个参数，第一个参数表示哪个运动员，第二个参数表示哪项信息，这里还是以拼接字符串的形式将数据拼接成HTML。

下面我们将编写代码来管理状态。我们必须知道当前页面中已经加载了哪种数据（currentDetails），然后我们才能够进行“预加载”。然后我们需要保存那些我们已经获取了，但是还没有被显示在页面上的信息（detailContent）。如下：

var currentDetails = "None";
var detailContent = "";

 

然后我们需要写一个JavaScript函数去向Web Service方法“预加载”数据。我们的Web Service方法有两个参数，一个是“Who”还有一个是“What”。“Who”的话比较简单，我们只需要获得当前下拉框的值即可，不过获得“What”就会相对困难些，我们需要使用一种简单的状态保留的机制，以得知我们需要获取什么样的数据。在这里我们使用了switch分支来判断currentDetails的值。如果是“None”，表示我们还没有获得任何数据，那么我们会去“预加载”这个运动员的“资料”，以此类推。最后我们会调用那个Web Service方法。如下：

function GetDetails() 
{
    switch(currentDetails)
    {
        case "None":
            currentDetails = "Stats";
            break;
        case "Stats":
            currentDetails = "Record";
            break;
        case "Record":
            currentDetails = "Stats";
            break;        
    }
    
    fighterDetails = DataService.FetchData(
        document.getElementById('ddFighterList').value,
        currentDetails,
        OnComplete,
        OnTimeOut,
        OnError);
} 
function OnComplete(retResult) 
{
    detailContent = retResult;
}
function OnTimeOut(retResult)
{
    alert(retResult);
}
function OnError(retResult)
{
    alert(retResult);
}

 

自然我们还需要在ScriptManager里引入Web Service的使用。如下：

<asp:ScriptManager ID="ScriptManager1" runat="server">
    <Services>
        <asp:ServiceReference Path="DataService.asmx" />
    </Services>
</asp:ScriptManager>

 

当用户点击按钮时，我们会将“预加载”的内容显示在下方的DIV中。然后会再次调用GetDetails方法，因为在显示了信息之后，用户一般会花一段时间查看这些信息，我们应该“预测”用户接下来的行为，以进行信息的“预加载”。当然最后会改变按钮上的文本，告诉用户接下来能够查看什么数据。如下：

function btnMore_onclick() 
{
    document.getElementById('divDetails').innerHTML = detailContent;
    GetDetails();
    document.getElementById('btnMore').value = 
        "Get " + currentDetails;
}

 

现在还有一个问题，比如我们在选择另一个运动员之后，我们并没有进行任何数据的“预加载”，因此我们必须定义一个pageLoad函数。这个函数会被ASP.NET AJAX Client Library在页面被加载时访问。在这个函数中，我们会判断用户是否选择了一个运动员，并进行预加载。如下：

function pageLoad () 
{ 
    if(document.getElementById('ddFighterList').value != "None")
    {
        GetDetails();
    } 
}

 

感想

事实上我必须承认，这次讲座的质量并不高。这次的讲座，立意不错，可惜内容讲解的比较肤浅，还有这个例子举得实在是比较糟糕，过于简单。Live From Redmond其实也应该算是比较有特色的Web Cast了，可惜其质量——至少这次的质量非常的一般。也有可能是刚经过了TechEd Europe Edition的“溺爱”，对于讲座的“口味”也变得挑剔了。下一次我将会准备将讲述一下TechEd Europe中的“DEV370 - AJAX Patterns with ASP.NET AJAX”，相信大家也能够看出个中差距。

另外，我似乎觉得Joe Stagner对于ASP.NET AJAX不怎么熟悉。最近在它的Blog上发了这么一个Post，大意是说他不知道如何设置一个Web Service Call的Timeout，结果从ASP.NET AJAX Team里的一个人那里才知道……我想，园子里已经掌握这点的朋友应该不在少数吧？还有他在上面的例子里，为什么还在使用“document.getElementById”方法，而不是“$get”……:)