Blazor数字文本框概述

的Blazor数值文本框组件允许用户输入十进制值而不输入文本。开发人员可以控制最小值、最大值、步骤和UX的其他元素。

的NumericTextBox组件Blazor的Telerik UI，一个专业级的UI库，包含100个本地组件，用于构建现代和功能丰富的应用程序。想要试用它，可以注册一个30天的免费试用期。

下载免费试用

创建Blazor数值文本框

1. 添加TelerikNumericTextBox标签到你的剃须刀页。
2. 将数值数据类型绑定到组件
3. 可选地，设置custom格式，最小值，马克斯而且一步值

新的值是:@theValue  @code {private decimal theValue {get;设置;} = 1.234米;｝

Numeric TextBox组件是泛型的，这意味着它接受其value形参的类型作为参数。它可以int，长，浮动，双而且小数值。的值最小值，马克斯而且一步属性的类型必须与价值，以及ValueChanged处理程序还必须容纳相应的值类型。

事件

Blazor数值文本框生成事件，您可以处理并进一步自定义其行为。阅读更多关于Blazor数字文本框事件…．

验证

通过使用内置验证，可以确保组件值是可接受的。阅读更多关于输入验证的信息…．

自定义格式字符串

Blazor数字文本框允许您定义所需的自定义格式格式参数。下面是一些使用自定义格式字符串的示例。

@Weight 
  
 @code{decimal Weight {get;设置;} = 3.456789m;} @Rent 
  
 @code{decimal Rent {get;设置;} = 4567.89m;字符串RentFormat{获取;设置;} = System.Globalization.NumberFormatInfo.CurrentInfo.CurrencySymbol + "#。00年”; } @Units 
  @code{ int Units { get; set; } = 12; string UnitsFormat { get; set; } = "# unit(s)"; }

数值文本框参数

造型和外观

以下参数使您能够自定义Blazor数值文本框的外观:

控件中有关自定义数字文本框样式的更多选项外观的文章．

组件引用

数字文本框有一个FocusAsync启用编程焦点的方法。要使用它，请获取组件实例的引用。

焦点TextBox  @code{//确定组件的私有十进制DecimalValue {get;设置;} // Value类型决定了引用私有TelerikNumericTextBox的类型 NumericTextBoxRef {get;设置;} async任务FocusTextBox(){等待NumericTextBoxRef.FocusAsync();}}

笔记

• 如果你想使用货币格式，你必须为你的应用程序线程指定区域性，这样。net就知道要呈现什么符号。如果不这样做，您可能会看到一个意外/不正确的符号或格式。Telerik Numeric文本框将线程区域性用于货币符号和小数分隔符(详细信息Telerik组件中的全球化）.

• 中可用的小数点位置可能要匹配格式在小数参数。这将统一输入集中和不集中时的数字舍入。例如，如果从一个值开始12.3米而且一步= 0.1米它会呈现为12.3由于Math.Round (). net中的行为。用旋转器图标向上和向下更改值将导致12.30因为该值在某一时刻有第二个十进制数字，并且该精度已经添加到该数字上。

  下面是一个匹配小数点后数位的例子:

  剃须刀

  @DecimalStepValue. tostring ("N2") 
     @code {decimal DecimalValue = 12.3m;｝

下一个步骤

• 使用数字文本框事件

另请参阅

• 现场演示:数字文本框
• 现场演示:数值文本框验证
• 现场演示:数字文本框格式
• 输入验证
• API参考