Jquery slider. On Slider Stop raise server side event - asp.net

Question

i would like to raise a server side event at the mouseup event of the jquery slider.
How can i accomplish this? Can you point me a good place to start?
The server side code i would like to call is
Private Sub LoadBlock(ByVal AA As Integer)
'A lot of stuff here
End Sub
The value gathered from the Jquery slider event should be passed as a parameter in the procedure above
My current JQuery is
<script type="text/javascript">
$(document).ready(function () {
var Country = ['<% =String.Join("', '", arrayString)%>'];
$('#slider-range-max').slider({
max: '<%= arrayLength%>',
min: 0,
value: '<%= iValue%>',
slide: function (event, ui) {
var splitValues = Country[ui.value].split("~");
$('#lblGame').html(splitValues[0]);
$('#hpHome').html(splitValues[1]);
},
stop: function (event, ui) { }
});
});
</script>
Finally this is not a homework!!!

Answer 1

<script type="text/javascript">
$(document).ready(function () {
var Country = ['<% =String.Join("', '", arrayString)%>'];
$('#slider-range-max').slider({
max: '<%= arrayLength%>',
min: 0,
value: '<%= iValue%>',
slide: function (event, ui) {
var splitValues = Country[ui.value].split("~");
$('#lblGame').html(splitValues[0]);
$('#hpHome').html(splitValues[1]);
},
stop: function (event, ui) {
//bof:AJAX hit
var path="YourPageName.aspx/NewMethod";
$.ajax({
url:path,type:"POST",cache:"false",
dataType:"json",contentType:"application/json; charset=utf-8",
data:"{'str1':'Some Temp String'}",
success:function(response){alert("response is "+response.d);
},error:function(){
}
});
//eof:AJAX hit
}
});
});
</script>
and in code behind:
<System.Web.Services.WebMethod> _
Public Shared Function NewMethod(str1 As String) As String
'make same name of variable as in json data
'do your server side stuff
Return "Success"
End Function

Answer 2

I don't have tested this code but certainly this will help you
take one button
<asp:Button ID="img_update" runat="server" Text="Submit" style='display:none' OnClick="img_update_Click" />
your method non-static method
protected void img_update_Click(object sender, EventArgs e)
{
//your code -behind
}
Now your jquery will looks like
<script type="text/javascript">
$(document).ready(function () {
var Country = ['<% =String.Join("', '", arrayString)%>'];
$('#slider-range-max').slider({
max: '<%= arrayLength%>',
min: 0,
value: '<%= iValue%>',
slide: function (event, ui) {
var splitValues = Country[ui.value].split("~");
$('#lblGame').html(splitValues[0]);
$('#hpHome').html(splitValues[1]);
},
stop: function (event, ui) {
document.getElementById('client id of button').click();
}
});
});
</script>
I hope this will give you better idea how to implement non-static method regards.....:)