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();
        }
        if (ID != "")
        {
            GetDescriptionByID(ID);
        }
    }

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

     #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

     #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

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

     #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;
    }
    #endregion

3.数据库脚本

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" 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")%>);" οnmοuseοut="kill();" src='<%# DataBinder.Eval(Container.DataItem, "Path") %>' height='150'/>
         </ItemTemplate>
      </asp:DataList>    
    </div>
    </Form>
 </body>
</html>