Question

所以我正在使用ListView而不是GridView来实现复杂的目标。 ListView在很多方面都有所帮助，但是我习惯使用GridView的一些特定代码，这些代码不能与ListView一起使用。

如果我必须在GridView中对我的行进行漂亮的鼠标悬停操作，并且如果我想让用户在一行中的任何地方单击以选择它，我使用OnRowDataBound事件并执行类似这样的操作

e.Row.Attributes["onmouseover"] = "this.oldClass=this.className;this.className='hover';";
e.Row.Attributes["onmouseout"] = "this.className=this.oldClass;";
e.Row.Attributes["onclick"] = Page.ClientScript.GetPostBackClientHyperlink(gdvBuildings, "Select$" + e.Row.RowIndex.ToString());

它适用于GridViews。使用ListView，我可以使用OnItemDataBound事件，但似乎没有任何控件具有要添加的Attributes数组。

是否有人知道允许使用ListView进行鼠标悬停和完整行单击的等效解决方案？

Answer 1

在ListView上，您自己创建了行，因此您可以直接在行上添加此功能，如下所示。

<asp:ListView ID="ListView3" runat="server">
<ItemTemplate>
  <tr onmouseover="this.oldClass=this.className;this.className='hover';" onmouseout="this.className=this.oldClass;" onclick='<%# Page.ClientScript.GetPostBackClientHyperlink(gdvBuildings, "Select$" + Container.DataItemIndex.ToString()) %>' >
    <td>
      <asp:Label ID="Label7" runat="server" Text='<%# Eval("ClientNumber") %>' />
    </td>
    <td>
      <asp:Label ID="CityNameLabel" runat="server" Text='<%# Eval("FullName") %>' />
    </td>
  </tr>
</ItemTemplate>
<LayoutTemplate>
  <table id="itemPlaceholderContainer" runat="server" border="0" style="">
    <tr id="itemPlaceholder" runat="server">
    </tr>
  </table>
</LayoutTemplate>
</asp:ListView>

Answer 2

来自：http://www.codegod.de/WebAppCodeGod/Mouseover-Effect-Hover-for-ASP-NET-GridView-with-CSS-AID476.aspx

我们使用一个名为MyGridView的CSS类将CSS文件添加到我们的项目中，该类只包含字体设置：

.MyGridView { font-family: Arial; font-size: 12px; }

我们必须定义的下一个是GridView行的CSS类。这样的行在内部由HTML TR标签表示。因此，我们必须为正常行定义类，并在挂起时定义行：

.MyGridView tr.row { color: #000000; background-color: #FFFFFF; }
.MyGridView tr.row:hover { background-image: url('../img/GridViewBG.jpg'); background-repeat: repeat-x; color: #333333; }

对于悬停效果，我们创建了一个名为GridViewBG.jpg的小图片，其大小为2px x 30px。当鼠标悬停在一行上时，您可以看到绿色渐变。

之后，我们将CSS文件添加到ASP.NET表单中。这是表单的完整标记代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
 <title>Untitled Page</title>
 <link href="css/GridViewStyles.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <form id="form1" runat="server">
 <div>
  <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BorderWidth="0px" CellPadding="8" CssClass="MyGridView" Width="400px" OnRowCreated="GridView1_RowCreated">
   <Columns>
    <asp:BoundField DataField="Name" HeaderText="Name">
     <HeaderStyle HorizontalAlign="Left" />
    </asp:BoundField>
    <asp:BoundField DataField="Firstname" HeaderText="Firstname">
     <HeaderStyle HorizontalAlign="Left" />
    </asp:BoundField>
   </Columns>
   <HeaderStyle BackColor="Green" Font-Bold="True" ForeColor="White" />
  </asp:GridView>
 </div>
 </form>
</body>
</html>

如您所见，我们定义了两列来显示人员数据。 GridView的CSS类由属性CssClass="MyGridView"分配。但是分配这个还不够，因为还要分配GridView行的类。我们使用GridView的事件RowCreated执行此任务：

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
    // Set the CSS-class "row" for normal grid-rows
    if (e.Row.RowType == DataControlRowType.DataRow)
        e.Row.CssClass = "row";
}

（3）显示数据

现在唯一要做的就是用一些示例数据填充GridView，以便我们可以看到鼠标悬停效果。这是我们为我们生成一些数据的DataSourceProvider类：

public class DataSourceProvider
{
    public static DataTable GetPersons()
    {
        DataTable result = new DataTable();
        result.Columns.Add("Name");
        result.Columns.Add("Firstname");
        AddPerson(result, "Matthias", "Pieroth");
        AddPerson(result, "Mark", "Twain");
        AddPerson(result, "Charles", "Bukowski");
        AddPerson(result, "Francois", "Villon");
        return result;
    }

    private static void AddPerson(DataTable table, string firstName, string name)
    {
        DataRow row = table.NewRow();
        row["Name"] = name;
        row["Firstname"] = firstName;
        table.Rows.Add(row);
    }
}

这些数据的绑定以表单的Page_Load-event

完成

protected void Page_Load(object sender, EventArgs e)
{
    GridView1.DataSource = DataSourceProvider.GetPersons();
    GridView1.DataBind();
}

ASP.NET ListView全行选择

2 个答案: