none
RadioButtonList, uncheck via javascript non fa scattare l'evento SelectedIndexChanged RRS feed

  • Domanda

  • Ciao a tutti, mi è capitato di dover deselezionare via javascript un gruppo di radiobutton ed in fase di postaback non viene richiamato l'evento SelectedIndexChanged.

    La situazione è la seguente:

    1) Il RadioButtonList viene popolata con uno dei ListItem elementi selezionato

    2) Via javascript, viene deselezionato il radiobutton ccon il seguente codice

    $('#RadioButtonList1 :radio:visible').each(function (index, element) {
      element.checked = false;
    });
    
    

    3) Faccio la submit tramite un normale asp:button


    Essendo inizialmente selezionato un elemento durante la fase di postback mi aspetterei che il SelectedIndexChanged fosse richiamato invece no.

    Da quanto ne so la fase di raccolta dei dati della form sulla postback è gestita dal metodo LoadPostData definito nell'interfaccia IPostBackDataHandler.

    Ho derivato una classe da RadioButtonList per verificare quando viene richiamato il metodo LoadPostData ed ho scoperto che quando nessuno dei radiobutton è selezionato, nella Request.Form manca (giustamente) la key relativa, quindi mi viene da pensare che nel caso in cui non ci sia la key nella Form, la LoadPostData non venga proprio richiamata e di conseguenza neanche l'evento. Mi sarei aspettato che venisse richiamata e che il SelectedIndex venisse impostato a -1.

    Sono fuori pista? C'è una soluzione ?

    Grazie

     

    lunedì 4 aprile 2011 17:50

Risposte

  • Ciao,

    Come detto l'evento non scatta poichè non viene eseguito un post dal controllo ma viene modificato lato client ogni singolo radio button che compone la RadioButtonList.

    L'unico modo "semplice" per risolvere il problema è far scaturire il postback dalla funzione javascript e impostare lato server il Selectedindex a -1

    Riprendendo ilcodice di esempio postato in precedenza:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
      <title></title>
    
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
      <script type="text/javascript">
    
        function deselect() {
          $('#RadioButtonList1 :radio:visible').each(function(index, element) {
            element.checked = false;
          });
          document.getElementById('<%=LinkButton1.ClientId %>').click(); //1° Metodo
          //__doPostBack('LinkButton1', ''); //2° metodo
        }
    
      </script>
    
    </head>
    <body>
      <form id="form1" runat="server">
      <div>
        <a href="javascript:deselect();">TEST</a>
        <asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True">
          <asp:ListItem Value="TEST" Text="TEST"></asp:ListItem>
          <asp:ListItem Value="TEST1" Text="TEST1"></asp:ListItem>
          <asp:ListItem Value="TEST2" Text="TEST2"></asp:ListItem>
          <asp:ListItem Value="TEST3" Text="TEST3"></asp:ListItem>
        </asp:RadioButtonList>
        <asp:LinkButton ID="LinkButton1" runat="server"></asp:LinkButton>
        <asp:Button ID="btnTest" runat="server" Text="Test" OnClick="btnTest_Click" />
      </div>
      </form>
    </body>
    </html>
    
    

    Code Behind:

    Partial Class Test
      Inherits System.Web.UI.Page
    
      Protected Sub RadioButtonList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles RadioButtonList1.SelectedIndexChanged
        Response.Write(Now.ToString)
      End Sub
      Protected Sub btnTest_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Response.Write(RadioButtonList1.SelectedValue)
      End Sub
    
      Protected Sub LinkButton1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles LinkButton1.Click
        RadioButtonList1.SelectedIndex = -1
      End Sub
    End Class
    

    Spero di esserti stato comunque utile

    Ciao


    Luca Congiu (congiuluc)
    • Contrassegnato come risposta lcestola mercoledì 6 aprile 2011 15:37
    mercoledì 6 aprile 2011 14:03
    Moderatore

