HoverMenuExtender Control With ListView in ASP.NET

Introduction

Ajax (Asynchronous JavaScript and XML) is a new web development technique used for interactive websites. With AJAX help we can develop web applications and retrieve small amounts of data from a web server. AJAX consists of a different type of technology.

• JavaScript.
• XML.
• Asynchronous Call to the server.

HoverMenuExtender control

The HoverMenuExtender associates the ASP.NET control with a panel that is popped up to display additional content, whenever the user moves the mouse cursor over the ASP.NET control.

Properties

• TargetControlID
• PopupControlID
• Popupdelay
• OffSetx
• OffSety

ListView

The ListView control provides the display of a set of data items in different layouts or views. For example, a user may want to display data items in a table and also to sort its columns. The ListView control supports the following Template.

Template

• AlternatingItemTemplate
• EditItemTemplate
• EmptyDataTemplate
• GroupTemplate
• GroupTemplate

Step 1 : Open Visual Studio 2010.

• Go to File->New->WebSite
• Select ASP.NET WebSite

Step 2 : Go to Solution Explorer and right-click.

• Select Add->New Item
• Select WebForm
• Default.aspx page open

Step 3 : Open Default.aspx page and click in [Design option].

• Drag and drop ListView Control

Define SqlServerDataBase

Step 4 : Go to Solution Explorer and right-click and select SqlServerDataBase for Table.

• Select AddNewItem
• Select SqlServerDatabase

Define Table

Step 5 : Go to Server Explorer and right-click.

• Select Table->Add New Table
• Define following data field

DataBind

Step 6 : Now go to Default.aspx page and select Design option.

• Click on the ListView Control
• Choose New DataSource

Step 7 : Now we select SqlDatabase and define "SqlDatabase1".

Connection String

Step 8 : Define database and after than select connection string option and choose database.

Step 9 : Now in the Default.aspx[Source] the following ConnectionString code show.

Code :

<asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
            SelectCommand="SELECT * FROM [.....A]">
</asp:SqlDataSource>


Step 10 : To display data, we will declare the <ItemTemplate>. We will also create the HoverMenuExtender in the <ItemTemplate> to associate each row of the ListView with a popup.

• Go to Toolbox option and select HoverMenuExtender control and define all properties.

Code

<ItemTemplate>
<TR>
<td>
    <asp:HoverMenuExtender ID="HoverMenuExtender1" runat="server" TargetControlID="Label1" PopupControlID="Panel1" PopDelay="20" OffsetX="-100" OffsetY="-5">
    </asp:HoverMenuExtender>
  <asp:Panel ID="Panel1" runat="server">
                <table>
                    <tr>
                        <td>
                            <asp:Button ID="Button1" runat="server" CommandName="Edit" Text="Edit" />
                        </td>
                        <td>
                             <asp:Button ID="Button2" runat="server" CommandName="Delete" Text="Delete" />
                        </td>
                    </tr>
                </table>
            </asp:Panel>
         </td>
         <td>
             <asp:Label ID="Label1" runat="server" Text='<%# Eval("ID") %>' />
          </td>
          <td>
             <asp:Label ID="Label2" runat="server" Text='<%# Eval("NAME") %>' />
          </td>
          <td>
             <asp:Label ID="Label3" runat="server" Text='<%# Eval("ClASS") %>' />
          </td>
    </tr>
</ItemTemplate>

Step 11 :  We have created the functionality to display data in the ListView, as well as a pop-up the panel when the user hovers over 'ProductName' column using the HoverMenuExtender.

Code

<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="ID" InsertItemPosition="LastItem">
        <LayoutTemplate>
    <table>
        <tr>
            <td>
                <table border="1" style="border-width:1; border-color:Black">
                    <tr>
                        <th></th>
                
                        <th style="width:100px">ID</th>
                        <th>NAME</th>
                        <th>CLASS</th>
                    </tr>
                        <tr runat="server" ID="itemPlaceholder">
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <asp:DataPager runat="server" ID="listViewPager" PageSize="4">
                 <Fields>
                      <asp:NumericPagerField ButtonCount="1"
                       PreviousPageText="<--" NextPageText="-->" />
                 </Fields>
                </asp:DataPager>
            </td>
        </tr>
    </table>
</LayoutTemplate>

Step 12 : Create the markup for the EditTemplate and InsertTemplate as shown below.

Code

<EditItemTemplate>
   <tr>
      <td>
         <asp:Button ID="btnUpdate" runat="server"
          CommandName="Update" Text="Update" />
         <asp:Button ID="btnCancel" runat="server"
          CommandName="Cancel" Text="Cancel" />
      </td>
      <td>
         <asp:Label ID="lblProdIDReadOnly" runat="server"
          Text='<%# Bind("ID") %>' /></td>
       <td>
         <asp:TextBox ID="txtEditProdName" runat="server"
          Text='<%# Bind("NAME") %>' />
      </td>
   </tr>
