将 Slider 值从 jQuery 传递到代码后面

Question

I am using ASP.NET with C# as Code Behind. The thing is, I've put a jQuery Slider in my code but I can't get the values from the slider into C# (already looked everywhere on the web) and I need them because the Slider Values must act as filters for the project I am doing (a web where you can buy products). I know you can't get the values directly from jQuery to C#, but I've tried passing them to ASP.NET and still seems inaccessible.

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
      $(function () {
          $("#slider-range").slider({
          range: true,
          min: 0,
          max: 3000,
          values: [ 50, 500 ],
          slide: function( event, ui ) {
              $("#amount").val(ui.values[0] + "€ - " + ui.values[1] + "€");      
      }
          });

        $( "#amount" ).val($( "#slider-range" ).slider( "values", 0 ) +
            "€ - " + $("#slider-range").slider("values", 1) + "€");
      } );
  </script>
<p>
  <asp:Label for="amount" runat="server">Precio:</asp:Label>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>


<div id="slider-range">
</div>

Now, here it is what it looks like:

"amount" just showcases the values of the slider in the "Precio" Label. I need a variable and pass it to ASP then to C#, how can I do it?

So basically, when I hit the button marked in red I want to get both the minimum and maximum selected values in C#, because I have to pass them to the different layers of the project.

I have already tried using a hidden type on asp to put the jQuery values in it, but when I try to get the values from the hidden type in C# I just get nulls.

Answer 1

You need to post back to asp.net with an HTTP POST. It seem you are using Asp.Net Web Forms, so you can register to the change event of your slider. Check this documentation

You can do this with asp.net MVC:

$(".btnSend").click(function(){
  $.post("/Controller/Action", { amount: $('#amount').val() }, function(data, status){
    //Response callback
    alert("Data: " + data + "\nStatus: " + status);
  });
});

Answer 2

To pass data from javascript to code behind, you can put the data in an element known by the code-behind, that means the element, eg an hidden field:

<asp:HiddenField ID="myValueField" ClientIdMode='STATIC' runat="server" />

Put the values in it like you did in your post:

$("#myValueField").val(ui.values[0] + "€ - " + ui.values[1] + "€");

Make sure, the Hidden Field is inside your Page-Form-Control and your button is causing an server-side postback.

Answer 3

No need for any hidden field or ajax, just change your input to a textbox. Replace

<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">

with

<asp:TextBox ID="amount" ClientID="amount" ClientIDMode="static" runat="server" Style="border:0; color:#f6931f; font-weight:bold;" ReadOnly="True"/>

Then in the Code Behind, the value of the amount field will be the two values you want. Parse the values out with some string manipulation, maybe:

var amt = amount.Value; // You may need to do something more here to get the value; it's been a
                        // few years since I worked with webforms...
var split = amt.Split(" - ");
var first = split[0].Replace("€", "");
var second =split[1].Replace("€", ""); 
// Do what you need to do with first and second...