2010-06-03 3 views
1

Итак, я играю с использованием ListView вместо GridView для достижения сложной цели. ListView помогает во многих отношениях, но есть один конкретный бит кода, который я использую для использования с GridView, который не будет работать с ListView.ASP.NET ListView полная строка select

Если я должен иметь хорошее действие мыши при наведении на моих строк в 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?

ответ

3

В 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> 
+1

Спасибо, парения отлично работает. Однако я не могу заставить клик работать. Я сделал это, чтобы скомпилировать, сделав несколько глупых ошибок. Щелчок вызывает сообщение назад, но он не называется событием выбора ListView, как кнопка CommandType для Select. Есть идеи? –

0

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

Добавляем CSS-файл в наш проект с помощью одного CSS-класса под названием MyGridView, который содержит только шрифт-настройки:

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

Следующая thng мы необходимо определить CSS-класс для строки GridView. Такая строка внутренне представлена ​​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 х 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> 

Как вы можете видеть, мы определили две колонки для отображения данных для лиц. CSS-класс для GridView присваивается свойством CssClass="MyGridView". Но назначить это недостаточно, потому что класс для строки GridView также должен быть назначен. Мы используем Ивентов GridView «s 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-событий формы

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