asp .NET 用Ajax技术实现文本框提示功能---huangkai的博客
该实例是我现在所作项目中的一个小功能点，项目由MVC三层框架实现
该功能点主要是由Ajax技术实现
调用逻辑 .asp-->.asp.cs-->BLL-->DAL
--------------------------------------------------------------------------------------------------
第一部分页面project_test.asp的代码：
<%@ Page Language="C#" MasterPageFile="~/Main.Master" CodeBehind="project_test.aspx.cs" Inherits="WebFSIS.project_test" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" runat="server"
contentplaceholderid="ContentPlaceHolder1">
<script language="javascript" type="text/javascript">
<!--
var searchReq = createReq();
//创建XMLHttpRequest的第二种方法
function createReq() {
var httpReq;
if (window.XMLHttpRequest) {
httpReq = new XMLHttpRequest();
if (httpReq.overrideMimeType) {
httpReq.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject) {
try {
httpReq = new ActiveXObject('Msxml2.XMLHTTP');
}
catch (e) {
try {
httpReq = new ActiveXObject('Microsoft.XMLHTTP');
}
catch (e) {
}
}
}
return httpReq;
}
//发送HTTP请求，当输入框的内容变化时，会调用该函数
function searchSuggest() {
var str = escape(document.getElementByIdx_x_x_x_x_x("txtSearch").value);
if (Trim(str) != "") {
searchReq.open("get", "project_test.aspx?searchText=" + str, true);
searchReq.onreadystatechange = handleSearchSuggest;
searchReq.send(null);
} else {
tbblur();
}
}
//当 onreadystatechange 值变化时，会调用该函数
//注意 searchSuggest()中的这一句searchReq.onreadystatechange = handleSearchSuggest;
function handleSearchSuggest() {
if (searchReq.readyState == 4) {
if (searchReq.status == 200) {
var suggestText = document.getElementByIdx_x_x_x_x_x("search_suggest");
var sourceText = searchReq.responseText.split("\n");
if (sourceText.length > 1) {
suggestText.style.display = "";
suggestText.innerHTML = "";
for (var i = 0; i < sourceText.length - 1; i++) {
var s = '<div onmouseover="javascript:suggestOver(this);"';
s += ' onmouseout="javascript:suggestOut(this);" ';
s += ' onclick="javascript:setSearch(this.innerHTML);" ';
s += ' class="suggest_link">' + sourceText[i] + '</div>';
suggestText.innerHTML += s;
}
}
else {
suggestText.style.display = "none";
}
}
}
}
function suggestOver(div_value) {
div_value.className = "suggest_link_over";
}
function suggestOut(div_value) {
div_value.className = "suggest_link";
}
function setSearch(obj) {
document.getElementByIdx_x_x_x_x_x("txtSearch").value = obj;
var div = document.getElementByIdx_x_x_x_x_x("search_suggest");
div.innerHTML = "";
div.style.display = "none";
var id = document.getElementByIdx_x_x_x_x_x("txtSearch").value;
FirstTest(id);
}
function tbblur() {
var div = document.getElementByIdx_x_x_x_x_x("search_suggest");
//div.innerHTML = "";
div.style.display = "none";
}
function Trim(str) {
return str.replace(/^\s*|\s*$/g, "");
}
function FirstTest(strid) {
var id = strid;
if (Trim(id)!="") {
}
}
//-->
</script>
<style type="text/css" media="screen">
body
{
font: 11pxarial;
}
.suggest_link
{
background-color: #FFFFFF;
padding: 2px6px2px6px;
border:1 solid black;
}
.suggest_link_over
{
background-color: #E8F2FE;
padding: 2px6px2px6px;
}
#search_suggest
{
position: absolute;
background-color: #FFFFFF;
text-align: left;
width:130px;
top: 219px;
left: 607px;
}
</style>
<div style="width: 500px;">
<table align="left">
<tr>
<td >
<form id="frm" action="">
<asp:Label ID="LabeltxtSearch" runat="server" Text="编号"></asp:Label>
<input type="text" name="txtSearch" id="txtSearch" onkeyup="searchSuggest();" />
<br />
<div id="search_suggest" style="display:none" >
</div>
</form>
</td>
</tr>
</table>
</div>
</asp:Content>
-------------------------------------------------------------------------------------------------
第二部分 project_test.asp.cs代码：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebFSIS
{
public partial class project_test : System.Web.UI.Page
{
BLL.ProjectDetection bll = new BLL.ProjectDetection();
Model.ProjectDetection model = new Model.ProjectDetection();
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["searchText"] != null)
{
if (Request.QueryString["searchText"].ToString().Trim().Length > 0)
{
string name= Request.QueryString["searchText"].ToString().Trim();
Response.Clear();
Response.Write(bll.GetNames(name));
Response.Flush();
Response.End();
}
}
}
}
}
--------------------------------------------------------------------------------------------------
第三部分 BLL层代码：
public string GetNames(string name) {
return dal.GetNames(name);
}
--------------------------------------------------------------------------------------------------
第四部分 DAL层代码：
public string GetNames(string ProjectName)
{
StringBuilder strSql = new StringBuilder();
strSql.Append("SELECT TOP(10) detectionName FROM DetectionItems");
strSql.Append(" where detectionName like '" + ProjectName + "%'");
DataSet ds = DbHelperSQL.Query(strSql.ToString());
string returnText = "";
if (ds.Tables[0].Rows.Count > 0)
{
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
returnText += ds.Tables[0].Rows[i]["detectionName"].ToString() + "\n";
}
return returnText;
}
else
{
return null;
}
}
