使用 WCF 和 Entity Framework 的 AutoCompleteExtender

Vinay Jade

4.80/5 (5投票s)

2014年1月10日

CPOL

4分钟阅读

41853

296

使用 WCF 的 AutoCompleteExtender

下载 AutocompleteExtender.zip - 17.9 KB

介绍

`AutoCompleteExtender` 是 AjaxControlToolkit 中一个可用的扩展，可以附加到任何 AjaxControlToolkit 控件。当用户在由 AutoCompleteExtender 扩展的 TextBox 中输入字符时，AutoCompleteExtender 会从数据库或指定的内存位置拉出与 TextBox 内容开头匹配的单词，并在弹出列表中显示。它使 ASP.NET `TextBox` 控件能够像搜索框一样工作。

目标

通常，ASP.NET Webservices 与 AutoCompleteExtender 一起使用来显示结果。WCF 为 Ajax 和 Silverlight 客户端提供了丰富的功能来构建服务，具有不同的属性和不同的宿主类。构建这类服务很容易，因为我们有 Visual Studio 2010 及更高版本提供的Ajax 启用 WCF 服务模板，它自动化了 WCF 服务开发的整个过程。在性能方面，WCF 服务比 Webservices 更快，并且我们可以使用像 JSON 这样的轻量级消息交换格式与 WCF 服务一起使用。因此，WCF 服务可以与 AutoCompleteExtender 一起使用，以产生快速高效的结果。

使用代码

使用 SQL Server Management Studio 在 SQL Server 数据库中创建名为 Names 的表来存储 Id（int 类型主键）和 Name（varchar 类型）

创建新网站项目
转到文件 -> 新建 -> 网站 -> 在“模板”下选择 Visual C#
-> 选择 ASP.NET 空网站模板 -> 点击确定

添加实体数据模型。
- 转到解决方案资源管理器 -> 右键单击网站 -> 转到添加 -> 转到添加新项 -> 选择 ADO.NET 实体数据模型 -> 点击确定
- 在实体数据模型向导中。
  选择从数据库生成选项 -> 点击下一步 -> 点击新连接 -> 在连接设置窗口中提供所需的字段 -> 点击确定 -> 选择“是，在连接字符串中包含敏感数据”单选按钮 -> 勾选“将实体连接字符串保存在 Web.config 中”，并在后面的文本框中输入MYDBEntities -> 点击下一步 -> 点击表 -> 添加 Names 表 -> 将模型命名空间命名为MYDBEntities -> 点击完成 -> 生成项目。
- 结果：- 此过程将在 App_Code 文件夹中生成 Model.context.cs 和 Model.cs 类。
  上下文类：- 使我们能够使用 DbSet 类对表执行 CRUD 操作。
  
  模型类：- 包含来自数据库的 Names 实体，该实体已转换为类。
注意：-

-有时不会创建 Model.context.cs 和 Model.cs 类。在这种情况下，请遵循以下故障排除过程
右键单击 Model.context.tt 和 Model.tt -> 运行自定义工具

这将生成 App_Code 文件夹中的 Model.context.cs 和 Model.cs 类。

-检查 web.config 文件中的连接字符串。如果未添加，请在 Configuration 标签中按如下方式添加connectionString
```
<connectionStrings>
 <add name="MYDBEntities" connectionString="metadata=res://*/App_Code.Model.csdl|res://*/App_Code.Model.ssdl|res://*/App_Code.Model.msl;provider=System.Data.SqlClient;provider connection string=&quot;data source=.;initial catalog=MYDB;user id=sa;password=123;MultipleActiveResultSets=True;App=EntityFramework&quot;" providerName="System.Data.EntityClient" />
</connectionStrings>
```

准备 Ajax 启用的 WCF 服务。
- 转到解决方案资源管理器 -> 右键单击网站 -> 转到添加 -> 转到添加新模板 -> 选择 Ajax 启用的 WCF 服务模板 -> 点击确定。
  
  结果：-
  -一个常规的 Service.svc 文件已添加到 App_Code。
  
  -没有接口，只有类 Service.cs。ServiceContract 直接为类编写。
  
  -在 web.config 中，带有 webHttpBinding 端点和 enableWebScript 行为
