ASP.NET ListView полный выбор строки - PullRequest
Новая
       6

ASP.NET ListView полный выбор строки

1 голос
/ 04 июня 2010

Так что я пытаюсь использовать 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, но, похоже, нет никакого элемента управления, к которому можно добавить массив атрибутов.

Кто-нибудь знает эквивалентное решение для наведения мыши и полного щелчка строки с помощью ListView?

Ответы [ 2 ]

3 голосов
/ 04 июня 2010

В 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>
0 голосов
/ 04 июня 2010

От: 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; }

Следующее, что мы должны определить, это CSS-класс для GridView-строки. Такая строка внутренне представлена ​​HTML-тэгом. Таким образом, мы должны определить класс таким же образом для обычной строки и строки при наведении: 

.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, размер которого составляет 2 × 30 пикселей. Это зеленый градиент, который вы можете видеть, когда указатель мыши находится над строкой.

После этого мы добавляем 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 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();
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...