Ajax实现DataGrid/DataList动态ToolTip

最新推荐文章于 2025-12-04 15:25:15 发布

最新推荐文章于 2025-12-04 15:25:15 发布 · 82 阅读

文章标签：

#数据库 #javascript #ViewUI

本文介绍了一个使用ASP.NET实现的图片上传功能，并展示了如何从数据库中读取图片信息进行展示。具体包括了aspx页面的搭建、CS代码实现、数据库交互及HTML布局等关键步骤。

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

using System.Data.SqlClient;

using System.IO;

protected void Page_Load( object sender,EventArgse)

{

if(!Page.IsPostBack)

{

BindData();

}

if(ID!="")

{

GetDescriptionByID(ID);

}

property #regionproperty

privatestringID

{

get

{

if(Request["ID"]!=null&&Request["ID"].ToString()!="")

{

returnRequest["ID"];

}

else

{

return"";

}

#endregion

GetDescriptionByID #regionGetDescriptionByID

privatevoidGetDescriptionByID(stringID)

{

stringconnStr=ConfigurationSettings.AppSettings["ConnectionString"];

SqlConnectionconn=newSqlConnection(connStr);

stringsql="select*fromtestimagewhereuserid='"+ID+"'";

SqlCommandcmd=newSqlCommand(sql,conn);

conn.Open();

SqlDataReaderdr=cmd.ExecuteReader();

strings=@"<tablecellspacing='0'cellpadding='4'width='300'height='200'border='0'id='GridView1'style='color:#333333;border-collapse:collapse;'>";

if(dr.Read())

{

s+="<trstyle='color:#333333;background-color:#FFFBD6;'>";

s+="<tdwidth='50'>名称:</td>";

s+="<td>"+dr["UserName"]+"</td>";

s+="</tr>";

s+="<trstyle='color:#333333;background-color:White;'>";

s+="<tdscope='col'>描述:</td>";

s+="<td>"+dr["Description"]+"</td>";

s+="</tr>";

}

s+="</table>";

dr.Close();

conn.Close();

this.Response.Write(s);

this.Response.End();

}

#endregion

saveimage #regionsaveimage

protectedvoidButton2_Click(objectsender,EventArgse)

{

StreamImageStream;

stringPath=FileUpload1.PostedFile.FileName;//文件名称

intSize=FileUpload1.PostedFile.ContentLength;//文件大小

stringType=FileUpload1.PostedFile.ContentType;//文件类型

ImageStream=FileUpload1.PostedFile.InputStream;

byte[]Content=newbyte[Size];

intStatus=ImageStream.Read(Content,0,Size);

SqlConnectionconn=newSqlConnection(ConfigurationSettings.AppSettings["ConnectionString"]);

SqlCommandcomm=newSqlCommand("insertintotestimage(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 #regionBindData

privatevoidBindData()

{

stringsql="select*fromtestimage";

DataSetds=GetDataSet(sql);

this.DataList1.DataSource=ds;

this.DataList1.DataBind();

}

#endregion

GetDataSet #regionGetDataSet

privateDataSetGetDataSet(stringsql)

{

stringconstring=System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];

SqlDataAdaptersda=newSqlDataAdapter(sql,constring);

DataSetds=newDataSet();

sda.Fill(ds);

returnds;

}

#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 ]

CREATE TABLE [ dbo ] . [ TestImage ] (

[ UserID ] [ int ] IDENTITY ( 1 , 1 ) NOT NULL ,

[ UserName ] [ nvarchar ] ( 500 )COLLATEChinese_PRC_CI_AS NULL ,

[ Image ] [ image ] NULL ,

[ Path ] [ nvarchar ] ( 500 )COLLATEChinese_PRC_CI_AS NULL ,

[ Type ] [ nvarchar ] ( 20 )COLLATESQL_Latin1_General_CP1_CI_AS NULL ,

[ Description ] [ nvarchar ] ( 2000 )COLLATEChinese_PRC_CI_AS NULL

) ON [ PRIMARY ] TEXTIMAGE_ON [ PRIMARY ]

< html >

< head >

< title > WebForm1 </ title >

< style type ="text/css" >

.logo{

}{POSITION:absolute}.dek{

}{Z-INDEX:200;VISIBILITY:hidden;POSITION:absolute}</style>

</head>

<body>

<Formrunat="server">

<DIVclass="dek"id="dek"></DIV>

<scriptlanguage="javascript">

Xoffset=-20;

Yoffset=20;

varnav,yyy=-1000;

varskn=dek.style;

document.onmousemove=get_mouse;

//ajax

varxmlHttp;

functioncreateXMLHttpRequest()

{

if(window.ActiveXObject)

{

xmlHttp=newActiveXObject("Microsoft.XMLHTTP");

}

elseif(window.XMLHttpRequest)

{

xmlHttp=newXMLHttpRequest();

}

functionstartRequest(id)

{

createXMLHttpRequest();

xmlHttp.onreadystatechange=handleStateChange;

xmlHttp.open("GET","?ID="+id,true);

xmlHttp.send(null);

}

varcontent;

functionhandleStateChange()

{

if(xmlHttp.readyState==4)

{

if(xmlHttp.status==200)

{

content=xmlHttp.responseText;

}

//tooltip

functionpopup(id)

{

startRequest(id);

yyy=Yoffset;

document.all("dek").innerHTML=content;

skn.visibility="visible"

}

functionget_mouse(e)

{

varx=event.x+document.body.scrollLeft;

skn.left=x+Xoffset;

vary=event.y+document.body.scrollTop;

skn.top=y+yyy;

}

functionkill()

{

yyy=-1000;

skn.visibility="hidden";

}

</script>

<div>

<asp:FileUploadID="FileUpload1"runat="server"/><br>名称:<asp:TextBoxID="txtUserName"

runat="server"></asp:TextBox><br>

描述:<asp:TextBoxID="TextBox1"runat="server"></asp:TextBox><br>

<asp:ButtonID="Button2"runat="server"OnClick="Button2_Click"Text="保存"/>

<asp:DataListid="DataList1"

BorderColor="black"

CellPadding="1"

CellSpacing="4"HorizontalAlign="Center"

RepeatColumns="4"

RepeatLayout="Table"

runat="server"ShowFooter="true"ShowHeader="true"

width="100%">

#DataBinder.Eval(Container.DataItem,"UserName")%><br>

<imgID="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>