Question

问题背景：

我正在使用noUiSlider来允许用户在最大值和最小值（0 - 5000）之间选择价格。然后，所选的最大值和最小值必须绑定到我的视图最大和最小属性，并发布到相关的控制器方法。

问题：

我不确定如何绑定此控件。我有一个使用HTML帮助程序的表单组，例如TextBoxFor，它允许我轻松地将输入绑定到属性，但这是不同的，因为没有用户输入，而是通过nouislider javascript设置值。

我有两个标签 - 如图所示 - 显示控制器中的选定值。

注意：由于我需要将值发布到控制器，因此我已经包含了Html.HiddenFor帮助器来绑定模型，但这些都是空的。

如何将标签中的值绑定到我视图中的模型？

以下代码将显示情况。

守则：

nouislider设置：

var snapSlider = document.getElementById('slider-snap');
    var snapValues = [
        document.getElementById('slider-snap-value-lower'),
        document.getElementById('slider-snap-value-upper')
    ];
    var range = {
        'min': 0,
        '10%': 100,
        '20%': 200,
        '30%': 400,
        '40%': 600,
        '50%': 800,
        '60%': 1000,
        '70%': 2000,
        '80%': 3000,
        '90%': 4000,
        'max': 5000
    };

noUiSlider.create(snapSlider, {
    start: [ 0, 5000 ],
    snap: true,
    connect: true,
    tooltips: true,
    range: range,
    format: wNumb({
        decimals: 0,
        prefix: '$',
    })
});

snapSlider.noUiSlider.on('update', function( values, handle ) {

snapValues[handle].innerHTML = values[handle];

});

形式：

<div class="form-group">
    <div class="maxPricePad height dropWidth">
        <div class="pricePad">
            <label for="formGroupExampleInput">Min. Price:</label>
            <span id="slider-snap-value-lower"></span>
        </div>
        <div>
             <label for="formGroupExampleInput">Max. Price:</label>
             <span id="slider-snap-value-upper"></span>
        </div>
            @Html.HiddenFor(m => m.maxPrice)
            @Html.HiddenFor(m => m.minPrice)
     </div>
  </div>

控制器：

[HttpGet]
public JsonResult UpdateResults(HomePageVM homePageSearch)
{
   //Data logic

   //return JsonResult(data);
}

HomePageVM模型：

public class HomePageVM
{
    public string maxPrice { set; get; }
    public string minPrice { set; get; }
}

Answer 1

根据他们的文档，值（update事件回调的第一个参数）将是一个带有范围值的数组。读取此数组中的第一个和第二个值，并使用它来设置输入字段值。

snapSlider.noUiSlider.on('update', function( values, handle ) {

  var min=values[0];
  var max=values[1];
  $("#maxPrice").val(max);
  $("#minPrice").val(min);

});

此外，您需要确保输入字段（@Html.HiddenFor来电）位于form标记内，这样当您提交表单时，这些值也会提交并可在您的行动方法。

Here是一个有效的js bin示例。

将此滑块控件绑定到MVC模型属性的最佳方法是什么？

1 个答案: