一步一步教你打造一个Numeric TextBox控件

现在的位置: 首页 > 综合 > 正文

一步一步教你打造一个Numeric TextBox控件

2011年03月31日 ⁄ 综合 ⁄ 共 5302字 ⁄ 字号小中大 ⁄ 评论关闭

1、创建一个新的类库目，将它命名为MyCustomControls

2、添加System.Web引用：

3、 Visual Studio 将会自动添加一个名字为"Class1.cs"的文件。请将它删除，然后添加NumericTextBox.cs 和NumericTextBoxExtention.cs两个文件类。另外创建一个名字为"Resources" 新的文件夹，在这个文件夹中添加一个名字为"NumericTextBox.js"的JavaScript文件:

4、为了使JavaScript嵌入在组件中，改变其生成操作属性为"嵌入的资源"，请参阅下图：

5、两个类库文件都用来实现NumericTextBox类，它们之间使用了关键字partial， NumericTextBox.cs 用来实现控件的逻辑，NumericTextBoxExtention.cs 将包含所有的字段和属性。

NumericTextBox.cs：

代码

using System;
using System.Web.UI;

[assembly: WebResource("MyCustomControls.Resources.NumericTextBox.js", "text/javascript")]
namespace MyCustomControls
{
    [ToolboxData(@"<{0}:NumericTextBox Text="""" runat=""server"" ></{0}:NumericTextBox>")]
    public partial class NumericTextBox : System.Web.UI.WebControls.TextBox
    {
        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);

ClientScriptManager scriptManager = this.Page.ClientScript;
string resourceFilePath = "MyCustomControls.Resources.NumericTextBox.js";

// This will register a Javascript block witht the name 'NumericTextBoxScript'
scriptManager.RegisterClientScriptInclude("NumericTextBoxScript", scriptManager.GetWebResourceUrl(this.GetType(), resourceFilePath));

            if (this.Type == TextBoxType.Decimal)
                this.Attributes.Add("onkeydown", string.Format("return CheckDecimal(this,'{0}','{1}', {2})", NumberOfInteger, NumberOfFraction, _AllowNegative.ToString().ToLower()));
            else if (this.Type == TextBoxType.Integer)
                this.Attributes.Add("onkeydown", string.Format("return CheckInteger({0})", _AllowNegative.ToString().ToLower()));

            this.Attributes.Add("onkeyup", string.Format("return CheckNegative(this)", _AllowNegative.ToString().ToLower()));
        }
    }
}

NumericTextBoxExtention.cs

代码

namespace MyCustomControls
{
    public partial class NumericTextBox : System.Web.UI.WebControls.TextBox
    {
        public enum TextBoxType
        {
            Integer,
            Decimal
        }

        private int _NumberOfFraction = 0;
        private int _NumberOfInteger = 0;
        private bool _AllowNegative = false;
        private TextBoxType _Type = TextBoxType.Integer;

        public int NumberOfFraction
        {
            get { return _NumberOfFraction; }
            set { _NumberOfFraction = value; }
        }

        public int NumberOfInteger
        {
            get { return _NumberOfInteger; }
            set { _NumberOfInteger = value; }
        }

        public bool AllowNegative
        {
            get { return _AllowNegative; }
            set { _AllowNegative = value; }
        }

        public TextBoxType Type
        {
            get { return _Type; }
            set { _Type = value; }
        }

    }
}

7、实现"NumericTextBox.js"：

代码

// CheckNegative

//that the dash/minus character is added to the left.
function CheckNegative(sender) {
    if (event.keyCode == 189) { // dash (-)
        if (sender.value.indexOf('-', 0) > 0)
            sender.value = sender.value.replace('-', '');
    }
}

//  CheckInteger
function CheckInteger(allowNegative) {
        if ((event.keyCode >= 48 && event.keyCode <= 57) || // 0-9 numbers
        (event.keyCode >= 37 && event.keyCode <= 40) || // Left, Up, Right and Down
        event.keyCode == 8 || // backspaceASKII
        event.keyCode == 9 || // tabASKII
        event.keyCode == 16 || // shift
        event.keyCode == 17 || // control
        event.keyCode == 35 || // End
        event.keyCode == 36 || // Home
        event.keyCode == 46) // deleteASKII
        return true;
    else if (event.keyCode == 189 && allowNegative == true) { // dash (-)
        if (sender.value.indexOf('-', 0) > -1)
            return false;
        else
            return true;
    }
    else
        return false;
}
//  CheckDecimal
function CheckDecimal(sender, numberOfInteger, numberOfFrac, allowNegative) {
    var valueArr;

    if ((event.keyCode >= 37 && event.keyCode <= 40) || // Left, Up, Right and Down
        event.keyCode == 8 || // backspaceASKII
        event.keyCode == 9 || // tabASKII
        event.keyCode == 16 || // shift
        event.keyCode == 17 || // control
        event.keyCode == 35 || // End
        event.keyCode == 36 || // Home
        event.keyCode == 46) // deleteASKII
        return true;
    else if (event.keyCode == 189 && allowNegative == true) { // dash (-)
        if (sender.value.indexOf('-', 0) > -1)
            return false;
        else
            return true;
    }

valueArr = sender.value.split('.');

    if (event.keyCode == 190) { // decimal point (.)
        if (valueArr[0] != null && valueArr[1] == null)
            return true;
        else
            return false;
    }

    if (event.keyCode >= 48 && event.keyCode <= 57) { // 0-9 numbers
        if (valueArr[1] == null) {
            if (valueArr[0].indexOf('-', 0) > -1)
                numberOfInteger++;

            if (valueArr[0].length <= numberOfInteger)
                return true;
        }
        else {
            if (valueArr[1].length <= numberOfFrac)
                return true;
        }
    }