- 在 Service.cs 文件中，按照需要编写 OperationContract。在本例中，Service 类编写如下。
```
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service
{
    [OperationContract]                                                            
   //Specifying message exchange format is JSON 
    [WebInvoke(ResponseFormat=WebMessageFormat.Json)] 
    public List<string> GetNames(string prefixText)
    {
        MYDBEntities obj=new MYDBEntities ();
        var x = from n in obj.names
                where n.name.Substring(0,prefixText.Length).ToLower()==prefixText.ToLower()
                select n;
        List<string> name = new List<string> ();
        foreach (var item in x)
        {
            name.Add(item.name.ToString());
        }
        return name;
    }
}
```
  -将 WebInvoke 属性的 ResponseFormat 参数指定为 WebMessageFormat.JSON，以将消息交换格式指定为 JSON。
  
  -方法名 GetNames 可以替换为您选择的名称，但返回类型以及参数名称和类型必须完全匹配（包括大小写）。
  
  -GetNames 方法是一个返回值方法，它返回 Names 表中与 prefixText 参数包含的字符匹配的名称列表。
注意：-
由于需要元数据，因此无法测试上述服务。要测试此服务，请添加一个带有 mexHttpBinding 的端点。

假设 AjaxControlToolKit.dll 已添加到项目中，并在 system.web 标签中的 web.config 文件中注册，如下所示

<pages>
   <controls>
<add tagPrefix="ajaxToolkit" assembly="AjaxControlToolkit" namespace="AjaxControlToolkit"/>
   </controls>
</pages>

在配置标签中添加一个 appSettings 标签，如下所示，将 UnobtrusiveValidatonMode 设置为 false

<appSettings>
    <add key="ValidationSettings:UnobtrusiveValidationMode" value="none"/>
</appSettings>

向网站项目添加ASP.NET 空网站模板，并将其命名为 Deafault.aspx。在 Default.aspx 的源代码视图中，写入以下代码。

在 head 标签中，在 style 标签中添加 comletionList、item 和itemHighLight CSS 类

.completionList {
            padding:0px;
            margin:0px;
            color:black;
            overflow:auto;
            text-align:left;
            border:2px solid lightskyblue;
            list-style-type:none;
            cursor:default;
            height:200px;
        }                                                                     
.item { 
            height: 17px; 
            cursor:pointer; 
      }
        
.itemHighLight{   
            color:White; 
            background-color:lightskyblue;
            cursor:pointer; 
              }

添加上述 CSS 类是为了与 AutoCompleteExtender 的 CompletionListCssClass、CompletionListItemCssClass 和 CompletionListHighlightedItemCssClass 属性一起使用。它将在显示搜索结果时的弹出列表中应用。

现在，在 Default.aspx 页面的 form 标签中。添加一个 TextBox 和 AutoCompleteExtender，如下所示

<form id="form1" runat="server">
 <ajaxToolkit:ToolkitScriptManager runat="server"></ajaxToolkit:ToolkitScriptManager>
    <div>
    <b>Enter Name:</b>&nbsp;<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
    <ajaxToolkit:AutoCompleteExtender ID="ace1" TargetControlID="txtName" runat="server" ServiceMethod="GetNames" ServicePath="Service.svc" EnableCaching="true" MinimumPrefixLength="1" CompletionListCssClass="completionList" CompletionListItemCssClass="item" CompletionListHighlightedItemCssClass="itemHighLight"></ajaxToolkit:AutoCompleteExtender>
    </div> 
</form>

本示例中使用的 AutoCompleteExtender 属性如下：-

属性	描述
`TargetControlID`	用户键入内容的 TextBox 控件应自动填充。
`ServiceMethod`	要调用的 WCF 服务方法。
`ServicePath`	扩展程序用于生成结果的 WCF 服务的路径。
`MinimumPrefixLength`	在从 WCF 服务获取建议之前必须输入的最小字符数。
`CompletionInterval`	时间（以毫秒为单位）。每个间隔后，AutoCompleteExtender 从 WCF Web 服务获取建议。
`EnableCaching`	指定是否启用客户端缓存
`CompletionListCssClass`	将用于设置完成列表布局样式的 CSS 类。
`CompletionListItemCssClass`	将用于设置自动完成列表中各项样式的 CSS 类。
`CompletionListHighlightedItemCssClass`	将用于设置完成列表中突出显示项样式的 CSS 类。

运行网站以检查以下输出

关注点

使用 Ajax 启用的 WCF 服务测试 AutoCompleteExtender。
使用 Entity Framework 从数据库获取记录。