最近学习Ajax 看了 《Ajax与.NET 2.0高级程序设计》觉得Ajax对于提高用户体验还真不错，不过假如客户端禁用了JS，那我们只能说用户就少体验我们的设计
那样而言，Ajax只为了提高用户体验吗？对于一些正常操作我们要不要用。。。。。
诶。自己太菜了，很多东西都不明白。还是进入正题吧，现在我们就开始Ajax个得意的路程咯。呵呵
看看效果先
1.首先定义好用到的样式先：
<style type="text/css">
.mouseOut{
background: #C1D9F3;
color: #000;
}
.mouseOver{
background: #fff; color: #0000000;cursor: pointer;
150px;
}
.Searcg{ position:relative; } /*相对定位*/
</style>
2.然后到用到的JS
<script type="text/javascript">
var ClientID;
//显示结果DIV
function ShowDiv(divid)
{
if (document.layers) document.layers[divid].visibility="show";
else document.getElementById(divid).style.visibility="visible";
}
//隐藏结果DIV
function HideDiv(divid)
{
if (document.layers) document.layers[divid].visibility="hide";
else document.getElementById(divid).style.visibility="hidden";
}
function BodyLoad()
{
//加载的时候隐藏结果的DIV
HideDiv(ClientID + "searchresults");
// 焦点设置到输入框
var findtextbox = document.getElementById(ClientID + "keyword");
findtextbox.focus();
}
function ClearResults()
{
// 删除表格中已有在行,清空DIV中的数据
var resultsdiv = document.getElementById(ClientID + "searchresults");
var counter = resultsdiv.childNodes.length;
for (var i = counter -1; i >= 0; i--)
{
resultsdiv.removeChild(resultsdiv.childNodes[i]);
}
}
//主要....
function LoadResults(searchterm)
{
if (searchterm.length == 0)
{
// 如果输入框为空，将从结果表中复制所有的行
ClearResults();
HideDiv(ClientID + "searchresults");
return;
}
// 从服务器取得结果，这是我们实际的Ajax的调用
Anthem_InvokeControlMethod(
"<%= ClientID %>",
'RetrieveRows',
[searchterm],
LoadResultsCallback);
// RetrieveRows 为在C#里的方法; [searchterm] 为RetrieveRows 中的参数 ; LoadResultsCallback 为当执行完RetrieveRows方法后要执行的JS方法同时接受其查找数据的返回值..本例子为DataTable；
}
//主要..
function LoadResultsCallback(result)
{
// XmlHttpRequest将返回到这个函数
ShowDiv(ClientID + "searchresults");
ClearResults();
//来自AJAX调用的回调结果，我们将返回的DataTable 赋值给items变量
var items = result.value;
var count = items.Rows.length;
// 我们在DOM中创建表格
var divResults = document.getElementById(ClientID + "searchresults");
var tblTable = document.createElement("table");
var tablebody = document.createElement("tbody");
var tablerow, tablecell, tablenode;
// 在DataTable的每一行上循环取出items 里面我们查询到的结果
for (var i = 0; i < count; i++)
{
var currenttext = items.Rows[i].AdminName; //这是我们查询返回的字段名，不能错“AdminName”
// 创建表格行并且添加到表格中
tablerow = document.createElement("tr");
tablecell = document.createElement("td");
// 设置表格属性也就是我们刚刚前面设置的样式，鼠标经过样式
tablecell.onmouseover = function(){this.className='mouseOver';};
tablecell.onmouseout = function(){this.className='mouseOut';};
tablecell.setAttribute("border", "0");
tablecell.onclick = function(){ReplaceInput(this);}; //为表格添加单击事件，当用户单击的时候就把结果放到文本框中...
tablenode = document.createTextNode(currenttext);
tablecell.appendChild(tablenode);
tablerow.appendChild(tablecell);
tablebody.appendChild(tablerow);
}
tblTable.appendChild(tablebody);
divResults.appendChild(tblTable);
}
function ReplaceInput(tablecell)
{
//具体对刚刚为单元格的单击事件，操作，就是替换输入框的值和选择的值
var inputbox = document.getElementById(ClientID + "keyword");
inputbox.value = tablecell.firstChild.nodeValue;
ClearResults();
HideDiv(ClientID + "searchresults");
}
</script>
3.自己定义控件的代码. ucSuggestControl.ascx ：
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ucSuggestControl.ascx.cs" Inherits="ucSuggestControl" %>
<div class="Searcg">
<input name="enployUnitName" id="enployUnitName" runat="server" Width="100px" onkeyup="LoadResults(this.value)"/>
<div align="left" class="box" id="searchresults" runat="server" style=" position:absolute;top:25px;left:0px; z-index:25;WIDTH:150px;BACKGROUND-COLOR:#C1D9F3 ;">
</div> <!-- position:absolute;主要是相对于 “Searcg”的绝对定位，不然显示结果多了会影响到div下的内容..-->
</div>
4.ucSuggestControl后台的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;
using System.Data.SqlClient;
public partial class ucSuggestControl : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
Anthem.Manager.Register(this); //注册
}
[Anthem.Method]
public DataTable RetrieveRows(string searchterm)
{
SqlConnection conn = new SqlConnection("Data Source=(local);Initial Catalog=Sell;Integrated Security=SSPI");
DataTable dtReturn = new DataTable();
conn.Open();
SqlCommand cmd = new SqlCommand("Select Top 10 AdminName from TBL_AdminInfo where AdminName like @searchterm Order By AdminName", conn);
SqlParameter param = new SqlParameter();
param.ParameterName = "@searchterm";
searchterm.Trim().Replace("'", "''");
searchterm += "%";
param.Value = searchterm;
cmd.Parameters.Add(param);
SqlDataAdapter adpt = new SqlDataAdapter(cmd);
adpt.Fill(dtReturn);
conn.Close();
return dtReturn;
}
//因为用户控件受到ClientID 前缀引入的影响，我们必修考虑何时调用服务端函数的问题 Anthem库将抗逆性内嵌的ClientID 为一个重载的参数，允许恰当的导航机制的传输
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
string jcode = "<script language=\"javascript\" type=\"text/javascript\">ClientID = '" + this.ClientID + "_" + "';BodyLoad();</script>";
Page.ClientScript.RegisterStartupScript(typeof(Page),"suggest_control", jcode);
}
}
5.最后是引用页面了
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestingForm.aspx.cs" Inherits="_Default" %>
<%@ Register Src="ucSuggestControl.ascx" TagName="ucSuggestControl" TagPrefix="uc1" %>
<!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>cs</title>
</head>
<body>
<form id="form1" runat="server">
<table border="1">
<tbody>
<tr>
<td valign="top">
<strong>h一个简单的例子</strong>
</td>
<td valign="top">
<uc1:ucSuggestControl id="UcSuggestControl1" runat="server">
</uc1:ucSuggestControl></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
最后的话还有可以拓展一下，就是把查询到的结果放到一个地方，就不用每次当文本框值改变就去读出数据库...这正在想，有哪位朋友希望能指点一下偶这菜鸟..
.
....例子下载...