Ajax实现DataGrid/DataList动态ToolTip

核心提示：1.建立一aspx页面，html代码2.cs代码using System.Data.SqlClient;using System.IO;PRotected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { BindData(

1.建立一aspx页面，html代码2.cs代码

using System.Data.SqlClient;
using System.IO;
PRotected void Page_Load(object sender, EventArgs e)
　  {
　　　  if (!Page.IsPostBack)
　　　  {
　　　　　  BindData();
　　　　　 
　　　  }
　　　  if (ID != "")
　　　  {
　　　　　  GetDescriptionByID(ID);
　　　  }
　　　 
　  }

　  property#region property
　  private string ID
　  {
　　　  get
　　　  {
　　　　　  if (Request["ID"] != null && Request["ID"].ToString() != "")
　　　　　  {
　　　　　　　  return Request["ID"];
　　　　　  }
　　　　　  else
　　　　　  {
　　　　　　　  return "";
　　　　　  }
　　　  }
　  }
　  #endregion

　  GetDescriptionByID#region GetDescriptionByID
　  private void GetDescriptionByID(string ID)
　  {
　　　  string connStr = ConfigurationSettings.AppSettings["ConnectionString"];
　　　  SqlConnection conn = new SqlConnection(connStr);
　　　  string sql = "select * from testimage where userid='" + ID + "'";
　　　  SqlCommand cmd = new SqlCommand(sql, conn);
　　　  conn.Open();
　　　  SqlDataReader dr = cmd.ExecuteReader();

　  string s = @"<table cellspacing='0' cellpadding='4' width='300' height='200' border='0' id='GridView1' style='color:#333333;border-collapse:collapse;'>";
　　　  if(dr.Read())
　　　  {
　　　　　  s += "<tr style='color:#333333;background-color:#FFFBD6;'>";
　　　　　  s += "<td width='50'>名称:</td>";
　　　　　  s += "<td>" + dr["UserName"] + "</td>";
　　　　　  s += "</tr>";
　　　　　  s += "<tr style='color:#333333;background-color:White;'>";
　　　　　  s += "<td scope='col'>描述:</td>";
　　　　　  s += "<td>" + dr["Description"] + "</td>";
　　　　　  s += "</tr>";
　　　  }
　　　  s += "</table>";
　　　  dr.Close();
　　　  conn.Close();
　　　  this.Response.Write(s);
　　　  this.Response.End();
　  }
　  #endregion

　  save image#region save image
　  protected void Button2_Click(object sender, EventArgs e)
　  {
　　　  Stream ImageStream;
　　　  string Path = FileUpload1.PostedFile.FileName;// 文件名称
　　　  int Size = FileUpload1.PostedFile.ContentLength; // 文件大小
　　　  string Type = FileUpload1.PostedFile.ContentType; // 文件类型
　　　  ImageStream = FileUpload1.PostedFile.InputStream;
　　　  byte[] Content = new byte[Size];
　　　  int Status = ImageStream.Read(Content, 0, Size);

　  SqlConnection conn = new SqlConnection(ConfigurationSettings.AppSettings["ConnectionString"]);
　　　  SqlCommand comm = new SqlCommand("insert into testimage (UserName,Image,Path,Type,Description) values(@UserName,@Image,@Path,@Type,@Description)", conn);

　  comm.CommandType = CommandType.Text;
　　　  comm.Parameters.Add("@UserName", SqlDbType.VarChar, 255).Value = txtUserName.Text;
　　　  comm.Parameters.Add("@Image", SqlDbType.Image).Value = Content;
　　　  comm.Parameters.Add("@Path", SqlDbType.VarChar, 255).Value = Path;
　　　  comm.Parameters.Add("@Type", SqlDbType.VarChar, 255).Value = Type;
　　　  comm.Parameters.Add("@Description", SqlDbType.VarChar, 2000).Value = this.TextBox1.Text;

　  conn.Open();
　　　  comm.ExecuteNonQuery();
　　　  conn.Close();
　  }
　  #endregion

　  BindData#region BindData
　  private void BindData()
　  {
　　　  string sql = "select * from testimage";
　　　  DataSet ds = GetDataSet(sql);
　　　  this.DataList1.DataSource = ds;
　　　  this.DataList1.DataBind();
　  }
　  #endregion

　  GetDataSet#region GetDataSet
　  private DataSet GetDataSet(string sql)
　  {
　　　  string constring = System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];
　　　  SqlDataAdapter sda = new SqlDataAdapter(sql, constring);
　　　  DataSet ds = new DataSet();
　　　  sda.Fill(ds);
　　　  return ds;
　  }
　  #endregion3.数据库脚本
if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[TestImage]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)
drop table [dbo].[TestImage]
GO

