asp.net使用者控制項屬性自定

在asp.net的web開發中，我們往往會將一些功能相似的頁面快速的抽取成為使用者控制項(ascx),但是如何為該使用者控制項定義一些屬性讓我們可以直接和使用一般控制項一樣在html中配置。又如何將使用者控制項中的按鈕等控制項的事件拋到宿首頁面？

需求 :設定TextBox的輸入字元長度。

也許你會說TextBox有一個MaxLength屬性，可以用來設定，但是對於中文字元來數他是不準確的。（在開發過程中無論是直接用js還是後台判斷，判斷每個屬性的長度都是一件代碼量不小而且十分無聊的事情）

解決方案：建立一個使用者控制項命名為limitTextBox,其中只有一個TextBox框，我們可以通過上篇隨筆中提到的onpropertychange或者oninput去擷取當前文本中的值，然後再去響應一個javascript函數，判斷文本中的實際字元數，代碼如下：

Code
<%@ 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就是我們為該使用者控制項定義的，其值可以在宿首頁面中配置。

背景代碼如下

 

Code
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是我們自己定義的，而且也滿足了中文或者其他的文字