AJAX 自动建议文本框用户控件

• 下载源代码 - 6.45 KB

引言

本文档介绍了如何开发一个启用 AJAX 的文本框，它作为一个自动建议文本框，使用回调事件处理程序。

在本文中，我创建了一个带有文本框的用户控件。当你在文本框中输入内容时，它将转到服务器端（数据库等）并根据你的文本框输入获取结果并在 div 中显示它。

使用代码

在本节中，我将解释如何创建自动建议文本框。

我首先创建一个带有文本框和 div 元素的用户控件。在文本框的 onkeyup 事件中，调用一个 JavaScript 函数。使用回调事件处理程序，它调用服务器端方法以根据文本框中输入的内容过滤结果。在用户控件服务器端，你需要添加代码从 DataSet 获取数据，并使用 ds.getxml() 方法将其转换为 XML 字符串。在客户端，XML 字符串使用 XSL 转换转换为 HTML 表格，转换后的数据在动态 div 标签中显示。

这是 ASP.NET 代码

<!--.ascx -->

<script type="text/javascript" src="Common.js"></script>
    
<table >
    <tr>
        <td>        
            <asp:TextBox ID="txtCust" runat="server" ></asp:TextBox>
            <div id="txtDiv" runat="server">
            </div>
        </td>
    </tr>
    <tr>
        <td>
        <div id="myDiv"></div>
            <asp:HiddenField ID="hdnType" runat="server" />
        </td>
     </tr>
     
</table>

这是代码隐藏文件

//.ascx.cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;
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;

public partial class CustomTextBox : System.Web.UI.UserControl, ICallbackEventHandler
{
    string callbackResult;
    public void SetClassType(string clstype)
    {
        hdnType.Value = clstype;
    }
   
    protected void Page_Load(object sender, EventArgs e)
    {
        txtCust.Attributes.Add("onkeyup", 
                "ShowMatchings('" + this.ClientID + "');");
        txtCust.Attributes.Add("onblur", "onBlur();"); 
        String cbReference = Page.ClientScript.GetCallbackEventReference(this, 
               "arg", "onCallbackComplete",null,true);
        String callbackScript = "function DoClientCallBack(arg)" + 
               "{ " + cbReference + ";}";        
        Page.ClientScript.RegisterClientScriptBlock(this.GetType(),
        "CallServer", callbackScript, true);
    }

    #region ICallbackEventHandler Members

    public string GetCallbackResult()
    {
        return callbackResult;
    }

    public void RaiseCallbackEvent(string eventArgument)
    {
        try
        {
            callbackResult = xmlResult(eventArgument);
        }
        catch (Exception e)
        {
            Trace.Write(e.Message);
            throw new Exception("Error checking quantity");
        }
    }
    string xmlResult(string Filter)
    {
        DataSet ds = new DataSet();       
        string[] str = Filter.Split('~');
        return "<?xml version='1.0' standalone='yes'?>" + 
               GetResult(resultDS(str[1]), str[0]) ;

    }
    DataSet resultDS(string clsType)
    {
        if (clsType == "City")
        {
            Cities ct = new Cities();
            return ct.GetData();
        }
        else
        {
            World wl = new World();
            return wl.GetData();
        }
    }
    string GetResult(DataSet ds,string Filter)
    {
        DataView dv = ds.Tables[0].DefaultView;
        dv.RowFilter = "Name like '" + Filter + "%'";
        ds.Tables.Clear();
        ds.Tables.Add(dv.ToTable());
        ds.AcceptChanges();
        return ds.GetXml() +"~_~"+ ds.Tables[0].Rows.Count;
    }
    #endregion
}

将用户控件添加到你的项目中，并将其引用添加到你的页面。