Blazor TextBox 사용자 지정 - 전체 가이드

22594 단어 csharp blazor dotnet webdev

Blazor TextBox은 사용자 이름, 전화 번호, 이메일 주소 등을 캡처하기 위해 양식에 일반 텍스트를 편집, 표시 및 추가하기 위한 구성 요소입니다. 이 구성 요소는 아이콘, 부동 레이블, 사용자 지정 크기 조정, 그룹화, 유효성 검사 상태 등이 포함된 HTML 5 TextBox(입력 유형 텍스트) 구성 요소의 확장 버전입니다. 이 문서에서는 Syncfusion Blazor TextBox에서 사용자 지정을 수행하는 방법을 설명합니다. 여기에서는 간단한 코드 예제와 함께 Blazor TextBox를 사용하여 새 사용자 지정 구성 요소를 쉽게 만드는 방법을 배웁니다.

사용자 지정 구성 요소란 무엇입니까?

기존 구성 요소를 확장하여 만든 모든 구성 요소는 custom component 입니다. 사용자 지정 구성 요소를 사용하면 코드를 재사용할 수 있습니다. 일반적으로 사용자 지정 구성 요소는 새로운 수준의 기능을 달성하고 응용 프로그램 전체에서 재사용하기 위해 생성됩니다.

Blazor 애플리케이션에서 Razor 사용자 지정 구성 요소는 일반적으로 공유 또는 사용자 지정 폴더에 생성됩니다. 그런 다음 사용자 정의 구성 요소를 HTML 태그의 다른 구성 요소처럼 사용할 수 있습니다.

전제 조건

Visual Studio 2019

.NET Core 3.0 이상

Blazor templates

사용자 지정 구성 요소를 만드는 단계

1. Blazor 서버 애플리케이션 생성

먼저 Getting Started with Syncfusion Blazor components 설명서에 제공된 단계에 따라 Blazor 서버 앱을 만들고 필요한 패키지를 추가합니다.

2. 사용자 지정 구성 요소 Razor 페이지를 만듭니다.

그런 다음 Pages 폴더 아래에 Razor 페이지를 만들고 이름을 CustomTextbox.razor로 지정합니다.

3. TextBox 및 사용자 지정 속성 추가

이제 Razor 페이지에 Blazor TextBox 구성 요소를 추가합니다. 기본적으로 TextBox에는 Value, ReadOnly, Placeholder, Width 및 many other 속성이 있습니다. 이 외에도 대소문자, 특수 문자, 공백 및 값 유형(영숫자, 숫자 및 알파벳만 해당)과 같은 몇 가지 사용자 지정 기능을 추가할 예정입니다.

다음 코드 예제를 참조하십시오.

@using Syncfusion.Blazor.DropDowns;
@using Syncfusion.Blazor.Inputs

<SfTextBox @ref="Textbox" ID="@Id" Value="@CustomValue" Readonly="@PreventType" Placeholder="@Placeholder" Width="@Width"></SfTextBox>

@code {

    public SfTextBox Textbox { get; set; }

    [Parameter]
    public CaseType TextCase { get; set; } = CaseType.Normal;

    [Parameter]
    public bool AllowSpaces { get; set; } = true;

    [Parameter]
    public bool AllowSpecialCharacters { get; set; } = true;

    [Parameter]
    public bool PreventType { get; set; }

    [Parameter]
    public CharacterType ValueType { get; set; } = CharacterType.AlphaNumeric;

    [Parameter]
    public string Id { get; set; }

    [Parameter]
    public string CustomValue { get; set; }

    [Parameter]
    public string Placeholder { get; set; }

    [Parameter]
    public string Width { get; set; }

    public enum CaseType
    {
        UpperCase,
        LowerCase,
        Normal
    }

    public enum CharacterType
    {
        AlphaNumeric,
        Numeric,
        Alpha
    }
}

4. 이벤트 핸들러 추가

