ASP.NET ListView full row select_问答_开发者_运维开发者技术经验分享

So I am playing around with using a ListView instead of a GridView to accomplish a complicated goal. The ListView is helping in a lot of ways, but there is one particular bit of code I am used to using with GridView's that won't doesn't work with ListView's.

If I have to have a nice mouse hover action on my rows in a GridView, and if I want to let a user click anywhere in a row to select it, I use the OnRowDataBound event and do something like this

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());

It works great with GridViews. With the ListView I can use the OnItemDataBound event, but there doesn'开发者_StackOverflowt seem to be any control that has an Attributes array to add to.

Does anyone know of an equivalent solution to allow for mouse hover and full row click with a ListView?

On a ListView you are creating the row yourself so you can add this functionality directly on the row, something like this.

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

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

We add a CSS-file to our project with a single CSS-class called MyGridView which only contains the font-settings:

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

The next thng we have to define is a CSS-class for a GridView-row. Such a row is internally represented by an HTML TR-tag. So we have to define the class like that for the normal row and the row when hovered:

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

For the hovering-effect we created a small image named GridViewBG.jpg which has a size of 2px x 30px. It is the green gradient you can see when the mousepoiner is over a row.

After that, we a add the CSS-file to the ASP.NET-form. Here is the form's full markup-code:

<%@ 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>

As you can see, we defined two columns to display data for persons. The CSS-class for the GridView is assigned by the property CssClass="MyGridView". But assigning this is not enough because the class for a GridView's row has also to be assigned. We use the GridView's event RowCreated for this task:

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) Display data

Now the only thing left to do is to fill the GridView with some sample data so that we can see the mouseover-effect in action. Here is our DataSourceProvider-class that generates some data for us:

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);
    }
}

The binding of these data is done in the form's Page_Load-event

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

ASP.NET ListView full row select

精彩评论

关注公众号

热门标签

图文推荐

ASP.NET ListView full row select

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：