</EditItemTemplate>

Step 13 : Go to the Default.aspx page and write a code.

Code

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div style="background-color: #BDC1C1">
        <asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="ID" InsertItemPosition="LastItem">
        <LayoutTemplate>
    <table>
        <tr>
            <td>
                <table border="1" style="border-width:1; border-color:Black">
                    <tr>
                        <th></th>
                        <th style="width:100px">ID</th>
                        <th>NAME</th>
                        <th>CLASS</th>
                    </tr>
                        <tr runat="server" ID="itemPlaceholder">
                    </tr>
                </table>
            </td>
        </tr>
      
        <tr>
            <td>
                <asp:DataPager runat="server" ID="listViewPager" PageSize="4">
                 <Fields>
                      <asp:NumericPagerField ButtonCount="1"
                       PreviousPageText="<--" NextPageText="-->" />
                 </Fields>
                </asp:DataPager>
            </td>
        </tr>
    </table>
</LayoutTemplate>      
<ItemTemplate>
<TR>
<td>
    <asp:HoverMenuExtender ID="HoverMenuExtender1" runat="server" TargetControlID="Label1" PopupControlID="Panel1" PopDelay="20" OffsetX="-100" OffsetY="-5">
    </asp:HoverMenuExtender>
  <asp:Panel ID="Panel1" runat="server">
                <table>
                    <tr>
                        <td>
                            <asp:Button ID="Button1" runat="server" CommandName="Edit" Text="Edit" />
                        </td>
                        <td>
                             <asp:Button ID="Button2" runat="server" CommandName="Delete" Text="Delete" />
                        </td>
                    </tr>
                </table>
            </asp:Panel>
         </td>
         <td>
             <asp:Label ID="Label1" runat="server" Text='<%# Eval("ID") %>' />
          </td>
          <td>
             <asp:Label ID="Label2" runat="server" Text='<%# Eval("NAME") %>' />
          </td>
          <td>
             <asp:Label ID="Label3" runat="server" Text='<%# Eval("ClASS") %>' />
          </td>
    </tr>
</ItemTemplate>
<EditItemTemplate>
   <tr>
      <td>
         <asp:Button ID="btnUpdate" runat="server"
          CommandName="Update" Text="Update" />
         <asp:Button ID="btnCancel" runat="server"
          CommandName="Cancel" Text="Cancel" />
      </td>
      <td>
         <asp:Label ID="lblProdIDReadOnly" runat="server"
          Text='<%# Bind("ID") %>' /></td>
       <td>
         <asp:TextBox ID="txtEditProdName" runat="server"
          Text='<%# Bind("NAME") %>' />
     </td>
|   </tr>
</EditItemTemplate>
<InsertItemTemplate>
   <tr>
      <td>
      </td>
      <td>|
         <asp:Button ID="btnInsert" runat="server" CommandName="Insert"
          Text="Insert" />
         <asp:Button ID="btnInsertCancel" runat="server" CommandName="Cancel"
          Text="Cancel" />
      </td>
      <td>
         <asp:TextBox ID="txtInsertProdName" runat="server"
          Text='<%# Bind("NAME") %>' />
      </td>
      <td>
         <asp:CheckBox ID="cbInsertDiscontinued" runat="server"
          Checked='<%# Bind("CLASS") %>' />
      </td>
   </tr>
</InsertItemTemplate>
        </asp:ListView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
            SelectCommand="SELECT * FROM [.....A]">
            <InsertParameters>
        <asp:Parameter Name="NAME" Type="String" />
        <asp:Parameter Name="CLASS" Type="Byte" />
     </InsertParameters>          
    <UpdateParameters>
        <asp:Parameter Name="NAME" Type="String" />            
        <asp:Parameter Name="ID" Type="Int32" />}
    </UpdateParameters>
    <DeleteParameters>
        <asp:Parameter Name="ID" Type="Int32" />
    </DeleteParameters>
            </asp:SqlDataSource>
    </div>
    </form>

Step 14 : Now run the application pressing F5.

Step 15 : Now click on the next arrow(->) option, then the following output will appear.

Step 16 : When we hover the mouse over the Name to display the HoverMenu as shown below.

Step 17 : Now click on edit; the row displays update and cancel links in the right column in Edit mode.

Resource

ListView Control in ASP.NET 3.5

Using ListViews in C#

Empty ListView in C#

Editable ListView in C#