aspx
<script type="text/javascript"> var oldColor; function SetNewColor(Source) { oldColor = Source.style.backgroudColor; Source.style.backgroudColor = "#FFCCFF"; } function SetOldColor(Source) { Source.style.backgroudColor = oldColor; } function ShowPhoto(url) { document.getElementById("Image1").src= url; } </script> <body> <form id="form1" runat="server"> <div> <asp:ListView ID="ListView1" runat="server" onitemdatabound="ListView1_ItemDataBound"> <ItemTemplate> <table id="myTable" border="1" cellpadding="5" cellspacing="0" runat="server" onmouseover='this.style.backgroundColor="#ff0000"'> <tr > <td> 图片ID: <asp:Label ID="Label1" runat="server" Text=""><%#Eval("id")%></asp:Label> 图片名称: <asp:TextBox ID="txtimageName" runat="server" Text='<%#Eval("imageName")%>'></asp:TextBox> 图片路径: <asp:TextBox ID="txtimageUrl" runat="server" Text='<%#Eval("imageUrl")%>'></asp:TextBox> </td> </tr> </table> </ItemTemplate> </asp:ListView> <asp:Image ID="Image1" runat="server" /> <asp:DataPager ID="DataPager1" PagedControlID="ListView1" runat="server"> </asp:DataPager> </div> </form> </body>
aspx.cs
ShowImageBll ShowImageBll = new BLL.ShowImageBll(); protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { bindDL(); } } public void bindDL() { //绑定数据源 DataSet ds = ShowImageBll.GetList(); ListView1.DataSource = ds; ListView1.DataBind(); } protected void ListView1_ItemDataBound(object sender, ListViewItemEventArgs e) { if (e.Item.ItemType == ListViewItemType.DataItem) //判断目前的项目是否为一个数据项目 { ListViewDataItem curDataItem = (ListViewDataItem)e.Item; //把目前的项目转化为一个ListViewDataItem DataRowView curRow = (DataRowView)curDataItem.DataItem;//把获取的行转化为DataRowView对象 int id = int.Parse(curRow["id"].ToString()); String imageUrl = ShowImageBll.getImageUrlByID(id); HtmlTable myTable = (HtmlTable)curDataItem.FindControl("myTable");//获取ItemTemplate模板中的Table控件 myTable.Attributes.Add("onMouseOver", "SetNewColor(this);ShowPhoto('"+imageUrl+"');"); myTable.Attributes.Add("onMouseOut", "SetOldColor(this);ShowPhoto('image/20131129.jpg');"); } }
总结：
【1】前段HTML的Table控件 定义： <table id="myTable" border="1" cellpadding="5" cellspacing="0" runat="server">
后端获取时：HtmlTable myTable = (HtmlTable)curDataItem.FindControl("myTable");//获取ItemTemplate模板中的Table控件
（此时需要添加引用using System.Web.UI.HtmlControls;）
【2】ListViewDataItem curDataItem = (ListViewDataItem)e.Item; //把目前的项目转化为一个ListViewDataItem
DataRowView curRow = (DataRowView)curDataItem.DataItem;//把获取的ListViewItem对象所绑定的数据转化为DataRowView对象
【3】遗留的问题：背景颜色的切换不起作用。函数SetNewColor(this)或者设置在aspx页面内嵌javascript也不起作用