От: 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();
}
Спасибо, парения отлично работает. Однако я не могу заставить клик работать. Я сделал это, чтобы скомпилировать, сделав несколько глупых ошибок. Щелчок вызывает сообщение назад, но он не называется событием выбора ListView, как кнопка CommandType для Select. Есть идеи? –