首先来看看效果
1.项目中添加AjaxTextBox.dll的相关引用
2.Web.Config配置文件
<?xml version="1.0"?>
<!--
Note: As an alternative to hand editing this file you can use the
web admin tool to configure settings for your application. Use
the Website->Asp.Net Configuration option in Visual Studio.
A full list of settings and comments can be found in
machine.config.comments usually located in
\Windows\Microsoft.Net\Framework\v2.x\Config
-->
<configuration>
<appSettings/>
<connectionStrings/>
<system.web>
<!-- AjaxPro.dll -->
<httpHandlers>
<add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro"/>
</httpHandlers>
<!--
Set compilation debug="true" to insert debugging
symbols into the compiled page. Because this
affects performance, set this value to true only
during development.
-->
<compilation debug="true" targetFramework="4.0"/>
<!--
The <authentication> section enables configuration
of the security authentication mode used by
ASP.NET to identify an incoming user.
-->
<authentication mode="Windows"/>
<!--
The <customErrors> section enables configuration
of what to do if/when an unhandled error occurs
during the execution of a request. Specifically,
it enables developers to configure html error pages
to be displayed in place of a error stack trace.
<customErrors mode="RemoteOnly" defaultRedirect="GenericErrorPage.htm">
<error statusCode="403" redirect="NoAccess.htm" />
<error statusCode="404" redirect="FileNotFound.htm" />
</customErrors>
-->
</system.web>
</configuration>
3.业务数据处理AjaxUtility.cs
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Collections;
using AjaxPro;
/// <summary>
/// Summary description for AjaxUtility
/// </summary>
public class AjaxUtility
{
public AjaxUtility()
{
//
// TODO: Add constructor logic here
//
}
[AjaxMethod()]
public static ArrayList GetSearchItems(string query, string type)
{
ArrayList items = new ArrayList();
//可根据 query 、type 参数进行条件查询，获得不同结果返回
/*
* eg:所有记录为：111111、123123、123456
* 数据库查询: LIKE '%...'
*/
items.Add("111111 111111");
items.Add("123123 123123");
items.Add("123456 123456");
return items;
}
[AjaxMethod()]
public static DataTable GetCustomerInfo(string customerCode)
{
DataTable dt = new DataTable();
dt.Columns.Add("name");
dt.Columns.Add("age");
dt.Columns.Add("address");
DataRow row = null;
if (customerCode.Trim() == "123123")
{
row = dt.NewRow();
row["name"] = "ZhangSan";
row["age"] = "25";
row["address"] = "SH";
dt.Rows.Add(row);
}
else
{
row = dt.NewRow();
row["name"] = "WangWu";
row["age"] = "27";
row["address"] = "BJ";
dt.Rows.Add(row);
}
return dt;
}
}
4.Default.aspx页面代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxTextBox" Namespace="AjaxTextBox" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Ajax TextBox Page</title>
<script language="javascript" type="text/javascript">
function showValue()
{
var result = AjaxUtility.GetCustomerInfo(document.getElementById('<%= txtCustomerCode.ClientID %>').value);
if (result.value != null)
{
var dt = result.value;
if(dt != null && typeof(dt) == "object" && dt.Rows.length > 0)
{
for(var i=0; i<dt.Rows.length; i++)
{
document.getElementById('<%= txtName.ClientID %>').value = dt.Rows[i].name;
document.getElementById('<%= txtAge.ClientID %>').value = dt.Rows[i].age;
document.getElementById('<%= txtAddress.ClientID %>').value = dt.Rows[i].address != '[object Object]' ? dt.Rows[i].age : '';
}
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<cc1:AjaxTextBox ID="txtCustomerCode" runat="server" BackgroundColor="#C0DCC0"
QueryID="txtCustomerCode" DivBorder="1px solid #000000" DivPadding="2px" DivFont="Arial"
HighlightColor="#67AAE7" CallBackFunction="AjaxUtility.GetSearchItems" ScriptFile="js/AjaxTextBox.js"
DivWidth="450px" CssClass="txtInput">
</cc1:AjaxTextBox>
<div style="display:none">
<asp:TextBox ID="txtCustomerValue" onpropertychange="showValue();" Width="50%" runat="server"></asp:TextBox>
</div>
<br />
<br /><br />
<br /><br />
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:TextBox ID="txtAge" runat="server"></asp:TextBox>
<asp:TextBox ID="txtAddress" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
5.Default.aspx.cx文件代码
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using AjaxPro;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//使用 AjaxPro.dll & AjaxTextBox.dll
Utility.RegisterTypeForAjax(typeof(AjaxUtility));
string fuction = "InitQueryCode('" + txtCustomerCode.ClientID + "', '" + txtCustomerValue.ClientID + "')";
txtCustomerCode.Attributes.Add("onkeyup", fuction);
}
}