Question

我正在开发一个ASP.Net网页，该网页将使用jQuery下拉列表（http://code.google.com/p/dropdown-check-list/）。我对JavaScript很缺乏经验，对jQuery也是新手。

基本上，我的问题是：如何从服务器端更新jQuery DropdownChecklist中的选定项？

注意：有关解决方案的详细信息，请滚动到问题的底部。

这里有一些背景可以让你更好地了解我正在做的事情......

我有一个jQuery DropdownChecklist，它在页面加载时被填充。当用户选择DropdownChecklist中的项目时，收集所选值并将其存储在隐藏输入字段中，然后执行回发，这允许服务器更新服务器控件。这部分正在运作。

现在，这是我的问题。此服务器控件实际上是一个用户控件，它为DropdownChecklist中的每个选定项目都有一个“删除”按钮。单击“删除”按钮时，应该导致取消选择jQuery DropdownChecklist中的关联项。所以，到目前为止，我还没有想出如何实现这一目标。

以下是一些相关的代码段：

这是标记...

<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，感谢您的帮助。

Answer 1

因此，通过评论的漫长反复，解决方案最终将取消选择过程移动到客户端，并在单击控件时使用javascript和jquery取消选择该项。

如何从服务器端更新jQuery DropdownChecklist？

1 个答案: