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