asp.net用户控件属性自定

在asp.net的web开发中，我们往往会将一些功能相似的页面快速的抽取成为用户控件(ascx),但是如何为该用户控件定义一些属性让我们可以直接和使用一般控件一样在html中配置。又如何将用户控件中的按钮等控件的事件抛到宿主页面？

需求 :设置TextBox的输入字符长度。

也许你会说TextBox有一个MaxLength属性，可以用来设置，但是对于中文字符来数他是不准确的。（在开发过程中无论是直接用js还是后台判断，判断每个属性的长度都是一件代码量不小而且十分无聊的事情）

解决方案：新建一个用户控件命名为limitTextBox,其中只有一个TextBox框，我们可以通过上篇随笔中提到的onpropertychange或者oninput去获取当前文本中的值，然后再去响应一个javascript函数，判断文本中的实际字符数，代码如下：

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="LimitTextBox.ascx.cs" Inherits="Controls_LimitTextBox" %>
<asp:TextBox runat="server" id="txtObject" onpropertychange="CheckTextSize()" oninput="CheckTextSize()"/>
<script language="javascript" type="text/javascript" >
    function CheckTextSize() {
        var maxLenght = "<%=this.MaxLength %>";
        var objID = "<%=this.txtObject.ClientID %>"
        var obj = document.getElementById(objID);

        var str = obj.value;

        var realLength = 0, len = str.length, charCode = -1;
       
        for (var i = 0; i < len; i++) {
            charCode = str.charCodeAt(i);
            if (charCode >= 0 && charCode <= 128) realLength += 1;
            else realLength += 2;
        }

        if (realLength > maxLenght) {
            obj.value = str.substr(0, len - 1);
        }
    }
</

 

其中Maxlenght就是我们为该用户控件定义的，其值可以在宿主页面中配置。

后台的代码如下

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.ComponentModel;

public partial class Controls_LimitTextBox : System.Web.UI.UserControl
{
    private int maxLength = 200;
    private string text = string.Empty;

    protected void Page_Load(object sender, EventArgs e)
    {
        
    }

    [Browsable(true)]
    public int MaxLength
    {
        get { return maxLength; }
        set { this.maxLength = value; }
    }

    [Browsable(true)]
    public string Text
    {
        get { return this.txtObject.Text.Trim(); }
        set 
        { 
            this.text = value;
            this.txtObject.Text = value;
        }
    }

    [Browsable(true)]
    public string CssClass
    {
        set { this.txtObject.CssClass = value; }
    }

    [Browsable(true)]
    public bool Enable
    {
        set { this.txtObject.Enabled = value; }
    }

    [Browsable(true)]
    public bool Visible
    {
        set { this.txtObject.Visible = value; }
    }

    [Browsable(true)]
    public TextBoxMode TextMode
    {
        set { this.txtObject.TextMode = value; }
    }
}

 

这样我们就可以正常的使用MaxLength了，效果和TexBox的一样，不过此时的MaxLength是我们自己定义的，而且也满足了中文或者其他的文字