可以本地化的货币文本框

分享于 

9分钟阅读

Web开发

  繁體

Sample Image

介绍

我尝试找到适当的控件来显示和编辑可以绑定到小数值的货币值,因这里我设置了第一个自定义web控件。

注意:下载还包括 PercentBoxNumberBox 控件,这些控件使用相同的原则。

控制要求

第一步是定义控制的基本要求。

  • 允许数据绑定到十进制值。
  • 以货币文本的形式显示值,格式按照当前区域性进行格式化。
  • 在不同颜色中显示负值。
  • 只允许有效的数据输入。
  • 执行与验证客户端上的输入和格式货币值相关的工作。

开始

控件呈现为文本框时 <输入 type="文本"。>System.Web.UI.WebControls.TextBox 继承时,需要隐藏许多属性,因此控件继承自 System.Web.UI.WebControls.WebControl 并实现 IPostBackDataHandler

属性

在基类中添加十一个 public 属性以控制它的外观:

  • Alignment: 设置控件( 默认值为 Right ) 中文本的对齐方式。
  • Amount: 要绑定到控件的十进制值。 值存储在ViewState中,并且 IPostBackDataHandler的实现确保在适当的时候引发 AmountChanged 事件。
    [DefaultValue(typeof(decimal),"0"),
    Category("Appearance"),
    Bindable(true),
    Description("The amount displayed in the control")]publicdecimal Amount
    {
     get {
     // Check if a value has been assignedobject amount = ViewState["amount"];
     if (amount == null)
     // Return the defaultreturn 0M;
     else// Return the valuereturn (decimal)amount;
     }
     set {
     ViewState["amount"] = value;
     // Set the text colourif (value<0)
     base.ForeColor = NegativeColor;
     elsebase.ForeColor = PositiveColor;
     }
    }
  • MinAmount: 设置用户可以输入的最小金额。
  • MaxAmount: 设置用户可以输入的最大数量。
  • NegativeColor: 设置当 Amount 为负( <0 ) 时要显示的颜色。
    [DefaultValue(typeof(Color),"Red"),
    Category("Appearance"),
    Bindable(true),
    Description("The colour of negative currency values")]public Color NegativeColor
    {
     get {
     return _NegativeColor;
     }
     set {
     _NegativeColor = value;
     // Set the controls ForeColor if appropriateif (Amount <0)
     base.ForeColor = value;
     }
    }
  • OnBlurOnFocusOnKeyPress: 控件输出这些HTML事件的JavaScript代码,并且这些属性允许分配额外的脚本。
  • PositiveColor: 设置当 Amount 为正时显示的颜色。
  • Precision: 格式化金额将显示的小数位数。
  • Text: 只读 返回根据当前区域性格式化的Amount的属性。

此外,基类 ForeColor 属性被隐藏以实现它 只读 ( 因为它的颜色是使用 PositiveColorNegativeColor 属性设置的)。

呈现控件

默认情况下,web服务呈现为 <SPAN> 呈现为文本框 <输入> 我们必须先重写 TagKey

protectedoverride HtmlTextWriterTag TagKey
{
 get {
 return HtmlTextWriterTag.Input;
 }
}

然后通过重写 AddAttributesToRender 添加属性。

protectedoverridevoid AddAttributesToRender(HtmlTextWriter writer)
{
 base.AddAttributesToRender(writer);
 // Add attributes necessary to display an text control writer.AddAttribute(HtmlTextWriterAttribute.Type, "text");
 writer.AddAttribute(HtmlTextWriterAttribute.Name, UniqueID);
 writer.AddAttribute(HtmlTextWriterAttribute.Value, Text);
 writer.AddStyleAttribute("text-align", Alignment.ToString());
 // Add user defined attributes to control colour formatting writer.AddAttribute("negativeColor", NegativeColor.Name);
 if (PositiveColor!= Color.Empty)
 {
 writer.AddAttribute("positiveColor", PositiveColor.Name);
 }
 // Add client side event handlers writer.AddAttribute("onkeypress", "EnsureNumeric()");
 writer.AddAttribute("onfocus", "FormatAsDecimal(this)");
 writer.AddAttribute("onblur", "FormatAsCurrency(this)");
}

两个用户定义的属性被添加到呈现的控件 PositiveColorNegativeColor 中。 客户端脚本读取这两个属性,以根据它的值设置文本的颜色。 此外,还将三个客户端事件分配给脚本函数,如下所。

客户端脚本

重写基类 OnPreRender 方法以获取区域性的当前 NumberFormat。 然后检查脚本是否已经注册,如果没有,则调用代码以使用 NumberFormat 构造它们和 finally register。

protectedoverridevoid OnPreRender(EventArgs e)
{
 // Get the number format of the current culture NumberFormatInfo format = Thread.CurrentThread.CurrentCulture.NumberFormat;
 // Register the EnsureNumeric scriptif (!Page.IsClientScriptBlockRegistered("EnsureNumeric"))
 {
 Page.RegisterClientScriptBlock("EnsureNumeric",EnsureNumericScript(format));
 }
. . .........

注册了五个脚本函数。

  • EnsureNumeric() 分配给 OnKeyPress 事件并将键盘输入限制为有效输入。
  • FormatCurrencyAsDecimal() 被分配给 OnFocus 事件。 它调用 CurrencyToDecimal() 函数并根据返回的值格式化它的文本。
  • FormatDecimalAsCurrency() 被分配给 OnBlur 事件。 它调用 DecimalToCurrency() 函数并根据返回的值格式化它的文本。
  • CurrencyToDecimal() 将货币字符串解析为十进制值。
  • DecimalToCurrency() 将十进制值设置为货币字符串。

用于生成这些脚本的代码太长,不能在此包含,但下载包含一个htm文件,解释我使用的方法。

使用控件

  • 下载并构建Web控件库项目。
  • 新建 ASP.NET Web应用程序项目并将该控件添加到工具箱中。
  • 将控件拖到窗体上并设置一些属性。
  • ASP.NET Web应用程序项目 Web.Config 文件中,修改 globalization 部分以设置特定区域性( 比如,culture="fr"( 法国法国) 或者 culture="id id"( 针对印度尼西亚印度尼西亚) 等等。 请注意,你必须使用特定的区域性,而非非特定区域性。
    <globalizationrequestEncoding="utf-8"responseEncoding="utf-8"culture="fr-FR"/>
  • 运行项目。
  • 将按照你在 Web.Config 文件中指定的区域性显示 Amount 属性。 选项卡,并且文本将被解析为十进制值。
  • 输入数值并退出。 文本将以符合 PositiveColor 或者 NegativeColor的颜色设置格式返回到货币字符串。

注意,输入数据时,只能输入数字( 0 -9 )。减号和十进制分隔符( 如果合适的话)。 某些语言如印度尼西亚没有十进制数字,在这种情况下不能输入小数点分隔符。 另外,对于许多语言( 欧洲)的小数分隔符是逗号,而不是小数点。

历史记录

  • v1.0 - 08 2005年06月 - 已经创建。
  • v1.1 - 04 2005年08月
    • 添加了 MinAmountMaxAmountOnBlurOnFocusOnKeyPressPrecision的附加属性。
    • 脚本已经修改。
    • NumberBoxPercentBox 添加到项目中。
  • v1.2 - 20 2005年09月
    • 修改了脚本以验证最小值和最大值。

文本  TEX  LOC  Local  货币  
相关文章