Я работаю над веб-страницей ASP.Net, которая будет использовать выпадающий список jQuery (http://code.google.com/p/dropdown-check-list/). Я довольно неопытен в JavaScript и совершенно не знаком с jQuery.
По сути, мой вопросis: Как обновить выбранные элементы в выпадающем списке jQuery со стороны сервера?
ПРИМЕЧАНИЕ: Для получения подробной информации о решении перейдите кв нижней части вопроса.
Вот некоторая предыстория, чтобы дать вам лучшее представление о том, что я делаю ...
У меня есть jQuery DropdownChecklist, который заполняется, когдастраница загружается. Когда пользователь выбирает элемент в DropdownChecklist, выбранные значения собираются и сохраняются в скрытом поле ввода, затем выполняется обратная передача, которая позволяет серверу обновить серверный элемент управления. Эта часть работает.
Теперь вот моя проблема: этот серверный элемент управления, который фактически является пользовательским, имеет кнопку «Удалить» для каждого выбранного элемента в DropdownChecklist. Когда «Удалить» bНажатие на utton должно привести к отмене выбора связанного элемента в выпадающем списке jQuery.Итак, пока я не понял, как это сделать.
Вот некоторые соответствующие фрагменты кода:
Вот разметка ...
<asp:ScriptManager ID="smScriptMgr" runat="server" />
<table>
<tr>
<td>
<select id="s1" multiple="true" runat="server" />
</td>
</tr>
<tr>
<td>
<asp:UpdatePanel ID="UP1" runat="server">
<ContentTemplate>
<input id="inpHide" type="hidden" runat="server" />
<uc1:SelectedFilterBox ID="sfbFilters" runat="server" Width="200" />
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
ВотJavaScript ...
function DoPostback() {
__doPostBack('UP1', '');
};
$(function () {
$("#s1").dropdownchecklist({ forceMultiple: true, width: 200, textFormatFunction: function() {
return "Filters:";
}
});
$('#s1').change(function () {
var values = $(this).val();
document.getElementById("inpHide").value = values;
DoPostback();
});
});
Вот разметка usercontrol ...
<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="SelectedFilterBox.ascx.vb"
Inherits="SelectedFilterBox.SelectedFilterBox" %>
<div>
<asp:Table ID="tblFilters" runat="server" Width="200">
<asp:TableRow>
<asp:TableCell>
<asp:Repeater ID="rpFilters" runat="server" Visible="false">
<ItemTemplate>
<table class="selectedFilter">
<tr>
<td class="selectedFilterLeft">
<%# Eval("filterName")%>
</td>
<td class="selectedFilterRight" align="right">
<asp:ImageButton ID="ibRemove" runat="server" ImageUrl="~/images/delete.gif" CommandArgument='<%#Eval("filterName") %>' OnCommand="ibRemove_Click" />
</td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</div>
Вот некоторые важные части кода позади ...
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
'populate dropdown checklist
s1.Items.Add("Filter A")
s1.Items.Add("Filter B")
s1.Items.Add("Filter C")
Else
'update filters based on contents of hidden input field
UpdateFilters(inpHide.Value)
End If
End Sub
Private Sub UpdateFilters(ByVal filters As String)
Dim Filter() As String = Split(filters, ",")
Dim Index As Integer = 0
'clear existing filters
sfbFilters.Clear()
'loop through adding filters based on supplied string
For Each str As String In Filter
sfbFilters.Add(str, Index.ToString())
Index += 1
Next str
End Sub
'this event occurs when a Remove button is clicked
Protected Sub sfbFilters_FilterChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles sfbFilters.FilterChanged
'update hidden input field
inpHide.Value = UpdateHiddenField()
'update label, listing (filter, value) pairs
UpdateFilterValueSets()
End Sub
Вот функция JavaScript, которая делает то, что я хочу ...
function DeselectFilter(targetString){
$("#s1 option").each(function(){
if($(this).text() === targetString) $(this).attr("selected", "");
});
$("#s1").dropdownchecklist("refresh");
};
Однако я не уверен, что вызываю ее прямо из события onClientClick.Выглядит ли это правильно?
<asp:ImageButton ID="ibRemove" runat="server" ImageUrl="~/images/delete.gif" CommandArgument='<%#Eval("filterName") %>' OnCommand="ibRemove_Click" OnClientClick='DeselectFilter("<%#Eval("filterName") %>");' />
После того, как в комментариях есть кое-что, вот решение, которое сработало ...
<a onclick='DeselectFilter("<%#Eval("filterName") %>");'>
<asp:ImageButton ID="ibRemove" runat="server" ImageUrl="~/images/delete.gif" CommandArgument='<%#Eval("filterName") %>' OnCommand="ibRemove_Click" />
</a>
Мы определили, что самым простым решением было вызватьфункция JavaScript со стороны клиента, а не пытаться сделать это со стороны сервера.ImageButton имеет событие onClientClick, но по какой-то причине оно не работает.Тем не менее, обертывание ImageButton в клиентском теге привязки и использование его события onclick сделали свое дело.
Спасибо, Coding Gorilla , за всю вашу помощь.