ASP.NET (C#) - ListView

Question

In past, i worked on ListViews (.net 2.0) using a custom Template field but what i am trying to achieve here is the following

I am now working on .net 4.6

So basically a list which shows items like above and on mouse-hover few options show up as shown in the following screenshot

I also have to trigger those option to do different things -

How can I do that in asp.net, may I please have some code references.

Cheers

P.S. This is a rough example of how i am creating the List Item Template (as requested)

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

I can add any html formatting to this template e,g i can add ASP:button etc but i don't know how to trigger those to perform certain tasks.

Answer 1

One easy way to achieve your requirement is to keep those buttons there but invisible and show them up when the parent container is hovered. following as a quick sample

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

code-behind

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 can capture the postback by button pressed and CommandName makes you able to recognize which button fired it.

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

code-behind

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