CREATE TABLE [dbo].[TestImage] (
　  [UserID] [int] IDENTITY (1, 1) NOT NULL ,
　  [UserName] [nvarchar] (500) COLLATE Chinese_PRC_CI_AS NULL ,
　  [Image] [image] NULL ,
　  [Path] [nvarchar] (500) COLLATE Chinese_PRC_CI_AS NULL ,
　  [Type] [nvarchar] (20) COLLATE SQL_Latin1_General_CP1_CI_AS NULL ,
　  [Description] [nvarchar] (2000) COLLATE Chinese_PRC_CI_AS NULL
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO

<html>
 <head>
  <title>WebForm1</title>
  <style type="text/CSS">.logo {}{ POSITION: absolute }.dek {}{ Z-INDEX: 200; VISIBILITY: hidden; POSITION: absolute }</style>
 </head>
 <body>
 <Form runat="server">
  <DIV class="dek" id="dek"></DIV>
　  <script language="javascript"> 
　　　  Xoffset=-20;
　　　  Yoffset=  20;　　　
　　　  var  nav,yyy=-1000;
　　　  var  skn=dek.style;
　　　  document.onmousemove=get_mouse;
　　　 
　　　  //Ajax
　　　  var xmlHttp;　　　 
　　　  function createxmlhttpRequest()
　　　  {
　　　　　  if (window.ActiveXObject)
　　　　　  {
　　　　　　　  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
　　　　　  }
　　　　　  else if (window.XMLHttpRequest)
　　　　　  {
　　　　　　　  xmlHttp = new XMLHttpRequest();
　　　　　  }
　　　  }
　　　　　 
　　　  function startRequest(id)
　　　  {
　　　　　  createXMLHttpRequest();
　　　　　  xmlHttp.onreadystatechange = handleStateChange;
　　　　　  xmlHttp.open("GET", "?ID="+id, true);
　　　　　  xmlHttp.send(null);
　　　  }
　　　  var content;　 
　　　  function handleStateChange()
　　　  {
　　　　　  if(xmlHttp.readyState == 4)
　　　　　  {
　　　　　　　  if(xmlHttp.status == 200)
　　　　　　　  {
　　　　　　　　　  content=xmlHttp.responseText;
　　　　　　　  }
　　　　　  }
　　　  }
　　　  //tooltip
　　　  function  popup(id)
　　　  {
　　　　　  startRequest(id);
　　　　　  yyy=Yoffset;
　　　　　  document.all("dek").innerHTML=content;
　　　　　  skn.visibility="visible"
　　　  }

　  function  get_mouse(e)
　　　  {
　　　　　  var  x=event.x+document.body.scrollLeft;
　　　　　  skn.left=x+Xoffset;
　　　　　  var  y=event.y+document.body.scrollTop;
　　　　　  skn.top=y+yyy;
　　　  }

　  function  kill()
　　　  {
　　　　　  yyy=-1000;
　　　　　  skn.visibility="hidden";
　　　  }
</script> 
  <div>
　  <asp:FileUpload ID="FileUpload1" runat="server" /><br>名称:<asp:TextBox ID="txtUserName"
　　　　　  runat="server"></asp:TextBox><br>
　　  描述:<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br>
　　　  <asp:Button ID="Button2" runat="server" Text="保存" />
　  <asp:DataList id="DataList1"
　　　　　 BorderColor="black"
　　　　　 CellPadding="1"
　　　　　 CellSpacing="4" HorizontalAlign="Center"
　　　　　 RepeatColumns="4"
　　　　　 RepeatLayout="Table"
　　　　　 runat="server" ShowFooter="true" ShowHeader="true"
　　　　　 width="100%">
　　　　 <ItemTemplate>
　　　　　  <%# DataBinder.Eval(Container.DataItem, "UserName")%><br>
　　　　　  <img ID="img1" UserID")%>);" src='<%# DataBinder.Eval(Container.DataItem, "Path") %>' height='150'/>
　　　　 </ItemTemplate>
　　  </asp:DataList>　 
　  </div>
　  </Form>
 </body>
</html>