.NET Gridview 结合 AJAX 和 REST Web 服务

• 下载源文件 - 198.04 KB

引言

本文的目的是展示一个关于 REST Web 服务的简短示例，以及如何在典型的 Web 应用程序中使用 AJAX 和 JavaScript 来调用它。

为此，我们使用 Visual Studio 2010 创建一个典型的 Microsoft .NET GridView，以及一个支持 REST 的 WCF Web 服务。GridView 使用 Ajax 从该 Web 服务检索数据。我们填充 GridView，并通过单击 GridView 中每个项目的“详细信息”按钮，直接从浏览器使用 JavaScript 异步调用 REST Web 服务，从而填充详细信息面板。

Using the Code

在此解决方案中，我们可以找到以下组件：

• 第一个使用 SOAP 协议的 WCF Web 服务
• 第二个支持 REST 的 WCF Web 服务
• 一个简单的 Web 应用程序，其中包含一个由第一个支持 SOAP 的 WCF Web 服务填充的 GridView
• 最酷的功能：对 GridView 的增强，通过添加能够异步调用第二个支持 REST 的 Web 服务的客户端详细信息面板

接下来，我将解释解决方案中包含的每个项目，展示主要类和主要关注点。

项目 "WCFCustomerService"

服务 "CustomerService.svc"

这是一个经典的、支持 SOAP 的 WCF 服务，用于从数据库检索客户列表。在代码中，我使用了 "EntityFramework" 通过直接向外部公开 "Customers" 业务对象来检索数据。该对象由 Visual Studio 通过向项目中添加 "ADO.NET Entity Data Model" 自动创建。您可以在项目中找到它，名称为 "WcfDatabaseModel.edmx"。主要代码如下：

[AspNetCompatibilityRequirements(RequirementsMode = 
		AspNetCompatibilityRequirementsMode.Allowed)]
public class CustomersService : ICustomersService
{
    public List <CUSTOMERS> GetCustomersList()
    {
        WCFCustomerServiceDatabaseEntities entities = 
				new WCFCustomerServiceDatabaseEntities();
        return entities.CUSTOMERS.ToList<CUSTOMERS>();
    }
}    

服务 "RESTOrdersService.svc"

这是支持 REST 的 WCF 服务。此服务的代码显示了一些允许 WCF 使用 JSON 格式序列化响应的新关键字。主要代码如下：

[ServiceContract(Namespace = "WcfCustomerService")]
[AspNetCompatibilityRequirements(RequirementsMode = 
	AspNetCompatibilityRequirementsMode.Allowed)]
public class RESTOrdersService
{ 
    [OperationContract]
    [WebGet(ResponseFormat=WebMessageFormat.Json)]
    public OrdersJSON[] GetOrdersDetailsForCustomer(long idCustomer)
    {
        WCFCustomerServiceDatabaseEntities entities = 
		new WCFCustomerServiceDatabaseEntities();
        List<ORDERS> tmpList = entities.ORDERS.Where
		(x => x.FK_IDCUSTOMER == idCustomer).ToList<ORDERS>();
        
        List<OrdersJSON> ordersForCustomer = new List<OrdersJSON>();
        foreach (var item in tmpList)
        {
            ordersForCustomer.Add(new OrdersJSON(item.ID, item.DESCRIPTION));
        }
        
        return ordersForCustomer.ToArray<OrdersJSON>();
    } 
}    

检查 "[WebGet]" 属性。此属性允许 WCF 接受 REST 调用。在 Web 应用程序的代码中，我们将看到执行这些调用的方式（JavaScript 会为我们处理一切）。
另一个有趣的地方是使用 Linq 从实体模型中检索数据。如今，一个简单的 lambda 表达式内联查询取代了近期使用的各种代码行和对象（SqlCommand、SqlConnection、SQL 查询）。此查询会过滤出我们调用 Web 服务时提供的特定客户 ID 的所有订单。

OrdersJSON 对象

