代码之家 › 专栏 › 技术社区 › Justin C

ASP.NET ListView整行选择

listview gridview asp.net .net

Justin C · 技术社区 · 14 年前

因此,我在利用listview而不是gridview来完成一个复杂的目标。listview在很多方面都有帮助,但是有一个特定的代码我习惯于用在gridview中,它不能用在listview中。

如果我必须在网格视图中的行上执行一个漂亮的鼠标悬停操作,并且如果我想让用户单击行中的任何位置来选择它,我将使用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());

它适用于网格视图。使用ListView,我可以使用OnitemDataBound事件,但似乎没有任何控件具有要添加到的属性数组。

是否有人知道一个等效的解决方案,允许鼠标悬停和用ListView单击整行?

2 回复 | 直到 11 年前

alejandrobog 14 年前

在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>

Kirk It looks like 11 年前

来自: 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类。这样的行在内部由一个HTMLTR标记表示。因此,我们必须为普通行和悬停时的行定义类似的类:

.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,这样我们就可以看到mouseover效果的实际效果。下面是我们的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);
    }
}

这些数据的绑定是在表单的页面加载事件中完成的。

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