博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用ASP.NET Atlas AutoComplete Behavior或AutoComplete Extender实现自动完成功能(下)
阅读量:6711 次
发布时间:2019-06-25

本文共 4115 字,大约阅读时间需要 13 分钟。

作者:Dflying Chen ( )
请同时参考:

让我们通过一个实例来测试上述两种方法:

首先,让我们建立一个词库,提供自动完成的列表。这个词库Copy自Atlas的官方文档示例,是一些.NET的常见术语。将其存为WordData.txt并置于App_Data目录下。

ContractedBlock.gif
ExpandedBlockStart.gif
Word List
None.gifaccess control list (ACL)
None.gifADO.NET
None.gifaggregate event
None.gifalpha channel
None.gifanchoring
None.gifantialiasing
None.gifapplication base
None.gifapplication domain (AppDomain)
None.gifapplication manifest
None.gifapplication state
None.gifASP.NET
None.gifASP.NET application services database
None.gifASP.NET mobile controls
None.gifASP.NET mobile Web Forms
None.gifASP.NET page
None.gifASP.NET server control
None.gifASP.NET Web application
None.gifassembly
None.gifassembly cache
None.gifassembly manifest
None.gifassembly metadata
None.gifassertion (Assert)
None.gifassociation class
None.gifASSOCIATORS OF
None.gifasynchronous method
None.gifattribute
None.gifauthentication
None.gifauthorization
None.gifautopostback
None.gifbounds
None.gifboxing
None.gifC#
None.gifcard
None.gifcatalog
None.gifCCW
None.gifchevron
None.gifchrome
None.gifcHTML
None.gifCIM
None.gifCIM Object Manager
None.gifCIM schema
None.gifclass
None.gifclient area
None.gifclient coordinates
None.gifclip
None.gifclosed generic type
None.gifCLR
None.gifCLS
None.gifCLS-compliant
None.gifcode access security
None.gifcode-behind class
None.gifcode-behind file
None.gifcode-behind page
None.gifCOM callable wrapper (CCW)
None.gifCOM interop
None.gifCommon Information Model (CIM)
None.gifcommon language runtime
None.gifcommon language runtime host
None.gifCommon Language Specification (CLS)
None.gifcommon object file format (COFF)
None.gifcommon type system (CTS)
None.gifcomparison evaluator
None.gifcomposite control
None.gifconfiguration file
None.gifconnection
None.gifconnection point
None.gifconstraint
None.gifconstructed generic type
None.gifconstructed type
None.gifconsumer
None.gifcontainer
None.gifcontainer control
None.gifcontent page
None.gifcontext
None.gifcontext property
None.gifcontract
None.gifcontrol state
None.gifcross-page posting
None.gifCTS
None.gifcustom attribute (Attribute)
None.gifcustom control

然后创建一个Web Service用来提供建议列表,其中逻辑不多讲了,大概是读入上面的词库并根据输入找出相关的词汇,注意一下GetWordList方法的签名。

ContractedBlock.gif
ExpandedBlockStart.gif
Suggestion Web Service Code
None.gifusing System;
None.gif
using System.IO;
None.gif
using System.Web;
None.gif
using System.Collections;
None.gif
using System.Collections.Generic;
None.gif
using System.Threading;
None.gif
using System.Web.Services;
None.gif
using System.Web.Services.Protocols;
None.gif
using System.Xml.Serialization;
None.gif
None.gif[WebService(Namespace 
= "http://tempuri.org/")]
None.gif[WebServiceBinding(ConformsTo 
= WsiProfiles.BasicProfile1_1)]
None.gif
public class AutoCompleteService : System.Web.Services.WebService
ExpandedBlockStart.gifContractedBlock.gif
dot.gif{
InBlock.gif    
private static string[] autoCompleteWordList = null;
InBlock.gif
InBlock.gif    [WebMethod]
InBlock.gif    
public String[] GetWordList(string prefixText, int count)
ExpandedSubBlockStart.gifContractedSubBlock.gif    
dot.gif{
InBlock.gif        
// init the suggest list
InBlock.gif
        if (autoCompleteWordList == null)
ExpandedSubBlockStart.gifContractedSubBlock.gif        
dot.gif{
InBlock.gif            
string[] temp = File.ReadAllLines(Server.MapPath("~/App_Data/WordData.txt"));
InBlock.gif            Array.Sort(temp, 
new CaseInsensitiveComparer()); // sort for binary search
InBlock.gif
            autoCompleteWordList = temp;
ExpandedSubBlockEnd.gif        }
InBlock.gif
InBlock.gif        
int index = Array.BinarySearch(autoCompleteWordList, prefixText, new CaseInsensitiveComparer());
InBlock.gif        
if (index < 0)
ExpandedSubBlockStart.gifContractedSubBlock.gif        
dot.gif{
InBlock.gif            index 
= ~index;
ExpandedSubBlockEnd.gif        }
InBlock.gif
InBlock.gif        
int matchingCount;
InBlock.gif        
for (matchingCount = 0; matchingCount < count && index + matchingCount < autoCompleteWordList.Length; matchingCount++)
ExpandedSubBlockStart.gifContractedSubBlock.gif        
dot.gif{
InBlock.gif            
if (!autoCompleteWordList[index + matchingCount].StartsWith(prefixText, StringComparison.CurrentCultureIgnoreCase))
InBlock.gif                
break;
ExpandedSubBlockEnd.gif        }
InBlock.gif
InBlock.gif        String[] returnValue 
= new string[matchingCount];
InBlock.gif        
if (matchingCount > 0)
ExpandedSubBlockStart.gifContractedSubBlock.gif        
dot.gif{
InBlock.gif            Array.Copy(autoCompleteWordList, index, returnValue, 
0, matchingCount);
ExpandedSubBlockEnd.gif        }
InBlock.gif        
return returnValue;
ExpandedSubBlockEnd.gif    }
ExpandedBlockEnd.gif}

