Ajax实现DataGrid/DataList动态ToolTip

【 tulaoshi.com - Web开发 】

　　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
　　  titleWebForm1/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:TextBoxbr
　　      描述:asp:TextBox ID="TextBox1" runat="server"/asp:TextBoxbr
　　        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