¿Cómo actualizar jQuery DropdownChecklist desde el servidor?

Question

estoy trabajando en una página web ASP.Net que utilizará el jQuery desplegable lista de control (http://code.google.com/p/dropdown-check-list/). Soy bastante inexperto con JavaScript y completamente nuevo en jQuery.

Básicamente, mi pregunta es: ¿Cómo se actualiza los elementos seleccionados en un jQuery DropdownChecklist desde el lado del servidor?

---

NOTA: Para más detalles sobre la solución, desplazarse hasta el fondo de la cuestión.

---

He aquí algunos antecedentes para darle una mejor idea de lo que estoy haciendo ...

Tengo un jQuery DropdownChecklist que se está llenando a medida que se carga la página. Cuando un usuario selecciona un elemento en la lista de verificación desplegable, los valores seleccionados se recopilan y almacenan en un campo de entrada oculto, luego se realiza una devolución de datos, lo que permite que el servidor actualice un control de servidor. Esta parte está funcionando.

Ahora, aquí es mi problema. Este control de servidor, que en realidad es un control de usuario, tiene un botón "Eliminar" para cada elemento seleccionado en la lista desplegable. Cuando se hace clic en el botón "Eliminar", debe eliminarse la selección del elemento asociado en la lista desplegable de jQuery. Por lo tanto, hasta ahora no he descubierto cómo hacer que eso suceda.

He aquí algunos fragmentos de código relevantes:

Aquí está el marcado ...

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

Aquí está el código 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(); 
}); 
}); 

Aquí es el margen de beneficio de la 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> 

Aquí hay algunas partes relevantes del código subyacente ...

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 

Aquí está una función de JavaScript que hace lo que yo quiero ...

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

Sin embargo, no estoy seguro de que estoy llamando justo desde el evento onClientClick. ¿Esto se ve bien?

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

Después de algunas idas y venidas en los comentarios, aquí está la solución que funcionó ...

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

Se determinó la solución más simple fue llamar a la función de JavaScript del lado del cliente en lugar que intentar hacerlo desde el lado del servidor. El ImageButton tiene un evento onClientClick, pero por alguna razón no funcionó. Sin embargo, al ajustar el ImageButton en una etiqueta de anclaje del lado del cliente y al usar su evento onclick, se realizó el encantamiento.

Gracias, Coding Gorilla, por toda su ayuda.

Answer 1

Por lo tanto, a través de un largo ir y venir a través de los comentarios, la solución resultó ser mover el proceso de deselección al lado del cliente, y usar javascript y jquery para anular la selección del elemento cuando se hace clic en él.