ajax实现datagrid/datalist动态tooltip _ajax教程

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, NIsUserTable) = 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” OnClick=”Button2_Click” 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″ onmouseover=”popup(<%# DataBinder.Eval(Container.DataItem, “UserID”)%>);” onmouseout=”kill();” src=<%# DataBinder.Eval(Container.DataItem, “Path”) %> height=150/>
         </ItemTemplate>
      </asp:DataList>   
    </div>
    </Form>
 </body>
</html>