이제 TextBox 이벤트를 새 사용자 지정 구성 요소에 바인딩하고 EventCallback 유형으로 변수를 만들고 이벤트 속성(예: CreatedEvent)에 할당합니다.

<SfTextBox @ref="Textbox" ID="@Id" Value="@CustomValue" Readonly="@PreventType" Placeholder="@Placeholder" Width="@Width" Created="CreatedEvent" ></SfTextBox>

@code {

    [Parameter]
    public EventCallback CreatedEvent { get; set; }
}

5. Razor 페이지에서 사용자 지정 구성 요소 추가

이제 사용자 지정 속성을 사용하여 Index.razor 페이지에 사용자 지정 TextBox 구성 요소를 포함합니다. 다음 코드 예제를 참조하십시오.

<CustomTextbox @ref="TextboxInstance" Id="textbox" 
    TextCase="CustomTextbox.CaseType.UpperCase" PreventType="false" AllowSpaces="false" AllowSpecialCharacters="false" ValueType="CustomTextbox.CharacterType.AlphaNumeric" Placeholder="Enter a value" CreatedEvent="OnCreated" Width="200px"></CustomTextbox></div>

6. 스크립트 처리를 위해 JSInterop 호출 사용

JavaScript를 사용하여 텍스트의 유효성을 검사하므로 JSInterop을 사용하여 JavaScript를 호출합니다. 먼저 스크립트 폴더에 JavaScript 파일 CustomTextbox.js를 추가하고 _Host.cshtm 파일에 참조를 추가합니다.

[_Host.cshtm]

<head>
    <link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />
    <script src="~/script/CustomTextbox.js"></script>
</head>

이 스크립트 코드는 키 다운 이벤트를 처리하고 입력 시 텍스트의 유효성을 검사합니다.

var textBoxInstance;
window.validateTextBox = function (elementRef) {
    var element = document.getElementById(elementRef.id);
    textBoxInstance = elementRef;
    element.addEventListener('keydown', function (e) {
        if ((e.keyCode === 8 || e.keyCode === 46 || (e.keyCode >= 37 && e.keyCode <= 40))) {
            return
        }
        if (textBoxInstance.textCase == 0) {
            if (!/[A-Z]/.test(e.key)) {
                e.preventDefault()
                return false
            }
        }
        if (textBoxInstance.textCase == 1) {
            if (!/[a-z]/.test(e.key)) {
                e.preventDefault()
                return false
            }
        }
        if (!textBoxInstance.allowSpaces) {
            if (e.keyCode == 32) {
                e.preventDefault()
                return false
            }
        }
        if (!textBoxInstance.allowSpecialCharacters) {
            if (!/[a-z]|[A-Z]|[0-9]/.test(e.key)) {
                e.preventDefault()
                return false
            }
        }
        if (textBoxInstance.valueType == 1) {
            if (!/[0-9]/.test(e.key)) {
                e.preventDefault()
                return false
            }
        }
        if (textBoxInstance.valueType == 2) {
            if (!/[a-z]|[A-Z]/.test(e.key)) {
                e.preventDefault()
                return false
            }
        }
    }, false);
}

이전 코드 예제를 실행하면 다음 스크린샷과 같은 출력이 표시됩니다.

Blazor TextBox 사용자 정의

자원

자세한 내용은 이Blazor TextBox Customization 프로젝트를 참조하십시오.

결론

이제 사용자 정의 구성 요소를 생성하여 Blazor TextBox 구성 요소를 완전히 사용자 정의하는 방법에 대해 명확하게 이해하셨기를 바랍니다. live demo of our Blazor TextBox도 살펴보시기 바랍니다.

free 30-day trial을 다운로드하거나 NuGet package을 다운로드하여 Blazor 구성 요소를 사용해 보십시오. online examples 및 documentation에서 사용 가능한 다른 기능을 살펴보십시오.

질문이 있으시면 아래 의견 섹션에 알려주십시오. support forums 또는 Direct-Trac을 통해 저희에게 연락하실 수도 있습니다. 기꺼이 도와드리겠습니다!