When you bind a non-string value to a <MudTextField<T>
>
or any other input element that supports a value of type T, then a Converter
converts that value to string
for display and converts the user's input back to T. This happens automatically without you having to do anything special.
MudBlazor's DefaultConverter<T>
is pretty capable as you can see below but sometimes
you'll want to use your own conversion functions. This page is all about that.
DefaultConverter<T>
The default converter converts all primitive types and their nullable variants to and from string
.
Edit the textfields below to see how the default converter handles different values depending on the type.
Type | Input | Resulting value |
---|---|---|
sbyte |
-128 | |
short |
-1024 | |
int |
-3000000 | |
long |
-9000000000 | |
bool |
True | |
char |
龍 | |
float |
3.1415927 | |
double |
3.141592653589793 | |
decimal |
99.99 | |
decimal (2 decimals) |
99.99999 | |
DateTime |
12/6/2024 9:50:06 AM | |
TimeSpan |
09:50:06.5547683 | |
Guid |
b9937e8e-275a-4d83-b3b5-c35687a98577 | |
Enum |
RemoveEmptyEntries |
DateConverter
By default, the DefaultConverter
uses your local culture settings. If you want to change that, you can either set the Culture
of individual inputs or converters, or change it globally
by setting Converters.DefaultCulture
to your desired CultureInfo
at application start.
If you want to configure the date format of a DateTime value, you can set the Format
parameter of <MudTextField>
.
Let's format the same date in different ways:
@using System.Globalization; <MudGrid> <MudItem xs="12" sm="6" md="4"> <MudTextField Label="en-US" Variant="Variant.Outlined" Culture="" @bind-Value="date" /> </MudItem> <MudItem xs="12" sm="6" md="4"> <MudTextField Label="de-AT" Variant="Variant.Outlined" Culture="" @bind-Value="date"></MudTextField> </MudItem> <MudItem xs="12" sm="6" md="4"> <MudTextField Label="zh-CN" Variant="Variant.Outlined" Culture="" @bind-Value="date"></MudTextField> </MudItem> <MudItem xs="12" sm="6" md="4"> <MudTextField Label="en-US: dddd, MMM dd" Variant="Variant.Outlined" Culture="" Format="dddd, MMM dd" @bind-Value="date" /> </MudItem> <MudItem xs="12" sm="6" md="4"> <MudTextField Label="de-AT: dddd, dd. MM." Variant="Variant.Outlined" Culture="" Format="dddd, dd. MM." @bind-Value="date"></MudTextField> </MudItem> <MudItem xs="12" sm="6" md="4"> <MudTextField Label="zh-CN: yy年MM月dd日" Variant="Variant.Outlined" Culture="" Format="yyyy年MM月dd日" @bind-Value="date"></MudTextField> </MudItem> </MudGrid>
@code { CultureInfo en = @CultureInfo.GetCultureInfo("en-US"); CultureInfo de = CultureInfo.GetCultureInfo("de-AT"); CultureInfo cn = CultureInfo.GetCultureInfo("zh-CN"); DateTime date = DateTime.Now; }
Custom Binding Converters
If you need some really special binding conversion, it is very easy to plug in your own converter.
Just create a Converter<T>
and set the SetFunc
and the GetFunc
.
Type in the textfield to set the switch or flip the switch to set the text:
@using System.Globalization; <MudGrid> <MudItem xs="12" sm="6" md="4"> <MudSwitch Color="Color.Primary" @bind-Value="state">Flip the switch</MudSwitch> </MudItem> <MudItem xs="12" sm="6" md="4"> <MudTextField Label="Switch state" Variant="Variant.Outlined" Converter="" @bind-Value="state" Immediate="true"/> </MudItem> </MudGrid>
@code { bool state = true; Converter<bool> converter = new Converter<bool> { SetFunc = value => value ? "ON" : "OFF", GetFunc = text => (text ?? "").ToLowerInvariant() == "on", }; }
Default Custom Binding Converters
If you need to setup global converter for a certain class or struct you can do it as well through static delegate:
Just set a Converter<T>
.GlobalGetFunc
and
Converter<T>
.GlobalSetFunc
@using System.Drawing @using System.Globalization; @using System.Text.Json @using Color = MudBlazor.Color <MudGrid> <MudItem xs="12" sm="6" md="4"> <MudTextField Label="Point" Variant="Variant.Outlined" @bind-Value="_point" Immediate="true" /> </MudItem> <MudItem xs="12" sm="6" md="4"> <MudTextField Label="Mirrored point" Variant="Variant.Outlined" @bind-Value="_point" Immediate="true"/> </MudItem> </MudGrid>
@code { Point _point; protected override void OnInitialized() { // should be in your Startup: DefaultConverter<Point>.GlobalGetFunc = x => $"[{x.X}, {x.Y}]"; DefaultConverter<Point>.GlobalSetFunc = x => { var tmp = JsonSerializer.Deserialize<int[]>(x); return new Point(tmp[0], tmp[1]); }; } }