asp.net - Ajax slider 控件显示非数字值

Question

我正在尝试使用 Slider来自 AjaxControlTookit 的控制，我的问题是我无法找到一种方法来显示绑定(bind)到 slider 的标签内的非数字值。我的代码如下所示..

代码:

<asp:TextBox ID="txtSlider" runat="server" style="display:none;/>
 <ajaxToolkit:SliderExtender ID="slider1" runat="server" TargetControlID="txtSlider" Steps="3"  BoundControlID="lblSliderValue" Minimum="1" Maximum="3" Orientation="Vertical"></ajaxToolkit:SliderExtender>
 <asp:Label ID="lblSliderValue" runat="server" />

lblSliderValue 只显示 0,1 和 2 的值，但是我需要低、中和高。到目前为止我还没有找到任何方法来指定这些。我尝试添加文本框的 OnTextChanged="txtSlider_textChanged" AutoPostBack="true" 并在后面的代码中设置 lblSliderValue ，但没有成功。关于如何实现这一目标有什么想法吗？

Answer 1

slider 中未实现此类功能。那么让我们对其进行一些定制。 首先，您需要下载工具包源。我们将修改两个文件(我将提供这些文件的 codeplex 链接，以便您可以轻松地在解决方案中找到它们):SliderExtender.cs和 SliderBehavior_resource.pre.js

使用以下属性标记 SliderExtender 类:[ParseChildren(typeof(ListItem), ChildrenAsProperties = true)]

private List<ListItem> items = new List<ListItem>();
[PersistenceMode(PersistenceMode.InnerProperty)]
[ExtenderControlProperty]
[ClientPropertyName("items")]
public List<ListItem> Items
{
    get { return items; }
}

static SliderExtender()
{
    if (!ScriptObjectBuilder.CustomConverters.ContainsKey(typeof(ListItem)))
    {
        ScriptObjectBuilder.CustomConverters.Add(typeof(List<ListItem>), SerializeItemsToJson);
    }
}

private static string SerializeItemsToJson(object itemsParam)
{
    var items = itemsParam as List<ListItem>;
    if (items == null)
        return null;

    return "{" + string.Join(",", items.Select(item => string.Format("{0}: '{1}'", item.Value, item.Text))) + "}";
}

这就是服务器代码，所以让我们调整扩展程序的客户端代码。

让我们从 JavaScript 代码开始。将此项添加到 Sys.Extended.UI.SliderBehavior 函数主体:this._items = null; 并在 Sys.Extended.UI.SliderBehavior 函数原型(prototype)中添加如下代码:

get_items: function () {
    return this._items;
},

set_items: function (value) {
    if (Sys.Serialization.JavaScriptSerializer.serialize(this._items) != value) {
        this._items = Sys.Serialization.JavaScriptSerializer.deserialize(value);
        this.raisePropertyChanged('items');
    }
}

然后，修改_calcValue函数如下:

_calcValue: function (value, mouseOffset) {
    var val;

    if (value != null) {
        if (!Number.isInstanceOfType(value)) {

            if (this._items) {
                for (var prop in this._items) {
                    if (this._items.hasOwnProperty(prop) && this._items[prop] === value) {
                        value = prop;
                        break;
                    }
                }
            }
//rest of function's code stays as it is

最后一步 - 修复 _ensureBinding 函数:

_ensureBinding: function () {
    if (this._boundControl) {
        var value = this._value;

        var displayItem = this._items && this._items.hasOwnProperty(value) ? this._items[value] : null;

        if (value >= this._minimum || value <= this._maximum) {
            var isInputElement = this._boundControl.nodeName == 'INPUT';

            if (isInputElement) {
                this._boundControl.value = displayItem || value;
            }
            else if (this._boundControl) {
                this._boundControl.innerHTML = displayItem || value;
            }
        }
    }
}

完成上述所有更改后，重建解决方案并将工具包 dll 的引用添加到您的项目中。此处修改 slider 的使用示例。它仍然支持双向绑定(bind)(即从扩展器到标签，但不支持从有界文本框到扩展器)。

<asp:TextBox ID="Slider1" runat="server" />
<br />
<ajaxToolkit:SliderExtender ID="SliderExtender1" runat="server" BehaviorID="Slider1"
    TargetControlID="Slider1" Minimum="1" Maximum="3" BoundControlID="Slider1_BoundControl"
    Steps="5">
    <Items>
        <asp:ListItem Value="1" Text="Low" />
        <asp:ListItem Value="2" Text="Medium" />
        <asp:ListItem Value="3" Text="High" />
    </Items>
</ajaxToolkit:SliderExtender>
<asp:TextBox runat="server" ID="Slider1_BoundControl" />
<%--<asp:Label ID="Slider1_BoundControl" runat="server" Style="text-align: right" />--%>