ASP.NET ListView 全行选择答案

【问题标题】：ASP.NET ListView full row selectASP.NET ListView 全行选择
【发布时间】：2010-06-03 21:00:31
【问题描述】：

所以我正在尝试使用 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 进行整行点击的等效解决方案？

【问题讨论】：

标签： .net asp.net gridview listview

【解决方案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>

【讨论】：

谢谢，悬停效果很好。我无法让点击工作。在犯了一些愚蠢的错误后，我确实让它编译了。 Click 确实会导致回发，但它不像 Select 的 CommandType 按钮那样称为 ListView 的选择事件。有什么想法吗？

【解决方案2】：

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

我们在项目中添加一个 CSS 文件，其中包含一个名为 MyGridView 的 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();
}

【讨论】：