Wie aktualisiert man die jQuery Dropdown-Checkliste von der Serverseite?

Question

Ich arbeite an einer ASP.Net-Webseite, die die jQuery Dropdown-Checkliste (http://code.google.com/p/dropdown-check-list/) verwenden wird. Ich bin ziemlich unerfahren mit JavaScript und völlig neu in jQuery.

Grundsätzlich ist meine Frage: Wie aktualisieren Sie die ausgewählten Elemente in einer jQuery Dropdown-Checkliste von der Server-Seite?

---

HINWEIS: Einzelheiten zu der Lösung, scrollen Sie nach unten die Rede sein.

---

Hier einige Hintergrundinformationen Ihnen eine bessere Vorstellung davon zu geben, was ich ... tun

Ich habe einen jQuery DropdownChecklist, die beim Laden der Seite bevölkert wird. Wenn ein Benutzer ein Element in der Dropdown-Checkliste auswählt, werden die ausgewählten Werte gesammelt und in einem versteckten Eingabefeld gespeichert. Anschließend wird ein Postback ausgeführt, mit dem der Server ein Server-Steuerelement aktualisieren kann. Dieser Teil funktioniert.

Jetzt ist hier mein Problem. Dieses Server-Steuerelement, das eigentlich eine Benutzersteuerung ist, hat eine Schaltfläche "Entfernen" für jedes ausgewählte Element in der Dropdown-Checkliste. Wenn auf die Schaltfläche "Entfernen" geklickt wird, sollte das zugehörige Element in der jQuery Dropdown-Checkliste deaktiviert werden. So weit habe ich noch nicht herausgefunden, wie ich das erreichen kann.

Hier einige relevante Code-Schnipsel:

Hier ist das Markup ...

<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> 

Hier ist das 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(); 
}); 
}); 

Hier ist das Markup des 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> 

Hier einige relevante Teile des Codes-behind ...

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 

Hier ist eine JavaScript-Funktion, die das tut, was ich will ...

function DeselectFilter(targetString){ 
    $("#s1 option").each(function(){ 
     if($(this).text() === targetString) $(this).attr("selected", ""); 
    }); 
    $("#s1").dropdownchecklist("refresh"); 
}; 

Aber ich bin nicht sicher, ich rufe direkt vom onClientClick-Ereignis. Sieht das richtig aus?

<asp:ImageButton ID="ibRemove" runat="server" ImageUrl="~/images/delete.gif" CommandArgument='<%#Eval("filterName") %>' OnCommand="ibRemove_Click" OnClientClick='DeselectFilter("<%#Eval("filterName") %>");' /> 

Nach einigem Hin und Her in den Kommentaren, hier ist die Lösung, die ... arbeitete

<a onclick='DeselectFilter("<%#Eval("filterName") %>");'> 
    <asp:ImageButton ID="ibRemove" runat="server" ImageUrl="~/images/delete.gif" CommandArgument='<%#Eval("filterName") %>' OnCommand="ibRemove_Click" /> 
</a> 

Wir die einfachste Lösung bestimmt war, die JavaScript-Funktion von der Client-Seite aufrufen eher als versuchen Sie es von der Server-Seite zu tun. Das ImageButton hat ein onClientClick-Ereignis, aber aus irgendeinem Grund hat es nicht funktioniert. Das Wrapping des ImageButtons in einem clientseitigen Anchor-Tag und die Verwendung seines onclick-Ereignisses haben jedoch den Charme.

Vielen Dank, Coding Gorilla, für alle Ihre Hilfe.

Answer 1

Also durch eine lange Hin-und-her durch die Kommentare, die Lösung erwies sich, den Abwahlprozess auf die Client-Seite zu verschieben, und Javascript und jquery verwenden, um das Element abzuwählen, wenn ein Steuerelement angeklickt wird.