《ASP.NET1200例》高亮显示ListView中的数据行并自动切换图片

最新推荐文章于 2024-04-29 17:54:33 发布

weixin_33743248

最新推荐文章于 2024-04-29 17:54:33 发布

阅读量51

点赞数

文章标签： javascript 后端 ui ViewUI

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"  οnmοuseοver='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也不起作用

weixin_33743248

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
《ASP.NET1200例》高亮显示ListView中的数据行并自动切换图片

aspx&lt;script type="text/javascript"&gt; var oldColor; function SetNewColor(Source) { oldColor = Source.style.backgroudColor; Source.style.backgroudColor = "#FFCCFF"; ...
复制链接

扫一扫