no postback from asp:HiddenField in asp:UpdatePanel - asp.net

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

UpdatePanel will not work when you have Response.Write("") on event method. to change value of elements in UpdatePanel, try to use something like this:
hf.Value="something";

Answer 2

dear you need to add the OnValueChanged attribute in Hidden Field and declare the method name, then it will fire click event.
<asp:HiddenField ID="hf" runat="server" Value="0" OnValueChanged="hf_ValueChanged"/>
void hf_ValueChanged(Object sender, EventArgs e)
{
// Display the value of the HiddenField control.
string _strHDFValue = hf.Value;
Response.Write("something...")
}
Good Luck.

Answer 3

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', '');
}

Answer 4

if not works after, add this attribute to UpdatePanel tag:
ChildrenAsTriggers="true"

Answer 5

See your Page_Load if you have any Response.*, if then, you should avoid it when load caused by UpdatePanel.