Ajax滑塊控件顯示非數值

Question

我想從AjaxControlTookit使用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

這樣的功能沒有在滑塊中實現。所以讓我們定製一下。 首先，您需要下載工具包源代碼。我們將修改兩個文件（我會提供一個鏈接，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功能代碼原型：

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的參考添加到您的項目。此處使用修改滑塊的示例。它仍然支持雙向綁定（即從擴展器到標籤，但不是從有界文本框到擴展器）。

<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" />--%>