ASP.NET Core Blazer로 독자적인 입력 구성 요소 만들기

ASP.NET Core Blazor의 현재 버전에는 시스템 컨트롤에 처음 지정된 기능이 입력되지 않았습니다.
날짜형 한정@bind:format="yyyy-MM-dd"이면 형식을 지정할 수 있지만 다른 형식은 지원되지 않습니다.
예를 들어 이렇게 쓰면 오류가 발생할 수 있다.
@page "/"

<h1>Hello, world!</h1>

<EditForm Model="this">
    <input @bind="Number" @bind:format="N" />
</EditForm>

@code {
    private decimal Number { get; set; }
}
이런 느낌의 오류가 발생했다.
1>C:\Users\xxx\MyBlazorApp\MyBlazorApp\Pages\Index.razor(6,19,6,25): error CS1503: 引数 1: は 'decimal' から 'System.DateTime' へ変換することはできません
1>C:\Users\xxx\MyBlazorApp\MyBlazorApp\obj\Debug\net5.0\Razor\Pages\Index.razor.g.cs(110,149,110,156): error CS0029: 型 'System.DateTimeOffset?' を 'decimal' に暗黙的に変換できません
솔루션에는 자체 입력 제어가 있습니다.인풋베이스를 계승해서 만들면 돼.
@using System.Diagnostics.CodeAnalysis
@inherits InputBase<decimal>

<input @bind="CurrentValueAsString" />

@code {
    public string ValidationErrorMessage { get; set; }

    protected override string FormatValueAsString(decimal value)
    {
        return value.ToString("N");
    }

    protected override bool TryParseValueFromString(string value, [MaybeNullWhen(false)] out decimal result, [NotNullWhen(false)] out string validationErrorMessage)
    {
        var x = decimal.TryParse(value, out result);
        validationErrorMessage = x ? "" : ValidationErrorMessage;
        return x;
    }
}
이걸 쓰면 이런 느낌이 든다.
@page "/"

<h1>Hello, world!</h1>

<EditForm Model="this">
    <MyInput @bind-Value="Number" />
</EditForm>

@code {
    private decimal Number { get; set; }
}
실행하면 지정된 형식의 느낌을 받을 수 있습니다.

총결산


따라서 이렇게 포맷 제어를 할 수 있다.
형식 지정을 매개변수로 제외하는 것이 더 일반적입니다.
하지만 희망관측@bind:format=""에서는 날짜형 이외의 유형에 대응하기 때문에 이렇게 직접 할 필요가 없다고 생각합니다.

좋은 웹페이지 즐겨찾기