Add info of limitation for TextArea Control in Blazor

[MSIH]

There is a known problem with copying and pasting a large amount of content into Textarea component with Blazor server. Please document the problem and solution so other users do not have to waste many hours searching the internet to understand and get a fix.

---

Document Details

⚠ Do not edit this section. It is required for learn.microsoft.com ➟ GitHub issue linking.

• ID: c3128506-d228-35ca-e34a-183a881acdec
• Version Independent ID: c3128506-d228-35ca-e34a-183a881acdec
• Content: ASP.NET Core Blazor forms and input components
• Content Source: aspnetcore/blazor/forms-and-input-components.md
• Product: aspnet-core
• Technology: aspnetcore-blazor
• GitHub Login: @guardrex
• Microsoft Alias: riande

[guardrex]

Hello @MSIH ... I sympathize with you that the error message aspect has been backlogged for now. Hopefully, they'll get to that issue soon-ish; but with it not making the cut for .NET 8 this year, it likely will be next year.

I see a couple of things to do here ...

• The content on the SignalR limit should be either mirrored or moved from the JS interop article to the SignalR Fundamentals article. That will help surface the problem in a general way. If moved, I'll cross-link from the JS interop article to the new section there.
• Add a section to the Forms topic on this: Cross-link the streaming feature (available since 6.0) and include a fully-working, cut-'n-paste example for a streaming text area in the Forms topic.

I'm in and out on vacation for the end of this month, and we're working on .NET 8 as our top priority in July-August, but I'm fairly certain that I can reach this issue within a few weeks. I'll get on this ASAP. 🏃

Thanks for the issue!

[guardrex]

UPDATE: Mackinnon, I'm going to go ahead and get this on a PR and get it merged this morning to clear this, as I have a lot of .NET 8 content work to do next. I'll message you for a review after .NET 8 releases when we're less busy.

@MackinnonBuck ... The ask is WRT moving a very large value from a <textarea> into C#, and I presume that we'll go with a streaming approach.

Although we certainly can cross-link the large and complex InputLargeTextArea sample/component, it seems rather overkill for a basic demo use case for reading a <textarea> in a form. Devs can use that InputLargeTextArea directly from the sample app and revise and extend it for their needs.

For simple one-off value read and for the sake of a quick demo and explanation of streaming an element value like this (that I can also point out in the doc has broader application for reading very large values into C#), I think we should show something else in the Forms article. For a basic use case that dovetails with our other Forms article examples, what do you think about something like the following (versioned 6.0+)?

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

public class ExampleModel2
{
    public string TextAreaValue { get; set; } = string.Empty;
}

@page "/form-example-10"
@inject IJSRuntime JS
@inject ILogger<FormExample10> Logger

<h1>Form Example 10</h1>

<EditForm Model="@exampleModel" OnSubmit="@HandleSubmit">
    <p>
        <label>
            &lt;textarea&gt; value streamed for assignment to <code>TextAreaValue (&lt;= 50,000 characters)</code>:
            <textarea @ref="largeTextArea" />
        </label>
    </p>

    <button type="submit">Submit</button>
</EditForm>

<p>
    TextAreaValue length: @exampleModel.TextAreaValue1.Length
</p>

@code {
    private ExampleModel2 exampleModel = new();
    private ElementReference largeTextArea;

    private async Task HandleSubmit()
    {
        exampleModel.TextAreaValue = await GetTextAsync();

        Logger.LogInformation("TextAreaValue length: {Length}", exampleModel.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)
        {
            // Due to security considerations, zero-length streams/textareas aren't permitted for streaming JS Interop.
            if (jsException.InnerException is ArgumentOutOfRangeException outOfRangeException &&
                outOfRangeException.ActualValue is not null &&
                outOfRangeException.ActualValue is long actualLength &&
                actualLength == 0)
            {
                return string.Empty;
            }

            throw;
        }
    }
}

[lofcz]

It is unfortunate that this works with an exception that will be thrown regularly - a rather expensive approach for production.