Tutte le risposte

  • Hai impostato nel RadioButtonList AutoPostBack="true" ?

    Ciao

     


    Luca Congiu (congiuluc)
    martedì 5 aprile 2011 07:22
    Moderatore
  • Ciao Luca, innanzi tutto grazie per la risposta. per scrupolo ho provato, ma chiaramente il postback non è partito, perché l'uncheck lo faccio via JS impostando il campo checked dell'INPUT a false.

    Ad ogni modo, come spiego nel post, il problema l'ho individuato, ma non riesco a capire se c'è una soluzione semplice.



    martedì 5 aprile 2011 17:38
  • Ho provato a ricreare il tuo caso ma non ci sono riuscito:

    Pagina ASPX

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
      <title></title>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
    <script type="text/javascript">
    
      function deselect() {
        $('#RadioButtonList1 :radio:visible').each(function(index, element) {
          element.checked = false;
        });
      }
    
    </script>
    </head>
    <body>
      <form id="form1" runat="server">
      
      <div>
        <a href="javascript:deselect();">TEST</a>
        <asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True">
        <asp:ListItem Value="TEST" Text=TEST></asp:ListItem>
        <asp:ListItem Value="TEST1" Text=TEST1></asp:ListItem>
        <asp:ListItem Value="TEST2" Text=TEST2></asp:ListItem>
        <asp:ListItem Value="TEST3" Text=TEST3></asp:ListItem>
        </asp:RadioButtonList>
      </div>
      </form>
    </body>
    </html>
    
    

    Code Behind

    Partial Class Test
      Inherits System.Web.UI.Page
    
      Protected Sub RadioButtonList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles RadioButtonList1.SelectedIndexChanged
        Response.Write(Now.ToString)
      End Sub
    End Class
    
    

    Con questo esempio di codice funziona sia il javascript che l'evento SelectedIndexChanged

     


    Luca Congiu (congiuluc)
    mercoledì 6 aprile 2011 07:30
    Moderatore
  • Ciao Luca, ho provato l'esempio che mi hai inviato. Quando seleziono un elemento (chiaramente) scatta il postback e quandi il SelectedIndexChanged. Se poi sul link TEST la radio button viene deselezionata, ma l'evento non scatta!

    Mi puoi confermare se a te funziona il secondo caso?

    Grazie mille!

    mercoledì 6 aprile 2011 09:24
  • Ho capito no, l'evento non scatta poichè non viene effettuato alcun post sulla pagina,

    lo spiega nella pagina MSDN:

    "Occurs when the selection from the list control changes between posts to the server."

    http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.listcontrol.selectedindexchanged.aspx

    NB Se hai bisogno di eseguire del codice lato server attraverso la funzione javascript che deseleziona tutti i radiobutton, potresti utilizzare uno stratagemma (non proprio elegante ma funzionale):

    Inserisci un LinkButton nascosto ed eseguire il click del link button via jquery vedrai che scatterà l'evento e a quel punto potrai eseguire del codice lato server per l'evento voluto.

    Ciao


    Luca Congiu (congiuluc)
    mercoledì 6 aprile 2011 10:02
    Moderatore
  • Luca perdonami, per non tediarti ho cercato di non essere prolisso, con il risultato di farti perdere del tempo! Perdonami :)

    Se aggiungi un <asp:button> e deselezioni il radiobutton con la funzione JS e poi fai una submit manuale tramite il button, l'evento non scatta e la radio button risulta ancora selezionata.

    Grazie ancora per il tuo prezioso tempo.

     


    mercoledì 6 aprile 2011 10:52
  • Ciao,

    Come detto l'evento non scatta poichè non viene eseguito un post dal controllo ma viene modificato lato client ogni singolo radio button che compone la RadioButtonList.

    L'unico modo "semplice" per risolvere il problema è far scaturire il postback dalla funzione javascript e impostare lato server il Selectedindex a -1

    Riprendendo ilcodice di esempio postato in precedenza:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
      <title></title>
    
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
      <script type="text/javascript">
    
        function deselect() {
          $('#RadioButtonList1 :radio:visible').each(function(index, element) {
            element.checked = false;
          });
          document.getElementById('<%=LinkButton1.ClientId %>').click(); //1° Metodo
          //__doPostBack('LinkButton1', ''); //2° metodo
        }
    
      </script>
    
    </head>
    <body>
      <form id="form1" runat="server">
      <div>
        <a href="javascript:deselect();">TEST</a>
        <asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True">
          <asp:ListItem Value="TEST" Text="TEST"></asp:ListItem>
          <asp:ListItem Value="TEST1" Text="TEST1"></asp:ListItem>
          <asp:ListItem Value="TEST2" Text="TEST2"></asp:ListItem>
          <asp:ListItem Value="TEST3" Text="TEST3"></asp:ListItem>
        </asp:RadioButtonList>
        <asp:LinkButton ID="LinkButton1" runat="server"></asp:LinkButton>
        <asp:Button ID="btnTest" runat="server" Text="Test" OnClick="btnTest_Click" />
      </div>
      </form>
    </body>
    </html>
    
    

    Code Behind:

    Partial Class Test
      Inherits System.Web.UI.Page
    
      Protected Sub RadioButtonList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles RadioButtonList1.SelectedIndexChanged
        Response.Write(Now.ToString)
      End Sub
      Protected Sub btnTest_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Response.Write(RadioButtonList1.SelectedValue)
      End Sub
    
      Protected Sub LinkButton1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles LinkButton1.Click
        RadioButtonList1.SelectedIndex = -1
      End Sub
    End Class
    

    Spero di esserti stato comunque utile

    Ciao


    Luca Congiu (congiuluc)
    • Contrassegnato come risposta lcestola mercoledì 6 aprile 2011 15:37
    mercoledì 6 aprile 2011 14:03
    Moderatore