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

时间：2023-02-16 20:35:24

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="" cellpadding=""  cellspacing=""  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也不起作用

《ASP.NET1200例》高亮显示ListView中的数据行并自动切换图片的更多相关文章

  1. 《ASP&period;NET1200例》ListView 控件与DataPager控件的结合&lt&semi;一&gt&semi;

    分页     在前一部分开始时介绍的原 HTML 设计中内含分页和排序,所以根据规范完整实现该网格的任务尚未完成.我们先分页,然后再排序. ListView 控件中的分页通过引入另一个新控件 Data ...

  2. 《ASP&period;NET1200例》ListView控件之修改，删除与添加

    aspx <body> <form id="form1" runat="server"> <div> <asp:Lis ...

  3. 《ASP&period;NET1200例》ListView 控件与DataPager控件的结合&lt&semi;二&gt&semi;

    ASP.NET使用ListView数据绑定控件和DataPager实现数据分页显示 为什么使用ListView+DataPager的方式实现分页显示? .net提供的诸多数据绑定控件,每一种都有它自己 ...

  4. C&num;中清空ListView中的数据

    我的显示数据的方式通过button按钮点击事件,当点击之后查询数据库库并将数据显示出来. 代码如下: private void button6_Click(object sender, EventAr ...

  5. c&num;导出ListView中的数据到Excel表格

    1.添加组件:Microsoft.Office.Interop.Excel 步骤:右键点击“引用”--->添加引用--->COM--->Microsoft.Office.Intero ...

  6. 触发器修改后保存之前的数据 表中插入数据时ID自动增长

    create or replace trigger t before update on test5 for each rowbegin insert into test55 values (:old ...

  7. 第18课-数据库开发及ado&period;net 连接数据库&period;增&period;删&period;改向表中插入数据并且返回自动编号&period;SQLDataReade读取数据

    第18课-数据库开发及ado.net 连接数据库.增.删.改向表中插入数据并且返回自动编号.SQLDataReade读取数据 ADO.NET 为什么要学习? 我们要搭建一个平台(Web/Winform ...

  8. 【转载】C&num;中遍历DataTable中的数据行

    在C#中的Datatable数据变量的操作过程中,有时候我们需要遍历DataTable变量获取每一行的数据值,例如将DataTable变量转换为List集合的时候,我们就会遍历DataTable变量, ...

  9. Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片

    Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片 自定义ADPager 自定义水平滚动的ScrollView效仿ViewPager 当遇到要在Vie ...

随机推荐

  1. 软件工程（FZU2015）赛季得分榜，第11回合&lpar;beta冲刺&plus;SE总结&rpar;

    目录 第一回合 第二回合 第三回合 第四回合 第五回合 第6回合 第7回合 第8回合 第9回合 第10回合 第11回合 增补作业 积分规则 积分制: 作业为10分制,练习为3分制:alpha30分:b ...

  2. 让AutoMapper更好用

    AutoMapper Dto与EF实体之间的转换用AutoMapper会变的很方便.很高效,是大多数项目的选择.博主本人的项目也在使用AutoMapper这个组件 好用归好用,但是想要把它用好又是另一 ...

  3. Gap

    Gap Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  4. 2014-4-25 运行号：837344 ASCII码排序

    #include <iostream> #include <cstdio> #include <cstdlib> #include <string> # ...

  5. yii2数据修改&vert;联查

    model 层   联查 $con = Yii::$app->db; $re = $con->createCommand("select * from ads LEFT JOIN ...

  6. Careercup - Google面试题 - 5424071030341632

    2014-05-08 22:55 题目链接 原题: Given a list of strings. Produce a list of the longest common suffixes. If ...

  7. JavaScript（3）—— 正则表达式

    ---恢复内容开始--- 正则表达式 这是写的正则表达式,正则表达式的点比较多,也比较细.所以有些地方我们得注意的比较多.正则表达式在JS中是很重要的一个部分,其中他的语法都得牢记.不过最好还是理解性 ...

  8. C&plus;&plus;中L和&lowbar;T&lpar;&rpar;之区别

    字符串前面加L表示该字符串是Unicode字符串._T是一个宏,如果项目使用了Unicode字符集(定义了UNICODE宏),则自动在字符串前面加上L,否则字符串不变.因此,Visual C++里边定 ...

  9. 箱线图&lpar;boxplot&rpar;简介与举例

    简述:   盒图是在1977年由美国的统计学家约翰·图基(John Tukey)发明的.它由五个数值点组成:最小值(min),下四分位数(Q1),中位数(median),上四分位数(Q3),最大值(m ...

  10. eclipse报错排解

    一.解决eclipse中git插件中的cannot open git-upload-pack问题 有时候在eclipse上使用插件egit向github或者osc上同步代码时,有时候会发现出现cann ...

相关文章