ASP.NET 핵심 Blazor 양식 문제 해결

이 문서에서는 양식에 대한 Blazor 문제 해결 지침을 제공합니다.

큰 양식 페이로드 및 SignalR 메시지 크기 제한

이 섹션은 구현SignalR하는 Blazor Web Apps, Blazor Server 앱 및 호스트된 Blazor WebAssembly 솔루션에만 적용됩니다.

구성 요소의 양식 페이로드가 허브 메서드에 허용되는 최대 수신 SignalR 메시지 크기를 초과하여 양식 처리에 실패하는 경우 양식은 메시지 크기 제한을 늘리지 않고 스트리밍 interop을 JS 채택할 수 있습니다. 크기 제한 및 throw된 오류에 대한 자세한 내용은 ASP.NET Core BlazorSignalR 지침을 참조하세요.

다음 예제에서는 스트리밍 JS interop과 함께 텍스트 영역(<textarea>)을 사용하여 최대 50,000바이트의 데이터를 서버로 이동합니다.

앱에 JavaScript(JS) getText 함수를 추가합니다.

window.getText = (elem) => {
  const textValue = elem.value;
  const utf8Encoder = new TextEncoder();
  const encodedTextValue = utf8Encoder.encode(textValue);
  return encodedTextValue;
};

앱에 Blazor 배치 JS 할 위치에 대한 자세한 내용은 ASP.NET Core Blazor 앱의 JavaScript 위치를 참조하세요.

보안 고려 사항으로 인해 Interop 스트리밍 JS 에 길이가 0인 스트림은 허용되지 않습니다. 따라서 다음 StreamFormData 구성 요소는 폼을 제출할 때 텍스트 영역이 비어 있으면 a JSException 를 트래핑하고 빈 문자열을 반환합니다.

StreamFormData.razor:

@page "/stream-form-data"
@inject IJSRuntime JS
@inject ILogger<StreamFormData> Logger

<h1>Stream form data with JS interop</h1>

<EditForm FormName="StreamFormData" Model="this" OnSubmit="Submit">
    <div>
        <label>
            &lt;textarea&gt; value streamed for assignment to
            <code>TextAreaValue (&lt;= 50,000 characters)</code>:
            <textarea @ref="largeTextArea" />
        </label>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</EditForm>

<div>
    Length: @TextAreaValue?.Length
</div>

@code {
    private ElementReference largeTextArea;

    public string? TextAreaValue { get; set; }

    protected override void OnInitialized() =>
        TextAreaValue ??= string.Empty;

    private async Task Submit()
    {
        TextAreaValue = await GetTextAsync();

        Logger.LogInformation("TextAreaValue length: {Length}",
            TextAreaValue.Length);
    }

    public async Task<string> GetTextAsync()
    {
        try
        {
            var streamRef =
                await JS.InvokeAsync<IJSStreamReference>("getText", largeTextArea);
            var stream = await streamRef.OpenReadStreamAsync(maxAllowedSize: 50_000);
            var streamReader = new StreamReader(stream);

            return await streamReader.ReadToEndAsync();
        }
        catch (JSException jsException)
        {
            if (jsException.InnerException is
                    ArgumentOutOfRangeException outOfRangeException &&
                outOfRangeException.ActualValue is not null &&
                outOfRangeException.ActualValue is long actualLength &&
                actualLength == 0)
            {
                return string.Empty;
            }

            throw;
        }
    }
}

EditForm 매개 변수 오류

InvalidOperationException: EditForm에는 모델 매개 변수 또는 EditContext 매개 변수가 필요하지만 둘 다 필요하지는 않습니다.

EditForm이 Model 또는 EditContext를 할당하는지 확인합니다. 동일한 양식에 대해 둘 다 사용하지 마세요.

할당할 Model때 모델 형식이 인스턴스화되어 있는지 확인합니다.

연결이 끊어졌습니다.

오류: '오류: 서버가 닫을 때 오류를 반환했습니다. 연결이 오류로 닫혔습니다.'라는 오류로 연결이 끊어졌습니다.

System.IO.InvalidDataException: 최대 메시지 크기가 32768B를 초과했습니다. 메시지 크기는 AddHubOptions에서 구성할 수 있습니다.

자세한 내용 및 지침은 다음 리소스를 참조하세요.

• 큰 양식 페이로드 및 SignalR 메시지 크기 제한
• ASP.NET Core BlazorSignalR 지침