我们需要特别关注从 "GetOrdersDetailsForCustomer" 函数返回的对象。此函数返回 "OrdersJSON" 对象，该对象是我创建的一个对象。在此对象中，我使用特定的 [DataContract] 和 [DataMember] 标签标记了属性，这些属性允许 WCF 将对象序列化为 JSON 格式。这是我的对象的代码：

[DataContract]
public class OrdersJSON
{
    [DataMember]
    public long Id { get; set; }
    [DataMember]
    public string OrderDescription {get;set;}
    
    public OrdersJSON(long pId, string pOrderDescription) {
        Id = pId;
        OrderDescription = pOrderDescription;
    }
}    

关于 Web.config 文件

对于 web.config 文件，我想展示一些我们需要了解的特殊设置。要启用 REST 功能，web.config 中的 "behavior" 部分需要 "<enableWebScript>" 属性。这是我们使用此属性的部分：

<endpointBehaviors>
  <behavior name="WcfCustomerService.RESTOrdersServiceAspNetAjaxBehavior">
    <enableWebScript />
  </behavior>
</endpointBehaviors> 

但也要检查终结点的定义。绑定需要设置为 webHttpBinding 值。

<service name="WcfCustomerService.RESTOrdersService">
  <endpoint address="" behaviorConfiguration=
	"WcfCustomerService.RESTOrdersServiceAspNetAjaxBehavior"
          binding="webHttpBinding" contract="WcfCustomerService.RESTOrdersService" />
</service> 

Web 项目 "WebAppSampleGridview"

这是一个使用 Visual Studio 2010 创建的默认 ASP.NET 空项目。我添加了一个包含 GridView 的页面，以及对 WCF 服务 "CustomerService.cs" 的 ServiceReference。
要调用 REST Web 服务 ("RestOrdersService")，我们不需要添加任何 ServiceReference。我们需要修改 Web 应用程序的 "Web.config" 文件中的一些属性。调用将通过 JavaScript 完成。我将展示允许此调用的主要 JavaScript 代码片段和 ASP.NET 标记。您可以在 default.aspx 页面中找到它们。

首先要做的重要事情是向页面中的 ScriptManager 标记添加一个 ServiceReference 标记。此 ServiceReference 标记指定了 REST Web 服务的地址。

<asp:ScriptManager ID="ScriptManager1" runat="server" >
  <Services >
    <asp:ServiceReference Path="https://:1193/RESTOrdersService.svc"/ >
  </Services >
</asp:ScriptManager >    

此部分包含执行对 RESTOrdersService 调用的 JavaScript 代码。

    <script type="text/javascript">
    function buttonInvokeWebService(idCustomer, caller) 
    { 
    var service = new WcfCustomerService.RESTOrdersService(); 
    service.GetOrdersDetailsForCustomer(idCustomer, onSuccess, onFailure); 
    document.getElementById("detailPanel").style.visibility = "visible"; 
    return false; 
    }
    
    function onSuccess(result) {
        var myArrayJsonObjects = eval(result);
        document.getElementById("orderCount").innerHTML = myArrayJsonObjects.length;
        if (myArrayJsonObjects.length > 0)
            document.getElementById("orderDescription").innerHTML = 
			myArrayJsonObjects[0].OrderDescription
        else
            document.getElementById("orderDescription").innerHTML = "";
    }
    
    function onFailure(result) {
        context.innerText = "Error Invoking the Web Service...";
    }   
 </script>

函数 "buttonInvokeWebService" 是从 GridView 中的一个 button 调用的。要调用 RestOrdersService ，我们只需声明它并调用该函数。请注意，我们必须定义两个函数："onSuccess" 和 "onFailure"，它们包含从 REST 服务返回的结果并管理可能的错误。在此示例中，"onSuccess" 函数将结果放入一个名为 "orderDescription" 的元素中，并将其插入页面。该函数还会显示一个包含结果的面板，方法是将其可见性设置为 "visible"。

重要提示：本文的重点不是展示 JavaScript 的特殊效果。因此，这些函数中的代码非常粗糙：我更喜欢将重点放在如何管理 REST 调用上，而不是如何以漂亮的方式显示数据。

历史

• 2010 年 8 月 29 日 - 首次发布