Come aggiornare jQuery DropdownChecklist dal lato server?

Question

Sto lavorando a una pagina Web ASP.Net che utilizzerà la lista di controllo a discesa jQuery (http://code.google.com/p/dropdown-check-list/). Sono abbastanza inesperto con JavaScript e completamente nuovo per jQuery.

In sostanza, la mia domanda è: Come si aggiorna gli elementi selezionati in un jQuery DropdownChecklist dal lato server?

---

NOTA: Per i dettagli sulla soluzione, scorrere fino alla fine della questione.

---

Ecco alcuni retroscena per darvi una migliore idea di quello che sto facendo ...

Ho un DropdownChecklist jQuery che viene popolato al caricamento della pagina. Quando un utente seleziona un elemento in DropdownChecklist, i valori selezionati vengono raccolti e archiviati in un campo di input nascosto, quindi viene eseguito un postback, che consente al server di aggiornare un controllo server. Questa parte sta funzionando.

Ora, ecco il mio problema. Questo controllo server, che in realtà è un controllo utente ha un pulsante "Rimuovi" per ciascun elemento selezionato nella DropdownChecklist. Quando si fa clic sul pulsante "Rimuovi", dovrebbe essere deselezionato l'elemento associato in Droplist Checklist jQuery. Quindi, finora non ho capito come farlo accadere.

Ecco alcuni frammenti di codice in materia:

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

Ecco il 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(); 
}); 
}); 

Ecco il markup di 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> 

Ecco alcune porzioni rilevanti del code-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 

Ecco una funzione JavaScript che fa quello che voglio ...

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

Tuttavia, non sono sicuro che sto chiamando direttamente dall'evento onClientClick. Questo sembra giusto?

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

Dopo un po 'avanti e indietro nei commenti, ecco la soluzione che ha funzionato ...

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

Abbiamo determinato la soluzione più semplice era quella di chiamare la funzione JavaScript dal lato client piuttosto di provare a farlo dal lato server. ImageButton ha un evento onClientClick, ma per qualche motivo non ha funzionato. Tuttavia, il wrapping del pulsante ImageButton in un tag di ancoraggio sul lato client e l'utilizzo del relativo evento onclick ha funzionato.

Grazie, Coding Gorilla, per tutto il vostro aiuto.

Answer 1

Quindi attraverso un lungo back-and-end attraverso i commenti, la soluzione si è rivelata quella di spostare il processo di deselezione sul lato client e utilizzare javascript e jquery per deselezionare l'elemento quando viene fatto clic su un controllo.