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

Question

我使用 ASP.NET 和 C# 作为代码隐藏。 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我正在做（web，您可以在其中购买产品）。 我知道您无法直接从 jQuery 到 C# 获取值，但我尝试将它们传递给 ASP.NET 并且似乎仍然无法访问。

  <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>

现在，这就是它的样子：

“金额”只是展示了“Precio”Label 中 slider 的值。 我需要一个变量并将其传递给 ASP，然后传递给 C#，我该怎么做？

所以基本上，当我点击标记为红色的按钮时，我想同时获得 C# 中的最小和最大选定值，因为我必须将它们传递给项目的不同层。

我已经尝试在 asp 上使用隐藏类型将 jQuery 值放入其中，但是当我尝试从 C# 中的隐藏类型中获取值时，我只得到空值。

Answer 1

您需要使用 HTTP POST 回帖到 asp.net。 看来您正在使用 Asp.Net Web Forms，因此您可以注册到 slider 的更改事件。 检查此文档

您可以使用 asp.net MVC 执行此操作：

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

Answer 2

要将数据从 javascript 传递到代码隐藏，您可以将数据放在代码隐藏已知的元素中，这意味着元素，例如隐藏字段：

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

像您在帖子中所做的那样将值放入其中：

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

确保隐藏字段位于您的 Page-Form-Control 内，并且您的按钮导致服务器端回发。

Answer 3

不需要任何隐藏字段或 ajax，只需将您的输入更改为文本框。 代替

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

和

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

然后在后面的代码中， amount字段的值将是您想要的两个值。 通过一些字符串操作来解析值，也许：

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...