ASP.NET（C＃） - 的ListView

Question

在過去，我曾在使用自定義模板字段列表視圖（.NET 2.0），但我想在這裏實現的是以下

我我現在工作的.NET 4.6

所以基本上一個列表，顯示像上面和項目鼠標懸停幾個選​​項顯示爲顯示在下面的屏幕截圖

我也有觸發那些選擇做不同的事情 -

我怎樣才能做到這在asp.net，我可以請有一些代碼引用。

Cheers

P.S. 這就是我如何創建列表項目模板（如需要）

<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：按鈕等，但我不知道如何觸發這些人執行某些任務。

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讓你ABL e識別哪個按鈕觸發了它。

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