Web Service建立好之后您可以直接测试一下,如果一切正确,我们就继续编写Atlas页面。

首先,无论使用客户端AutoComplete Behavior还是服务器端AutoComplete Extender,一个ScriptManager都是必不可少的:

None.gif
<
atlas:ScriptManager 
runat
="server"
 ID
="scriptManager"
 
/>

如果使用客户端AutoComplete Behavior,首先需要书写一个HTML input:

None.gif
<
input 
id
="clientTextBox"
 type
="text"
 style
="width: 400px;"
 
/>

然后,相应的书写Atlas Script。请小心书写毕竟这里基本没有强大的IDE的支持。

None.gif
<
page 
xmlns:script
="http://schemas.microsoft.com/xml-script/2005"
>
None.gif   
<
components
>
None.gif       
<
textBox 
id
="clientTextBox"
>
None.gif           
<
behaviors
>
None.gif               
<
autoComplete 
None.gif                  
serviceURL
="AutoCompleteService.asmx"
None.gif                  serviceMethod
="GetWordList"
None.gif                  minimumPrefixLength
="2"
None.gif                  completionSetCount
="10"
None.gif                  completionInterval
="500"
 
/>
None.gif           
</
behaviors
>
None.gif       
</
textBox
>
None.gif   
</
components
>
None.gif
</
page
>

在使用服务器端AutoComplete Extender时,一切都非常简单,我们只需要添加一个服务器端TextBox和一个AutoComplete Extender即可:

None.gif
<
asp:TextBox 
ID
="serverTextbox"
 runat
="server"
 Width
="400px"
 
/>
None.gif
<
atlas:AutoCompleteExtender 
ID
="serverCompleteExtender"
 runat
="server"
>
None.gif    
<
atlas:AutoCompleteProperties 
Enabled
="true"
 MinimumPrefixLength
="2"
 TargetControlID
="serverTextbox"
None.gif        ServiceMethod
="GetWordList"
 ServicePath
="AutoCompleteService.asmx"
 
/>
None.gif
</
atlas:AutoCompleteExtender
>

至此为止,大功告成,让我们在浏览器中测试一下:

客户端AutoComplete Behavior:

autocomplete1.JPG

服务器端AutoComplete Extender:

autocomplete2.JPG

本实例程序的源代码可以在此下载:
你可能感兴趣的文章
SpringMVC上传图片总结(1)---常规方法进行图片上传,使用了MultipartFile、MultipartHttpServletRequest...
查看>>
小米:开源不仅要站在巨人的肩膀上,还要为巨人指方向
查看>>
百度启动高管退休计划,总裁张亚勤今年十月退休
查看>>
SpringBoot启动时的Banner设置
查看>>
xming + putty 搭建远程图形化ssh访问ubuntu 14.04
查看>>
【Sigma敏捷版系列文章】从运行流程和list-watch看kubernetes系统的设计理念
查看>>
两列布局——但只用右浮动
查看>>
GNOME 网页浏览器 Epiphany 将要进行 5 项改进
查看>>
今年CES最大亮点:智能语音助手正成为新趋势
查看>>
Windows Mysql Server重启, log-bin路径配置
查看>>
刘剑锋:友云采助力企业数字化采购的新发展
查看>>
Rainbond 5.0.4 发布,做最好用的云应用操作系统
查看>>
亚马逊宣布与西云数据达成合作,旨在进一步扩大中国业务
查看>>
java nio的基础--缓冲区
查看>>
负载均衡沙龙活动第二期现场问答汇集
查看>>
GBDT原理及利用GBDT构造新的特征-Python实现
查看>>
Android帧缓冲区(Frame Buffer)硬件抽象层(HAL)模块Gralloc的实现原理分析(10)...
查看>>
【Xamarin.Forms】在XAML中传递参数
查看>>
关于数据仓库 — 总体工具介绍
查看>>
最大的错误是不敢犯错
查看>>