Number Property

View Entity Number Property Configuration Options

2. Number Property

When you need to store numeric values β€” like prices, quantities, or percentages β€” you should use a NumberProperty. This type of property is made for numbers and ensures that users can only enter valid numeric input. Whether you're working with integers, decimals, or doubles, BlazorForKids makes it easy to define and configure these fields in your application.

For example, the TotalValue property is created using the method AddNumberProperty<decimal>, which means it expects decimal numbers (useful for prices or financial values). It’s displayed as an HTML <input type="number">, and it also supports number-specific settings like minimum and maximum values. In addition, it can use shared configuration options from AddTextProperty, as long as they make sense for numeric data. This makes it flexible and easy to use while keeping your forms accurate and user-friendly.

publicpartialclassEmployee:IBkEntity<Employee,ApplicationDbContext>

{

    publicvoidBkConfiguration(IBkEntityDesigner<Employee,ApplicationDbContext>designer)

    {

// Note: The AddNumberProperty method is generic, which means you must specify the numeric type.// Note: You can use int, long, float, double, or decimal as the type, including nullable types (e.g. decimal?) for optional fields.        designer.Properties.AddNumberProperty<decimal>("TotalValue",c=>

        {

// Sets the minimum allowed value for the number input.            c.MinValue(0);

// Sets the maximum allowed value for the number input.            c.MaxValue(100);

// Sets the display format. Example: "N2" will format to 2 decimal places.            c.Format("N2");

// Sets the label displayed next to the input editor.            c.Label("Total Value");

// Sets the placeholder text shown inside the input field when it is empty.            c.PlaceHolder("Enter Total Value");

// Adds a tooltip that appears when hovering over the input field.            c.ToolTip("Enter the total value between 0 and 100");

// Applies a custom CSS class to the editor for styling purposes.            c.CssClass("total-value-field");

// Hides the editor from the form by default.// Useful when you have multiple forms and want this field hidden initially.// Note: visibility can also be controlled at the component level.            c.HideEditor();

// Hides the corresponding column in the grid view by default.// Useful when you have multiple grid views and want this column hidden initially.// Note: visibility can also be controlled at the component level.            c.HideGridViewColumn();

// Sets the tab order for the editor in the form.            c.TabIndex(2);

// Adds a custom validation rule based on the property value.// The first parameter is a lambda using the value.// The second is the error message.// The third is the name of the generated custom validation attribute.            c.ValidationRuleValue(value=>value<=100,"Total Value must be less than or equal to 100","ValidateTotalValueMax");

// Adds a custom validation rule using the entire model.// For example, checking that TotalValue is greater than DiscountValue.            c.ValidationRuleModel(model=>model.TotalValue>model.DiscountValue,"Total Value must be greater than Discount Value","ValidateTotalGreaterThanDiscount");

// Adds a custom validation rule that uses the database context and model.// For example, check if this value exists in a record to prevent duplicates.            c.ValidationRuleUsingDbContext((dbContext,model)=>

            {

                varexists=dbContext.Orders.Where(a=>a.Id!=model.Id).Any(e=>e.TotalValue==model.TotalValue);

                return!exists;

            },"An order with this Total Value already exists","ValidateTotalValueUnique");

// Applies an existing .NET validation attribute to the property.// For example, using RangeAttribute as an additional layer of validation.            c.ValidationRuleUsingExistingAttribute(newRangeAttribute(0,100));

        });

    }

}

Configuration Options for AddNumberProperty<decimal>

Method Description Parameters
MinValue Sets the minimum value allowed in the input field. decimal minValue
MaxValue Sets the maximum value allowed in the input field. decimal maxValue
Format Specifies the display format for the number. Common formats: N0, N2, C. string format
Label Sets the label text that appears next to the editor. string label
PlaceHolder Sets the placeholder text inside the input field. string placeholder
ToolTip Adds a tooltip that appears when hovering over the input. string tooltip
CssClass Applies a custom CSS class to the input field. string className
HideEditor Hides the editor in the form by default. None
HideGridViewColumn Hides the column in the grid view by default. None
TabIndex Sets the tab order of the input field in the form. int tabIndex
ValidationRuleValue Defines a custom validation rule using the property value. Func<T, bool> rule,
string errorMessage,
string attributeName
ValidationRuleModel Defines a custom validation rule using the whole model. Func<TModel, bool> rule,
string errorMessage,
string attributeName
ValidationRuleUsingDbContext Defines a custom validation rule that uses the database context and the model. Useful for rules like checking uniqueness. Func<DbContext, TModel, bool> rule,
string errorMessage,
string attributeName
ValidationRuleUsingExistingAttribute Applies a built-in .NET validation attribute to the property. ValidationAttribute attribute
An unhandled error has occurred. Reload πŸ—™