no postback from asp:HiddenField in asp:UpdatePanel

Question

I have the following situation:

.ascx:

 <script type="text/javascript">
  $(document).ready(function () {
        $('.onoffswitch-checkbox').change(function () {
            if ($(this).is(":checked")) 
                $('#hf').val(1);
            else
                $('#hf').val(0);
        });
  });
 </script>

 <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
 <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="hf"/>
        </Triggers>
        <ContentTemplate>
              <input type="checkbox" class="onoffswitch-checkbox">
              <asp:HiddenField ID="hf" runat="server" Value="0"/>
              <asp:Label ID="label" runat="server" Text=""></asp:Label>
        </ContentTemplate>  
 </asp:UpdatePanel>

.vb:

Protected Sub hf_ValueChanged(ByVal sender As Object, ByVal e As EventArgs) Handles hf.ValueChanged

    label.Text = "something..."

End Sub

JS function changes the value of HiddenField after the CheckBox is checked or unchecked, but the ValueChaneged-Event of the HiddenField doesn't fire. I tryed with asp:PostBackTrigger - also no effect, can you see the error?

EDIT:

i tried also to declare the method in the control:

.ascx:

<asp:HiddenField ID="hf" runat="server" Value="0" OnValueChanged="hf_ValueChanged"/>

.vb

 Protected Sub hf_ValueChanged(ByVal sender As Object, ByVal e As EventArgs) 
        label.Text = "something"
 End Sub

no effect.

Answer 1

So, after 2 days experimentation i found the following workaround. It is not very pretty, but it works like I want.

I am not sure, but i think the JS changes the value of the hidden field only on the client site and the server doesn't see the changes and so is the event not fired.

at first I called manually a postback from js:

function changeHFValue(element) {
  if ($(element).is(":checked")) 
     $('#<%= hf.ClientID %>').val(1);
  else 
     $('#<%= hf.ClientID %>').val(0);
   __doPostBack('UpdatePanel1', ''); //postback
}

ascx:

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always" EnableViewState="true">
    <ContentTemplate>
        <asp:HiddenField ID="hf" runat="server"/>
        <input type='checkbox' onchange='changeHFValue(this);' id='cb'/>   
        <asp:Label ID="label" runat="server" Text=""></asp:Label>
     </ContentTemplate>  
</asp:UpdatePanel> 

now is the event fired because of postback, it goes in the method in .vb:

 Protected Sub hf_ValueChanged(ByVal sender As Object, ByVal e As EventArgs) Handles hf.ValueChanged
    If hf.Value Then
        label.Text = "something"
    Else
        label.Text = "something else"
    End If
 End Sub  

the new problem was that the checkbox was always unchecked after postback, when the UpdatePanel was reloaded. The solution is to look at the HiddenField:

$(document).ready(function () {
   // bind your events here initially
   bind();
});

var prm = Sys.WebForms.PageRequestManager.getInstance(); // Page request manager

prm.add_endRequest(function () {
    // re-bind your events here after postback
    bind();
});

function bind() {
    if ($('#<%= hf.ClientID %>').val() == 1) 
       $('#cb').prop('checked', 'checked');
    else 
       $('#cb').prop('checked', '');
}