#asp.net #gridview #ajaxcontroltoolkit
#asp.net #gridview #ajaxcontroltoolkit
Вопрос:
Привет, я пытаюсь добиться той же функциональности, что и пример меню наведения на http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/HoverMenu/HoverMenu.aspx
Однако, когда мой дисплей gridview отображается, и я наведу курсор мыши на меню, но только для всего gridview, а не для каждой строки, как в примере ?. в настоящее время кнопки меню ничего не делают.
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False" DataSourceID="BookingsSQL"
ShowHeader="False" Width="100%" BackColor="Azure" GridLines="None" >
<Columns>
<asp:BoundField DataField="programme_name" HeaderText="programme_name"
SortExpression="programme_name" />
<asp:BoundField DataField="Start" HeaderText="Start" SortExpression="Start" />
<asp:BoundField DataField="Finish" HeaderText="Finish"
SortExpression="Finish" />
<asp:BoundField DataField="Source" HeaderText="Source"
SortExpression="Source" />
<asp:BoundField DataField="Destination" HeaderText="Destination"
SortExpression="Destination" />
<asp:BoundField DataField="Comment" HeaderText="Comment"
SortExpression="Comment" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="BookingsSQL" runat="server"
ConnectionString="<%$ ConnectionStrings:BookingsConnectionString %>"
SelectCommand="SELECT [programme name] AS programme_name, [Start], [Finish], [Source], [Destination], [Comment] FROM [Bookings]">
</asp:SqlDataSource>
<asp:HoverMenuExtender ID="HoverMenuExtender1" runat="server"
TargetControlID="GridView1"
PopupControlID="PopupMenu"
HoverCssClass="popupHover"
PopupPosition="Left"
OffsetX="0"
OffsetY="0"
PopDelay="50">
</asp:HoverMenuExtender>
<asp:Panel CssClass="popupMenu" ID="PopupMenu" runat="server">
<asp:LinkButton ID="LinkButton1" runat="server" CommandName="Edit" Text="Edit" />
<br />
<asp:LinkButton ID="LinkButton2" runat="server"
CommandName="Delete" Text="Delete" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
Пробовал несколько разных способов, используя jquery hover, но это было бы лучшим решением.
Пожалуйста, любая помощь. Спасибо.
Комментарии:
1. Просто откройте образец сайта, поставляемого с AjaxControlToolkit, и посмотрите, как реализована эта функция.
2. Какое поле таблицы Bookings является первичным ключом?
Ответ №1:
Решение есть. Не так сложно реализовать HoverExtender для каждой строки, поскольку это показано в примере примера toolkit, чтобы обеспечить сортировку заголовков столбцов.
Обратите внимание, что в таблицу заказов добавлен суррогатный первичный ключ, позволяющий редактировать значения всех полей. Также используется плагин jQuery datepicker для редактирования значений полей Start и Finish. Вместо этого вы можете использовать DatePickerExtender из AjaxControlToolkit, но в этом случае эти расширители, а также расширители должны быть добавлены для каждой строки в сетке отдельно.
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" DataSourceID="BookingsSQL"
ShowHeader="False" Width="100%" BackColor="Azure" GridLines="None" DataKeyNames="ID">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<table runat="server" visible="<%# Container.DataItemIndex == 0 %>">
<tr>
<th width="20%">
<asp:LinkButton runat="server" CommandName="Sort" CommandArgument="programme_name">
Programme Name
</asp:LinkButton>
</th>
<th width="20%">
<asp:LinkButton runat="server" CommandName="Sort" CommandArgument="Start">
Start
</asp:LinkButton>
</th>
<th width="20%">
<asp:LinkButton runat="server" CommandName="Sort" CommandArgument="Finish">
Finish
</asp:LinkButton>
</th>
<th width="20%">
<asp:LinkButton runat="server" CommandName="Sort" CommandArgument="Source">
Source
</asp:LinkButton>
</th>
<th width="20%">
<asp:LinkButton runat="server" CommandName="Sort" CommandArgument="Destination">
Destination
</asp:LinkButton>
</th>
<th width="20%">
<asp:LinkButton runat="server" CommandName="Sort" CommandArgument="Comment">
Comment
</asp:LinkButton>
</th>
</tr>
</table>
<asp:Panel runat="server" ID="ItemContainer">
<table width="100%">
<tr>
<td width="20%">
<%# Eval("programme_name") %>
</td>
<td width="20%">
<%# Eval("Start", "{0:dd/MM/yyyy}") %>
</td>
<td width="20%">
<%# Eval("Finish", "{0:dd/MM/yyyy}") %>
</td>
<td width="20%">
<%# Eval("Source") %>
</td>
<td width="20%">
<%# Eval("Destination") %>
</td>
<td width="20%">
<%# Eval("Comment") %>
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel CssClass="popupMenu" ID="PopupMenu" runat="server">
<asp:LinkButton ID="LinkButton1" runat="server" CommandName="Edit" Text="Edit" />
<br />
<asp:LinkButton ID="LinkButton2" runat="server" CommandName="Delete" Text="Delete" />
</asp:Panel>
<ajaxToolkit:HoverMenuExtender runat="server" TargetControlID="ItemContainer" PopupControlID="popupMenu"
HoverCssClass="popupHover" PopupPosition="Left" OffsetX="0" OffsetY="0" PopDelay="50">
</ajaxToolkit:HoverMenuExtender>
</ItemTemplate>
<EditItemTemplate>
<table id="Table1" runat="server" visible="<%# Container.DataItemIndex == 0 %>">
<tr>
<th width="20%">
<asp:LinkButton runat="server" CommandName="Sort" CommandArgument="programme_name">
Programme Name
</asp:LinkButton>
</th>
<th width="20%">
<asp:LinkButton runat="server" CommandName="Sort" CommandArgument="Start">
Start
</asp:LinkButton>
</th>
<th width="20%">
<asp:LinkButton runat="server" CommandName="Sort" CommandArgument="Finish">
Finish
</asp:LinkButton>
</th>
<th width="20%">
<asp:LinkButton runat="server" CommandName="Sort" CommandArgument="Source">
Source
</asp:LinkButton>
</th>
<th width="20%">
<asp:LinkButton runat="server" CommandName="Sort" CommandArgument="Destination">
Destination
</asp:LinkButton>
</th>
<th width="20%">
<asp:LinkButton runat="server" CommandName="Sort" CommandArgument="Comment">
Comment
</asp:LinkButton>
</th>
</tr>
</table>
<asp:Panel runat="server" ID="ItemContainer">
<asp:HiddenField runat="server" ID="IdHiddenField" Value='<%# Bind("ID") %>' />
<table width="100%">
<tr>
<td width="20%">
<asp:TextBox ID="TextBox0" runat="server" Text='<%# Bind("programme_name") %>' />
</td>
<td width="20%">
<asp:TextBox ID="TextBox2" CssClass="datePicker" runat="server" Text='<%# Bind("Start", "{0:dd/MM/yyyy}") %>' />
</td>
<td width="20%">
<asp:TextBox ID="TextBox3" CssClass="datePicker" runat="server" Text='<%# Bind("Finish", "{0:dd/MM/yyyy}") %>' />
</td>
<td width="20%">
<asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("Source") %>' />
</td>
<td width="20%">
<asp:TextBox ID="TextBox5" runat="server" Text='<%# Bind("Destination") %>' />
</td>
<td width="20%">
<asp:TextBox ID="TextBox6" runat="server" Text='<%# Bind("Comment") %>' />
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel CssClass="popupMenu" ID="PopupMenu" runat="server">
<asp:LinkButton ID="LinkButton1" runat="server" CommandName="Update" CausesValidation="true"
Text="Update" />
<br />
<asp:LinkButton ID="LinkButton2" runat="server" CommandName="Cancel" CausesValidation="false"
Text="Cancel" />
</asp:Panel>
<ajaxToolkit:HoverMenuExtender runat="server" TargetControlID="ItemContainer" PopupControlID="popupMenu"
HoverCssClass="popupHover" PopupPosition="Left" OffsetX="0" OffsetY="0" PopDelay="50">
</ajaxToolkit:HoverMenuExtender>
</EditItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="BookingsSQL" runat="server" ConnectionString="<%$ ConnectionStrings:BookingsConnectionString %>"
OldValuesParameterFormatString="original_{0}" ConflictDetection="OverwriteChanges"
SelectCommand="SELECT [ID], [programme name] AS programme_name, [Start], [Finish], [Source], [Destination], [Comment] FROM [Bookings]"
DeleteCommand="DELETE FROM [Bookings] WHERE [programme name] = @ID" InsertCommand="INSERT INTO [Bookings] ([programme name], [Start], [Finish], [Source], [Destination], [Comment]) VALUES (@programme_name, @Start, @Finish, @Source, @Destination, @Comment)"
UpdateCommand="UPDATE [Bookings] SET [programme name] = @programme_name, [Start] = @Start, [Finish] = @Finish, [Source] = @Source, [Destination] = @Destination, [Comment] = @Comment WHERE [ID] = @ID">
<DeleteParameters>
<asp:Parameter Name="ID" Type="Int32" />
</DeleteParameters>
<InsertParameters>
<asp:Parameter Name="programme_name" Type="String" />
<asp:Parameter Name="Start" Type="DateTime" />
<asp:Parameter Name="Finish" Type="DateTime" />
<asp:Parameter Name="Source" Type="String" />
<asp:Parameter Name="Destination" Type="String" />
<asp:Parameter Name="Comment" Type="String" />
</InsertParameters>
<UpdateParameters>
<asp:Parameter Name="ID" Type="Int32" />
<asp:Parameter Name="Start" Type="DateTime" />
<asp:Parameter Name="Finish" Type="DateTime" />
<asp:Parameter Name="Source" Type="String" />
<asp:Parameter Name="Destination" Type="String" />
<asp:Parameter Name="Comment" Type="String" />
<asp:Parameter Name="programme_name" Type="String" />
</UpdateParameters>
</asp:SqlDataSource>
Комментарии:
1. Большое спасибо, Юрий. Для меня это намного понятнее, чем другие примеры, которые я просматривал в Интернете !.
2. Мне нужно включить панель обновления, чтобы другие зрители могли вносить изменения, однако, когда я включаю обновление, я получаю сообщение «TargetControlID of » недействителен. Не удалось найти элемент управления с идентификатором ItemContainer» ошибка?. но у каждого элемента управления есть идентификатор, почему я получаю эту ошибку ?.
3. Поясните, пожалуйста, это предложение: «Мне нужно включить панель обновления, чтобы другие зрители могли вносить изменения». Что это значит? Без кода я предполагаю, что вы добавили UpdatePanel в каждый ItemTemplate. Если это верно, просто поместите GridView в панель обновления.
4. Извините, это то, что я имею в виду. Я поместил GridView на панель обновления, однако я получаю сообщение «Элемент управления с идентификатором «ItemContainer» не найден»!. Я не понимаю, почему это выдает эту ошибку, поскольку у каждого элемента управления есть идентификатор.
Ответ №2:
Спасибо за такую большую помощь … это работает для меня, я использовал SqlDataSource вместо использования ObjectDataSource… вот мой рабочий код, который отлично работает для меня….
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1"
ShowHeader="False" Width="100%" BackColor="Azure" GridLines="None" DataKeyNames="PageAddID">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<table id="Table1" runat="server" visible="<%# Container.DataItemIndex == 0 %>">
<tr>
<th width="20%">
<asp:LinkButton ID="LinkButton1" runat="server" CommandName="Sort" CommandArgument="PageName">
Page Name
</asp:LinkButton>
</th>
<th width="20%">
<asp:LinkButton ID="LinkButton2" runat="server" CommandName="Sort" CommandArgument="PageTitle">
PageTitle
</asp:LinkButton>
</th>
<th width="20%">
<asp:LinkButton ID="LinkButton3" runat="server" CommandName="Sort" CommandArgument="Metakeyword">
Metakeyword
</asp:LinkButton>
</th>
<th width="20%">
<asp:LinkButton ID="LinkButton4" runat="server" CommandName="Sort" CommandArgument="Description">
Description
</asp:LinkButton>
</th>
</tr>
</table>
<asp:Panel runat="server" ID="ItemContainer">
<table width="100%">
<tr>
<td width="20%">
<%# Eval("PageName") %>
</td>
<td width="20%">
<%# Eval("PageTitle") %>
</td>
<td width="20%">
<%# Eval("Metakeyword") %>
</td>
<td width="20%">
<%# Eval("Description") %>
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel CssClass="popupMenu" ID="PopupMenu" runat="server">
<asp:LinkButton ID="LinkButton5" runat="server" CommandName="Edit" Text="Edit" />
<br />
<asp:LinkButton ID="LinkButton6" runat="server" CommandName="Delete" Text="Delete" />
</asp:Panel>
<ajaxToolkit:HoverMenuExtender ID="HoverMenuExtender1" runat="server" TargetControlID="ItemContainer" PopupControlID="popupMenu"
HoverCssClass="popupHover" PopupPosition="Left" OffsetX="0" OffsetY="0" PopDelay="10">
</ajaxToolkit:HoverMenuExtender>
</ItemTemplate>
<EditItemTemplate>
<table id="Table1" runat="server" visible="<%# Container.DataItemIndex == 0 %>">
<tr>
<th width="20%">
<asp:LinkButton ID="LinkButton7" runat="server" CommandName="Sort" CommandArgument="PageName">
Page Name
</asp:LinkButton>
</th>
<th width="20%">
<asp:LinkButton ID="LinkButton8" runat="server" CommandName="Sort" CommandArgument="PageTitle">
PageTitle
</asp:LinkButton>
</th>
<th width="20%">
<asp:LinkButton ID="LinkButton9" runat="server" CommandName="Sort" CommandArgument="Metakeyword">
Metakeyword
</asp:LinkButton>
</th>
<th width="20%">
<asp:LinkButton ID="LinkButton10" runat="server" CommandName="Sort" CommandArgument="Description">
Description
</asp:LinkButton>
</th>
</tr>
</table>
<asp:Panel runat="server" ID="ItemContainer">
<asp:HiddenField runat="server" ID="IdHiddenField" Value='<%# Bind("PageAddID") %>' />
<table width="100%">
<tr>
<td width="20%">
<asp:TextBox ID="TextBox0" runat="server" Text='<%# Bind("PageName") %>' />
</td>
<td width="20%">
<asp:TextBox ID="TextBox2" CssClass="datePicker" runat="server" Text='<%# Bind("PageTitle") %>' />
</td>
<td width="20%">
<asp:TextBox ID="TextBox3" CssClass="datePicker" runat="server" Text='<%# Bind("Metakeyword") %>' />
</td>
<td width="20%">
<asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("Description") %>' />
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel CssClass="popupMenu" ID="PopupMenu" runat="server">
<asp:LinkButton ID="LinkButton1" runat="server" CommandName="Update" CausesValidation="true"
Text="Update" />
<br />
<asp:LinkButton ID="LinkButton2" runat="server" CommandName="Cancel" CausesValidation="false"
Text="Cancel" />
</asp:Panel>
<ajaxToolkit:HoverMenuExtender ID="HoverMenuExtender2" runat="server" TargetControlID="ItemContainer" PopupControlID="popupMenu"
HoverCssClass="popupHover" PopupPosition="Left" OffsetX="0" OffsetY="0" PopDelay="10">
</ajaxToolkit:HoverMenuExtender>
</EditItemTemplate>
</asp:TemplateField>
</Columns>
»
OldValuesParameterFormatString=»original_{0}» ConflictDetection=»Перезаписать изменения»
SelectCommand=»ВЫБРАТЬ * ИЗ [AddPages]»
DeleteCommand=»УДАЛИТЬ ИЗ [AddPages] ГДЕ [PageAddId] = @PageAddID»
UpdateCommand="UPDATE [AddPages] SET [PageName] = @PageName, [PageTitle] = @PageTitle, [Metakeyword] = @Metakeyword, [Description] = @Description WHERE [PageAddID] = @PageAddID">
<DeleteParameters>
<asp:Parameter Name="PageAddID" Type="Int32" />
</DeleteParameters>
<InsertParameters>
<asp:Parameter Name="PageName" Type="string" />
<asp:Parameter Name="PageTitle" Type="string" />
<asp:Parameter Name="Metakeyword" Type="string" />
<asp:Parameter Name="Description" Type="string" />
</InsertParameters>
<UpdateParameters>
<asp:Parameter Name="PageAddID" Type="Int32" />
<asp:Parameter Name="PageName" Type="string" />
<asp:Parameter Name="PageTitle" Type="string" />
<asp:Parameter Name="Metakeyword" Type="string" />
<asp:Parameter Name="Description" Type="string" />
</UpdateParameters>
</ContentTemplate>
</asp:UpdatePanel>