将 ASP.NET Ajax 集成到您的应用程序中的最简单方法

• 下载 project.zip - 3.3 KB

引言

Asynchronous JavaScript and XML (异步 JavaScript 和 XML) 已成为新一代网站的必备技术。ASP.NET Ajax 的实现方式非常简单。我们只需在 web.config 文件中添加几行代码，即可开始使用 ASP.NET Ajax 标签。但您应该首先从 Microsoft 下载 Ajax。

系统要求

• Microsoft .NET Framework Version 2.0
• Internet Explorer 5.01 或更高版本
• Windows 2000 / Windows Server 2003 / Windows Vista / Windows XP

下载并安装 Ajax 后，您的 .NET 工具箱中将多出一个选项，看起来会是这样

使用 ASP.NET Ajax

使用 ASP.NET Ajax 主要有两种方法。第一种是创建一个新的启用 ASP.NET Ajax 的网站。

第二种是修改您现有的 ASP.NET 2.0 网站。在这种情况下，您必须在 web.config 文件中添加以下几行。这些行应添加到 <system.web> 下方

<httpHandlers>
<remove verb="*" path="*.asmx"/>
<add verb="*" path="*.asmx" validate="false" 
    type="System.Web.Script.Services.ScriptHandlerFactory, 
    System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, 
    PublicKeyToken=31bf3856ad364e35"/>
<add verb="GET,HEAD" path="ScriptResource.axd" 
    type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, 
    Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" 
    validate="false"/>
</httpHandlers>
<httpModules>
<add name="ScriptModule" type="System.Web.Handlers.ScriptModule, 
    System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, 
    PublicKeyToken=31bf3856ad364e35"/>
</httpModules> 

如果您想知道我为什么要将这些行添加到 web.config 文件中，答案是，这些行可以在系统 C 或其他系统目录 \Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\web.config 中找到。

如果不这样做，您将收到 "sys is undefined" (sys 未定义) 的 JavaScript 错误，并且您的 Ajax 将无法正常工作。

因此，振作起来，现在您的应用程序已准备好在 .NET 2.0 中实现。首先放置一个 "script manager" (脚本管理器)，然后是一个 "update panel" (更新面板)。现在，如果更新面板中的任何控件向服务器发出请求，只有更新面板内的部分会提交到服务器。当您的页面频繁回发时，这非常有用。

在这里，我给您一个非常简单且有用的示例，这在制作动态网站时经常会遇到。该示例是当数据动态填充到下拉列表中时。用户选择一个国家，这应该只显示与该选择相关的信息。在这种情况下，要消除回发，您可以使用 ASP.NET Ajax，就像我的示例中那样。

为了便于您理解，我的示例中只使用了必要且具有说明性的内容。我在此示例中使用 XML 数据库，但您也可以使用其他数据库。设计完成后，看起来会是这样

我的命名约定如下

ddlCountry	国家下拉列表
ddlState	州下拉列表
lblMsg	以及一个标签

现在 ddlCountry 在 pageload 事件中由 XML 数据库动态填充。为此，我调用一个函数 fillCountry()。它只被调用一次以填充 ddlCountry 下拉列表。

