65.9K
CodeProject 正在变化。 阅读更多。
Home

AJAX 实战

azamsharp
starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.64/5 (11投票s)

2005年9月28日

3分钟阅读

viewsIcon

123939

downloadIcon

540

查看 AJAX 的实际效果。

引言

我喜欢 AJAX，它能真正地清洗我的盘子。不幸的是，在本文中我们不会讨论洗涤剂。如果你喜欢，你可以访问Clean My Dishes了解更多详情。在本文中，我们将讨论 AJAX（异步 JavaScript 和 XML）。你现在需要知道的是，AJAX 允许你进行服务器端调用而无需回发。

下载 AJAX.NET 库

首先，你需要下载 Michael Schwarz 创建的 AJAX.NET 库。现在你已经下载了该库并在你的项目中添加了对 DLL 的引用，我们可以开始一些实际的操作了。

我们将要做什么？

好的，这就是我们要做的事情。我们将使用 <select> HTML 标签创建一个下拉列表。我们将从数据库填充该下拉列表。现在，当我们从下拉列表中选择任何项目时，它将从数据库获取结果并在 DataGrid 中显示它。所有这些都将没有回发发生。

我强烈建议你首先阅读以上 URL 中给出的使用 AJAX.NET 库的基本说明，这样你就会有一个基本的概念。

AJAX 实战

我们的首要任务是在页面加载时，下拉列表填充来自数据库的数据。但在那之前，让我们通过在 page_load 事件中进行调用来初始化我们的 AJAX 库。

private void Page_Load(object sender, System.EventArgs e)
{
  Ajax.Utility.RegisterTypeForAjax(typeof(UsingAjax));
}

在本文中，我们将使用 Northwind 数据库。首先，你需要创建一个服务器方法，以便你可以获得一个 DataSet 并将其绑定到下拉列表。让我们创建那个方法

[Ajax.AjaxMethod]
public DataSet GetDropDownListData()
{
  string query = "SELECT CategoryID,CategoryName FROM Categories ";
  SqlConnection myConnection = new SqlConnection(GetConnectionString());
  SqlDataAdapter ad = new SqlDataAdapter(query,myConnection);
  DataSet ds = new DataSet();
  ad.Fill(ds,"Categories");
  return ds;
}

你可能已经注意到，此方法使用 Ajax.AjaxMethod 属性标记。这意味着此方法将从客户端调用。现在让我们看看我们如何从客户端访问此方法。

function FillDropDownList()
{
  UsingAjax.GetDropDownListData(FillDropDownList_CallBack);
}

function FillDropDownList_CallBack(response)
{
  var ds = response.value;
  var html = new Array();

  if(ds!= null && typeof(ds) == "object" && ds.Tables!= null)
  {
    for(var i=0;i<ds.Tables[0].Rows.length;i++)
    {
      html[html.length] = "<option value=" + 
                          ds.Tables[0].Rows[i].CategoryID + ">" 
                          + ds.Tables[0].Rows[i].CategoryName + 
                          "</option>";
    }
    document.getElementById("Display").innerHTML = 
        "<select id=\"sel\" onchange=\" ChangeListValue" + 
        "(this.options[this.selectedIndex].value); \">" + 
        html.join("") + "</select>";
  }
}

让我首先解释一下 FillDropDownList() 方法。 UsingAjax 是包含 GetDropDownListData 方法的类的名称，我们几分钟前实现了该方法。我们调用 FillDropDownList_CallBack()，它包含填充下拉列表的实际代码。

看一下下面的这一行

document.getElementById("Display").innerHTML = 
                       "<select id=\"sel\" onchange=\"

你一定想知道“Display”是什么。 Display 仅仅是一个 SPAN 标签。我已在下面实现了它

<span id="Display"></span>

现在让我们去看看 ChangeListValue 方法是如何实现的，因为它是在下拉列表中的选择更改时被调用的。

function ChangeListValue(index)
{
  GetResult(index);
}

ChangeListValue() 调用 GetResult(index)。现在让我们转到 GetResult(index)。

function GetResult(categoryID)
{
  UsingAjax.GetProductsByID(categoryID,GetResult_CallBack);
}

function GetResult_CallBack(response)
{
  var ds = response.value;
  if(ds!=null && typeof(ds) == "object" && ds.Tables!=null)
  {
    var s = new Array();
    s[s.length] = "<table border = 1>";

    for(var i=0;i<ds.Tables[0].Rows.length;i++)
    {
        s[s.length] = "<tr>";
        s[s.length] = "<td>" + ds.Tables[0].Rows[i].ProductID + "</td>";
        s[s.length] = "<td>" + ds.Tables[0].Rows[i].ProductName + "</td>";
        s[s.length] = "<td>" + ds.Tables[0].Rows[i].QuantityPerUnit + "</td>";
        s[s.length] = "</tr>";
    }
    s[s.length] = "</table>";

    document.getElementById("Display1").innerHTML = s.join("");
  }
}

GetResults() 方法调用服务器端方法 "GetProductsByID"。

[Ajax.AjaxMethod]
public DataSet GetProductsByID(int categoryID)
{
  string query = "SELECT * FROM Products WHERE CategoryID = @CategoryID ";
  SqlConnection myConnection = new SqlConnection(GetConnectionString());
  SqlCommand myCommand = new SqlCommand(query,myConnection);

  myCommand.Parameters.Add("@CategoryID",categoryID);
  SqlDataAdapter ad = new SqlDataAdapter(myCommand);
  DataSet ds = new DataSet();

  ad.Fill(ds);
  return ds;
}

所以，现在就这样了。当你从下拉列表中选择一个项目时，你的 DataGrid 将提取新的结果，而无需刷新页面。换句话说，将不会有回发。

你还应该创建一个 BindControls() 方法，它将在页面加载时填充控件。 这是我 BindControls() 方法的实现。 请记住，我们已经实现了上面的 FillDropDownList() 方法。

function BindControls()
{
  FillDropDownList();
}

创建 BindControls 方法后，你只需在页面加载时调用它即可。

<body onload="BindControls();">

你还需要在web.config 文件中添加这些设置

<configuration>
  <system.web>
    <httpHandlers>
      <add verb="POST,GET " path="ajax /*.ashx"
           type="Ajax.PageHandlerFactory, Ajax" /> 
    </httpHandlers>  
    ...
  <system.web>
</configuration>

为了你的方便，我附上了一个 zip 文件，其中包含此项目所需的所有文件。 我希望你喜欢这篇文章，编码愉快！

© . All rights reserved.