Ajax DataGrid 示例

• 下载源代码 - 12 KB

引言

本文介绍了如何通过 AJAX 更新 ASP.NET 2.0 DataView 控件中的数据。让我们考虑一个允许客户在互联网上购买某些产品的电子商务应用程序。每次完成销售，剩余的产品数量都会更新。我们还应考虑有必要实时监控这些数量（这在销量大且需要频繁订购所需产品的情况下可能需要）。在这种情况下，拥有一个包含所需产品和库存单位数据的网页会很有用，这些数据将通过异步调用在要求的间隔（例如 5 秒）内更新。

当我接到开发类似页面的请求时，我在互联网上花了很长时间试图找到任何可行的示例来给我关于如何编写代码的想法。我没有成功。大多数文章都有一些漂亮的词语，但没有任何代码行。其他文章有示例，但它们不起作用。所以，经过一段时间，我想到了一种让它奏效的方法。我希望本文能帮助其他试图理解 AJAX 的人。

背景

该示例使用 Northwind 数据库中 Products 表的数据。该方法基于使用 XmlHttpRequest 对象，通过该对象，您可以使用 JavaScript 将任何数据发送/从服务器获取/到服务器。要实现 AJAX 调用，您实际上需要有两个网页：一个是用户可见的网页，另一个是实际生成第一个网页所需内容的网页。第一个页面通过 JavaScript 中实现的 XmpHttpRequest 调用第二个页面。

Using the Code

在下面的示例中，我们将有两个网页

• Default.aspx 是将显示给最终用户的页面。
• DataGrid.aspx 将为 Default.aspx 页面提供内容，该页面将每 5 秒更新一次。

如前所述，该示例使用 Northwind 数据库，其连接字符串在 web.config 文件中提供

<appSettings>
<add key="DSN" value="server=localhost;Integrated Security=SSPI;database=Northwind" />
</appSettings>

业务逻辑层位于 App_Code\BLL 子文件夹中，包含 ProductsBLL.cs 类。它有一个方法 GetProducts()，该方法实际上从 Northwind 数据库的 Products 表中返回 CategoryId=1 的所有产品。

/// 

/// Summary description for ProductsBLL 

/// 
public class ProductsBLL 

{
    public static void GetProducts(DataSet ds) 
    { 
        string sqlString = 
            "SELECT ProductId, ProductName, QuantityPerUnit UnitPrice, " + 
            "UnitsInStock FROM Products WHERE CategoryId=1 order by ProductName"; 
        SqlHelper.FillDataset(SqlHelper.connection(), 
            CommandType.Text, sqlString, ds, new string[] { "Products" }); 
    } 
}

上述方法使用位于 App_Code\DAL 子文件夹中的数据访问层的 FillDataset 方法。它包含一个类 SqlHelper.cs，该类包含一组数据访问方法。SqlHelper.cs 类基于开源应用程序块数据访问类创建，并可成功用于访问 SQL 数据库中的数据。现在让我们考虑 DataGrid.aspx 网页。此页面包含 Label1 控件和 gvGrid GridView 控件，两者都通过 Page_Load 事件填充。DataView 控件使用 Products 数据集填充。Label1.Text 使用当前的日期/时间进行更新。

protected void Page_Load(object sender, EventArgs e) 
{ 
    DataSet ds = new DataSet(); 
        ProductsBLL.GetProducts(ds); 
    gvGrid.DataSource = ds; 
    gvGrid.DataBind(); 


    
    Label1.Text = "Units in Stock for: " + DateTime.Now.ToString(); 
}

Default.aspx 页面包含一个 <div> 部分，其 id="GridSection" 和一个 Input 按钮 btnGet，该按钮在 onclickevent 时调用 Ajax JavaScript 函数 doCall()。通过 AJAX 调用接收到的数据将放置在上述 <div> 元素内。

<input id="btnGet" type="button" value="Get Data" onclick="doCall()"/> 
.
.
.
<div id= "GridSection">

</div>

现在让我们考虑实际完成所有工作的 Ajax.js JavaScript。

// Creating the instance of the XmlHttpRequest 

// This is done differently for different browsers

// Branch for native XMLHttpRequest object 

var client=null; 
if (window.XMLHttpRequest) 
{ 
    client = new XMLHttpRequest(); 
} 

// Branch for IE/Windows ActiveX version 

else if (window.ActiveXObject) 
{ 
    client = new ActiveXObject("Microsoft.XMLHTTP"); 
} 

//Sending information to server 

function doCall() 
{ 
    try 
    { 
        //callBack; 

        var url="DataGrid.aspx" 
        url=url+'?d='+Date(); 
        client.open("GET", url); 
        client.onreadystatechange = callBack; 
        client.send(); 
    } 
    catch(ex) 
    { 
        alert(ex.message); 
    } 
 
    setTimeout('doCall()', 5000); //5 sec 

} 
 
//Waiting and processing server response 

function callBack(response) 
{ 
    try 
    { 
        if(client.readyState == 4 && client.status == 200) 
        { 
            xmlDocument = new ActiveXObject('Microsoft.XMLDOM'); 
            xmlDocument.async = false; 
 
            //The responseText is loaded into XML document 

            xmlDocument.loadXML(client.responseText); 
 
 
         //Get the 

        node vargridNode=xmlDocument.selectSingleNode('/html/body/form/div[@id="Grid"]');
 
            //Replace innerHTML of the default.aspx page with the response node.xml 

            document.getElementById("GridSection").innerHTML=gridNode.xml; 
        } 
    } 
    catch(ex) 
    { 
    alert(ex.message); 
    } 
}

要测试该示例，请打开 Default.aspx 页面并单击“获取数据”按钮。该页面将使用 Northwind 数据库的 Products 表中的产品数据填充 DataView。DataView 中的数据每 5 秒刷新一次。要测试此功能，请打开 Northwind 数据库的 Products 表，并为 CategoryId=1 的某个产品交换 UnitsInStock 字段数据。Default.aspx 网页上的数据将在 5 秒内更改，而无需回发。

关注点

使用上述技术，可以异步更新页面中具有不同数据的各种部分。这在处理需要用户在页面回发时或在某些特定时间间隔内刷新数据时非常有用。

历史

• 2007 年 12 月 3 日 -- 发布了原始版本