Page Load 事件

    ''' <summary>
    ''' On page load the drop down for choose country is filled, 
    ''' by a function fillCountry()
    ''' </summary>
    ''' <param name="sender" />
    ''' <param name="e" />
    ''' <remarks />
Protected Sub Page_Load(ByVal sender As Object, 
    ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            fillCountry()
        End If
End Sub

Sub routine fillCountry (过程 fillCountry)

fillCountry() 子程序用于在从数据集中读取 XML 文件后填充 ddlCountry 。它使用 listitem 来填充下拉列表。listitem 的文本和 listitem 的值是动态地从数据集中提供的。最后，将 listitem 添加到下拉列表中。

   ''' <summary>
    ''' This subroutine is used to dynamically fill the drop down list for  
    ''' country 
    ''' </summary>
    ''' <remarks />
    Private Sub fillCountry()
        Dim ds As New DataSet()
        Dim lst As ListItem    
            ''' lists items to be added to drop down list after 
            ''' assigning the text and value
        Dim i As Integer = 0
        If Not IsPostBack() Then
            ddlCountry.Items.Clear()
        End If

        ds.ReadXml(Server.MapPath("App_Data\country.xml"))
        lst = New ListItem()
        lst.Text = "--Choose Country--"
        lst.Value = "0"
        ddlCountry.Items.Add(lst)
        For i = 0 To ds.Tables(0).Rows.Count - 1
            lst = New ListItem()
            lst.Text = ds.Tables(0).Rows(i)(0)
            lst.Value = ds.Tables(0).Rows(i)(1)
            ddlCountry.Items.Add(lst)
        Next
    End Sub 

上述代码动态填充了国家下拉列表。

Select index change event (选择索引更改事件)

Protected Sub ddlCountry_SelectedIndexChanged(ByVal sender As Object, 
            ByVal e As System.EventArgs)
        ddlState.Enabled = True
        fillState(ddlCountry.SelectedItem.Value.ToString().Trim())
        lblMsg.Text = "You are selected " 
            + ddlCountry.SelectedItem.Text
    End Sub

当下拉列表的选择更改时，将启用州下拉列表 (ddlState)，并且 ddlState 下拉列表将由函数 fillState(country's selected item value) 动态填充。

Sub routine fillState(CountryID) (过程 fillState(CountryID))

如果您仔细查看下面的代码，您会发现 ddlState.Items.Clear() 这一行。它的作用是在每次动态填充数据到 ddlState 之前清除它。如果省略此行，则每次调用此函数时都不会删除先前的数据，只会添加新项。现在又有一个新东西

lst = New ListItem()
lst.Text = "--Choose State--"
lst.Value = "0"

这三行代码的作用是将第一个列表项添加为 "Choose State" (选择州)，以便用户可以轻松理解此下拉列表是用于选择州的。它的值为 0，但您可以将其设置为 -1 或任何您喜欢的字符串。

还有一件事

If ds.Tables(0).Rows(i)(2) = countryid Then

上面的行根据特定的 CountryID (请参见 State.xml) 过滤州数据。如果您使用的是其他数据库，则可以通过在 SQL select 语句中使用 where 条件来实现。

    ''' <summary>
    ''' It fills the drop down for the state dynamically
    ''' </summary>
    ''' <param name="countryid" />
    ''' It accepts the select item value from the country drop down list
    ''' <remarks />
Private Sub fillState(ByVal countryid As String)
        Dim ds As New DataSet()
        Dim lst As ListItem
        Dim i As Integer = 0
        ddlState.Items.Clear()
        lst = New ListItem()
        lst.Text = "--Choose State--"
        lst.Value = "0"
        ddlState.Items.Add(lst)
        ds.ReadXml(Server.MapPath("App_Data\state.xml"))
        For i = 0 To ds.Tables(0).Rows.Count - 1
            If ds.Tables(0).Rows(i)(2) = countryid Then
                lst = New ListItem()
                lst.Text = ds.Tables(0).Rows(i)(0)
                lst.Value = ds.Tables(0).Rows(i)(1)
                ddlState.Items.Add(lst)
            End If
        Next

结论

现在我们可以得出结论，您可以通过 ASP.NET Ajax 真正增强用户交互。ASP.NET Ajax 工具箱扩展中还有其他项。例如，"update progress" (更新进度) 用于在 ASP.NET Ajax 面板更新时间过长时显示进度。ASP.NET Ajax 的另一个示例是将其用于 "data grid" (数据网格)；当您启用分页和排序时，它可以消除回发。在 "calendar control" (日历控件) 中，它也可以消除回发。

希望您觉得本文有用。我希望发布更多关于 ASP.NET Ajax 其他功能的文章。

历史

• 2007 年 5 月 11 日 - 发布原始版本