ASP.NET（C＃）-ListView

Question

过去，我使用自定义模板字段处理ListViews（.net 2.0），但我想在此实现的是以下内容

我现在正在.net 4.6上工作

因此，基本上，一个显示上述项目以及将鼠标悬停在上面的项目的列表如下图所示显示了一些选项

我还必须触发这些选项来做不同的事情-

我如何在asp.net中做到这一点，请给我一些代码参考。

干杯

PS这是我如何创建列表项模板的粗略示例（按要求）

<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1">
           <AlternatingItemTemplate>
            <table >
                    <tr>
                        <td ><asp:Image  ID="image1" ImageUrl='<%# Bind("url") %>' runat="server" Width="98px" /> </td>
                        <td><h2><asp:Label ID="_label" runat="server" Text ='<%# Bind("title") %>'></asp:Label></h2><asp:Label ID="Label1" runat="server" Text ='<%# Bind("description") %>'></asp:Label></td>
                    </tr>
                  </table>
            </AlternatingItemTemplate>

            <EmptyDataTemplate>
                No data was returned.
            </EmptyDataTemplate>  

            <ItemSeparatorTemplate>
                <br />
            </ItemSeparatorTemplate>

            <ItemTemplate>
                <table >
                    <tr>
                        <td ><asp:Image  ID="image1" ImageUrl='<%# Bind("url") %>' runat="server"  Width="98px" /> </td>
                        <td><h2><asp:Label ID="_label" runat="server" Text ='<%# Bind("title") %>'></asp:Label></h2><asp:Label ID="Label1" runat="server" Text ='<%# Bind("description") %>'></asp:Label></td>
                    </tr>
                  </table>
            </ItemTemplate>
            <LayoutTemplate>                
                <ul id="itemPlaceholderContainer" runat="server" style="">
                    <li runat="server" id="itemPlaceholder" />
                </ul>
                <div style="">
                </div>
            </LayoutTemplate> 
        </asp:ListView>

我可以将任何html格式添加到此模板，e，gi可以添加ASP：button等，但我不知道如何触发它们执行某些任务。

Answer 1

一种满足要求的简单方法是将这些按钮保持在那里但不可见，并在悬停父容器时显示它们。 以下为快速样本

ASPX

<asp:ListView ID="ListView1" runat="server">
    <ItemTemplate>
        <tr class="row-data">
            <td>
                <asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' />
            </td>
            <td>
                <asp:Label ID="PositionLabel" runat="server" Text='<%# Eval("Position") %>' />
            </td>
            <td>
                <div class="btn-area">
                    <asp:Button runat="server" Text="Button1" />
                    <asp:Button runat="server" Text="Button2" />
                </div>
            </td>
        </tr>
    </ItemTemplate>
    <LayoutTemplate>
        <table id="itemPlaceholderContainer" runat="server" border="0" style="">
            <tr runat="server" style="">
                <th runat="server">
                    Name
                </th>
                <th runat="server">
                    Position
                </th>
                <th>
                </th>
            </tr>
            <tr id="itemPlaceholder" runat="server">
            </tr>
        </table>
    </LayoutTemplate>
</asp:ListView>

CSS

.btn-area
{
    display: none;
}

.row-data:hover .btn-area
{
    display: block;
}

代码隐藏

protected void Page_Load(object sender, EventArgs e)
{
    ListView1.DataSource = new List<dynamic>() {
        new { Name = "Andy", Position = "PG"},
        new { Name = "Bill", Position = "SD"},
        new { Name = "Caroline", Position = "Manager"}
    };
    ListView1.DataBind();
}

UPDATE
ListView ItemCommand可以通过按下按钮来捕获回发，而CommandName可以使您识别出触发了哪个按钮。

<asp:Button runat="server" Text="Button1" CommandName="c1" />
<asp:Button runat="server" Text="Button2"  CommandName="c2" />

代码隐藏

protected void ListView1_ItemCommand(object sender, ListViewCommandEventArgs e)
{
    if (e.CommandName == "c1")
    {
        // do something when button1 pressed
    }
    else if (e.CommandName == "c1")
    {
        // do something when button2 pressed
    }
}