Question

所以我创建了一个ASP.NET用户控件，它是bootstrap slider control的简单包装器。现在我希望我的控件有一个名为Value的公共属性，我可以绑定到我的模型的属性，就像我对asp:TextBox一样：

<asp:TextBox runat="server" Text="<%# BindItem.Name %>" />

我可以使用我的用户控件执行相同操作吗？

<uc1:Slider runat="server" Value="<%# BindItem.Age %>" />

Answer 1

因此对于任何未来的读者来说，这是bootstrap-slider服务器端控件的工作版本。您可以将其拖放到ASPX页面上。它有两个属性Value和Value2（对于范围）。当用户移动滑块位置时会触发事件ValueChanged。您可以将事件处理程序附加到此，就像您对Button控件的Click事件所做的那样。最后但并非最不重要，我确保控件也在UpdatePanel内工作：

NB 此控件不会尝试包含require JS或CSS文件，因为如果用户在页面上删除Slider的多个实例，则输出可能包含CSS和JS的副本每个实例的文件，这是不合需要的。我无法弄清楚如何将CSS / JS文件链接到当前页面时尚未包含。因此，请确保将这两个文件包含在父页面中一次。

标记

<div id="<%= this.UniqueID + "_Div" %>">
    <input runat="server" ID="_TextBox" 
        EnableTheming="false" 
        class="slider form-control" 
        style="vertical-align: middle; width: 100%;" 
        data-slider-min="<%# Min %>" 
        data-slider-max="<%# Max %>"
        data-slider-step="<%# Step %>" 
        data-slider-value="<%# Value %>"
        data-slider-precision="<%# Precision %>" 
        data-slider-orientation="horizontal"
        data-slider-selection="after" 
        data-slider-tooltip="show"
        data-slider-range="<%# IsRange.ToString().ToLower() %>" />
</div>

代码隐藏

using System;
using System.ComponentModel;
using System.Web.UI;

namespace YourProjectNameSpace
{
    public partial class Slider : System.Web.UI.UserControl
    {
        public bool IsRange { get; set; }
        public float Min { get; set; }
        public float Max { get; set; }
        public float Step { get; set; }
        public int Precision { get; set; }

        public event Action ValueChanged;

        [Bindable(true, BindingDirection.TwoWay)]
        public float Value
        {
            get 
            {
                if (IsRange)
                {
                    string[] Vals = (this._TextBox.Attributes["value"] ?? "0,0").Split(',');
                    return float.Parse(Vals[0]);
                }
                else
                    return float.Parse((this._TextBox.Attributes["value"] ?? "0"));
            }

            set
            {
                if (IsRange)
                {
                    string[] CurVals = (this._TextBox.Attributes["value"] ?? "0,0").Split(',');
                    this._TextBox.Attributes["value"] = value.ToString() + ',' + CurVals[1];
                }
                else
                    this._TextBox.Attributes["value"] = value.ToString();
            }
        }

        [Bindable(true, BindingDirection.TwoWay)]
        public float? Value2
        {
            get
            {
                if (IsRange)
                {
                    string[] Vals = (this._TextBox.Attributes["value"] ?? "0,0").Split(',');
                    return float.Parse(Vals[1]);
                }
                else
                    return null;
            }

            set
            {
                if (IsRange)
                {
                    string[] CurVals = (this._TextBox.Attributes["value"] ?? "0,0").Split(',');
                    this._TextBox.Attributes["value"] = CurVals[0] + ',' + value.ToString();
                }
            }
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            if (IsPostBack)
            {
                if (Request["__EVENTTARGET"] == "_TextBox")
                {
                    if (ValueChanged != null)
                        ValueChanged();

                    string MyDivName = this.UniqueID.Replace("$", @"\\$") + "_Div";
                    string SliderVal = Request["__EVENTARGUMENT"];
                    if (IsRange) SliderVal = '[' + SliderVal.Split(',')[0] + ',' + SliderVal.Split(',')[1] + ']';

                    Page.ClientScript.RegisterStartupScript(this.GetType(), "CreateSliderFor_" + MyDivName,
                    "$('#" + MyDivName + " > input').slider().slider('setValue', " +  SliderVal + 
                    ").on('slideStop', function(slideEvt) { __doPostBack('_TextBox', slideEvt.value); });", true);
                }
                else
                {
                    string MyDivName = this.UniqueID.Replace("$", @"\\$") + "_Div";
                    Page.ClientScript.RegisterStartupScript(this.GetType(), "CreateSliderFor_" + MyDivName, "$('#" + MyDivName + " > input').slider().on('slideStop', function(slideEvt) { __doPostBack('_TextBox', slideEvt.value); });", true);
                }
            }
            else
            {
                string MyDivName = this.UniqueID.Replace("$", @"\\$") + "_Div";
                Page.ClientScript.RegisterStartupScript(this.GetType(), "CreateSliderFor_" + MyDivName, "$('#" + MyDivName + " > input').slider().on('slideStop', function(slideEvt) { __doPostBack('_TextBox', slideEvt.value); });", true);
            }

        }
    }
}

用法

在@Page行之后将其放在页面顶部：

<%@ Register Src="~/Slider.ascx" TagPrefix="uc1" TagName="Slider" %>

现在将Slider控件放在页面的任何位置：

<uc1:Slider runat="server" ID="Slider1" Min="10" Max="24" Value="<%# BindItem.Age %>" Step="0.1" Precision="1" IsRange="true" OnValueChanged="Slider1_ValueChanged" />

事件处理程序如下所示：

 protected void Slider1_ValueChanged()
 {
      //do whatever you want with Slider1.Value or Slider1.Value2
 }

如何在我的用户控件中添加可绑定属性？

1 个答案:

标记

代码隐藏

用法