如何将模型值绑定到 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>

如何绑定模型值而不是在这里分配静态值 (.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 设置器。

由于Percentage 属性在您的视图模型中定义，它会自动呈现为滑块的Name 属性。

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