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.

what is possible ? are you asking for a code or if it is possible to migrate your code to 4.6? please clarify what you wanted out of this. — yesIcan
– yesIcan, Commented Sep 14, 2017 at 3:04
Hi, thanks for your reply, I am asking for code ' updated the post — Ali
– Ali, Commented Sep 14, 2017 at 3:21
@aliusman its not code asking site :) and you have to post your own tried code then ask about not working or something else in it. — user1773603
– user1773603, Commented Sep 14, 2017 at 3:38
@Asif.Ali thanks for your reply, i was not looking for full-code, just few code references to start with and put me into a right direction. I can create List Templates as simple html and generate from SQL database dynamically but add buttons with each Item and making them trigger certain functions is difficult and i have no idea where to start with this. even i am not sure if i should use List items or just a GridView with Template field to achieve what i posted above, — Ali
– Ali, Commented Sep 14, 2017 at 3:47
Put your I can create List Templates's code that you tried by editing your post. — user1773603
– user1773603, Commented Sep 14, 2017 at 3:52

Circle Hsiao · Accepted Answer · 2017-09-14 05:50:33Z

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

edited Sep 14, 2017 at 5:50

answered Sep 14, 2017 at 4:12

Circle Hsiao

2,0045 gold badges27 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ali Over a year ago

Hey thank you so much :) how do i trigger On_Click() in code-behind when a button is clicked and how would i know which Row was used to click the button - also what if they are not ASP:button and normal HTML Labeled buttons? How do i access On_Click for them in code behind

Circle Hsiao Over a year ago

I have the answer updated. However, in SO we expect a minimize, limited, and specific question. We are NOT here to help you finish the whole feature. If you really have no clue of each part. You should make them independent questions.

Circle Hsiao Over a year ago

Plus, instead of asking lots of demo code, the community prefer question you faced during your development. Hope you could spend some time to read through this tour.

Collectives™ on Stack Overflow

ASP.NET (C#) - ListView

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related