javascript - 如何将模型值绑定(bind)到kendo.ui.Slider？

Question

我在 MVC 应用程序中使用 kendo.ui.Slider，如下所示:

@(Html.Kendo().Slider()
                .Name("slider") //The name of the slider is mandatory. It specifies the "id" attribute of the widget.
                .Min(0) //Set min value of the slider
                .Max(100000) //Set min value of the slider
                .Value(50000) //Set the value of the slider
                .SmallStep(1000)
                .LargeStep(10000)
                .HtmlAttributes(new { style = "width:700px;" })
                        .Tooltip(tooltip =>
                        {
                            tooltip.Format("{0:n0}");
                        })
                .Events(e =>
                        {
                            e.Change("sliderOnChange");
                        })
            )
            <script>
                function sliderOnChange(e) {
                    var slider = $("#slider").data("kendoSlider");
                    var sliderValue = slider.value();
                    alert(sliderValue);
                }
            </script>

如何绑定(bind)模型值而不是在此处分配静态值 (.Value(50000))？

Answer 1

型号

如果您有如下模型:

public class AModel
{
    public int? Percentage { get; set; }
}

上面允许在针对模型的操作中设置属性。

然后您可以使用 SliderFor 而不是 Slider

查看

@(Html.Kendo().SliderFor(m => m.Percentage)
                .Min(0) //Set min value of the slider
                .Max(100000) //Set min value of the slider
                .SmallStep(1000)
                .LargeStep(10000)
                .HtmlAttributes(new { style = "width:700px;" })
                        .Tooltip(tooltip =>
                        {
                            tooltip.Format("{0:n0}");
                        })
                .Events(e =>
                        {
                            e.Change("sliderOnChange");
                        })
            )

请注意上面删除的 Name 属性和 Value setter 。

由于 Percentage 属性是在 View 模型中定义的，因此它会自动呈现为 slider 的 Name 属性。

这允许模型绑定(bind)器拾取它并将设置值发布到模型对象中。