AJAX.NET框架构建Lookup服务器控件

.net框架|ajax|服务器|架构|控件

一、 简介

  今天,AJAX成为软件界最流行的词藻之一;然而,这种思想并不是新的,只是由于某种原因,在去年下半年,它才变得流行起来。随着基于web的应用软件的不断发展,用户往往要求更丰富更快速的接口。而AJAX能极大地改进用户的web应用程序体验。

  对于我来说,AJAX是全新的。在一段时间以前,由于缺乏可试用的工具和现成的可用库,我读了一些文章才得到一些思想。然而最近,我发现了Ajax.NET-一个相当有力的支持异步回调的框架。

  在本文中,我将描述基于Ajax.NET创建查找控件的经验。为了构建一个查找控件,你需要具备:

  1. 一个服务器方法,它能够返回一个匹配记录的列表。

  2. JavaScript程序,用以处理回寄并且显示一个匹配记录的列表。

  3. 在ASPX/ASCX页面中具有一个输入字段。

  在此,我将不描述Ajax.NET的安装,因为它很简单,并且网上有很多的资源可供你参考。

  二、 服务器端部分

  这部分比较简单。我仅需要创建一个方法,它返回一个ArrayList的匹配记录并在该方法所在的位置注册一个类:

public class Main : Page{
 private void Page_Load(object sender, EventArgs e){
  Utility.RegisterTypeForAjax(typeof (Main));
 }
 [AjaxMethod()]
 public ArrayList GetSearchItems(string query){
  ArrayList items = GetRecords();
  ArrayList matchItems = new ArrayList();
  foreach (string item in items){
   if (item.ToLower().StartsWith(query.ToLower()))
    matchItems.Add(item);
  }
  return matchItems;
 }
 private ArrayList GetRecords(){
  ArrayList items = new ArrayList();
  items.Add("Ted");
  items.Add("Teddy");
  items.Add("Mark");
  items.Add("Alfred");
  return items;
 }
. . .

  该GetSearchItems方法取得所有记录(来自于任何源)的一个列表并且过滤那些用查询参数开头的记录。该查询是用户在输入字段输入的内容和过滤器。

  三、 客户端部分

  首先,我决定写一个很简单的JavaScript-它将显示一个DIV,并且找到的记录正好位于查询输入字段的下面。我认为这"接近"了目标,但是它要求选择下面的项之一。最简单的事情是把所有的项转到超链接并用正确的点击值来填充查询域。请看下面的代码:

<INPUT id=search type=text name=search runat="server"
autocomplete ="off">
<div id="list"></div>
autocomplete="off"是必需的,用于告诉浏览器不要显示该输入域的可能的值。否则,我们的控件将不工作。
function GetSearchItems_CallBack(response) {
 var div = document.getElementById("list");
 div.innerHTML = "";
 if (response.value != null && response.value.length > 0) {
  for (var i = 0; i < response.value.length; ++i){
   div.innerHTML += "<a href=\"javascript:Fill('" + response.value[i] + "');\">" +
response.value[i] + "</a><br />";
  }
 }

  JavaScript GetSearchItems_CallBack函数为onkeydown事件所调用。这可以在后台代码中完成,或者在*.aspx页面中实现。现在让我们使用后台代码方法。

private void Page_Load(object sender, EventArgs e){
 search.Attributes.Add("onkeydown","javascript:Main.GetSearchItems(this.value,GetSearchItems_CallBack);");
 Utility.RegisterTypeForAjax(typeof ( Main ));
}

  该结果看起来如下图所示:

  尽管这种情形最简单,但并不是很有用。在本例中,你只是简单地输入一些内容,然后点击出现的列表中的一个链接。然而,如果改进这个示例的话,它还需要实现一些较强的键盘支持;例如,应该能使用up/down键来进行列表导航,而使用回车键实现完成。
[1] [2]  下一页

时间: 2024-09-19 09:37:01

AJAX.NET框架构建Lookup服务器控件的相关文章

AJAX技术框架及开发工具_AJAX相关

常见的AJAX框架有: DWR - Web Remoting Buffalo - Web Remoting (based on prototype) prototype - JS OO library openrico - JS UI component (based on prototype) dojo - JS library and UI component qooxdoo - JS UI component (C/S Style) YUL - JS UI component 其中关于DW

AJAX技术框架及开发工具

常见的AJAX框架有: DWR - Web Remoting Buffalo - Web Remoting (based on prototype) prototype - JS OO library openrico - JS UI component (based on prototype) dojo - JS library and UI component qooxdoo - JS UI component (C/S Style) YUL - JS UI component 其中关于DW

使用jsp控制器servlet直接调用xfire框架构建的 WebService怎么不行?

问题描述 [size=14px]在MyEclipse8.5中,我新建了一个WebServiceProject项目用xfire框架构建了一个webService并发布成功,并且用VS2008C#可以调用.在MyEclipse新建一个WebProject项目,并导入Xfire的所有库,新建一个带main函数的java类如下所示:packageresourceOntology;importjava.net.URL;importorg.codehaus.xfire.client.Client;publi

使用Geneva框架构建安全令牌服务(STS)

本文基于 "Geneva" 框架的预发布版本撰写而成.所有信息均有可能发生变更. 本文将介绍以下内容: 使用 Geneva 框架实现安全令牌服务 联合安全性 声明转换 本文使用了以下技术: Windows Communication Foundation.ASP.NET.Geneva 框架 Microsoft 基于声明的访问 (CBA) 平台战略(代号为 "Geneva")包括 "Geneva" 框架."Geneva" 服务器

基于Dubbo框架构建分布式服务

Dubbo是Alibaba开源的分布式服务框架,我们可以非常容易地通过Dubbo来构建分布式服务,并根据自己实际业务应用场景来选择合适的集群容错模式,这个对于很多应用都是迫切希望的,只需要通过简单的配置就能够实现分布式服务调用,也就是说服务提供方(Provider)发布的服务可以天然就是集群服务,比如,在实时性要求很高的应用场景下,可能希望来自消费方(Consumer)的调用响应时间最短,只需要选择Dubbo的Forking Cluster模式配置,就可以对一个调用请求并行发送到多台对等的提供方

ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统之前端页面框架构建源码分享_实用技巧

开始,我们有了一系列的解决方案,我们将动手搭建新系统吧. 用户的体验已经需要越来越注重,这次我们是左右分栏,左边是系统菜单,右边是一个以tabs页组成的页面集合,每一个tab都可以单独刷新和关闭,因为他们会是一个iframe 工欲善其事必先利其器.需要用到以下工具. Visual Studio 2012 您可以安装MVC4 for vs2010用VS2010来开发,但是貌似你将不能使用EF5.0将会是EF4.4版本,但这没有多大的关系. MVC4将挂载在.NET Framework4.5上. 好

利用免费JS框架构建强大web接口界面

现今,随着web应用方面提供了日益丰富的免费工具.代码等,构建web应用已经变得越来越流行.一些资源已经被开发出来,并经过测试,所以你可以用来快速地增加应用特性.一个典型的例子是script.aculo.us(或者scriptaculous)网站,该网站提供了用于构建强大web应用的javascript库,重要的是这些资源都是免费的.本周,我们将带你对该网站和它提供的资源进行亲密接触. 它是什么? Scriptaculous是一种用于构建动态web 2.0接口的框架.它使用了另外一个称为prot

AJAX 验证框架13个_AJAX相关

一 ASP.NET AJAX Framework 1.ValidatorCallout 是ASP.NET AJAX Control Toolkit中的一员,老瓶装新酒,通过扩展的方式为ASP.NET的验证控件提供漂亮的弹出提示效果.缺点是:目前的版本还不能提供服务端Custom Validator的扩展. 同时,ValidatorCallout还支持自定义CSS样式,具体可参考官方页面上的"ValidatorCallout Theming" 一节,和这篇文章:http://www.im

简单的前端js+ajax 购物车框架(入门篇)_javascript技巧

今天在公司实在没有事做,突然就想到写下商城的购物车的前端框架,当然我这里只有购物车的增删改查,也许写的并不是那么完善,但最重要的是一个入门,也希望js达人给些建议,好让我更上一个台阶. HOHO~~~开始咯: Js: 复制代码 代码如下: //为了省事,就没写自己的js ajax了 用了jquery的,当然你也可以添加到jquery的扩展方法内,哈哈,我太懒了,所以就写这里了. var _$ = { AJAX: function (urlparm, d, beforecall, successc