Binded Textarea truncates value in Blazor WASM if it contains HTML code

Question

I'm using .NET 6 and Blazor WASM. When I paste to textarea normal text, no matter how long or short, it works fine and shows up in variable. However if I paste HTML source code from website (for example this site, or any other), it seems to truncate it from middle if it's longer than thousands of characters. It takes X amount of characters from beginning and end, in the middle it has …. The truncated string is usually around 1000-1200 characters.

I tried extracting the value from textarea-element with vanilla js and it worked completely fine.

NOTE! This did work ~2-3 months ago, I just suddenly noticed it stopped working. I have deployed code similar to this, but on different file. I have not manually updated anything in framework or editor (Visual Studio 2022)

So I have simple code that is something like this:

<form>
    <label for="pasteHtml">Paste HTML code here</label>
    <textarea @bind="pastedHtml" id="pasteHtml" rows="3"></textarea>
</form>
<button @onclick="ParseHtml"> Parse HTML</button>

@code {
    // This is where I have the problem, pastedHtml value is truncated if it contains HTML code..
    private string pastedHtml= "";

    private void ParseHtml()
    {
        // Code... etc

What you have created here is not a question - it is more like a bug issue - those should be posted on the aspnetcore GitHub repo. — Mister Magoo
– Mister Magoo, Commented Nov 24, 2022 at 23:06
@MisterMagoo Thanks for suggestion, I will try that too. I kinda thought it is just some kind of new protection against injecting code in forms or something.. Appreciate — veix
– veix, Commented Nov 24, 2022 at 23:29
Are you certain that the source value was not truncated before being placed on the clipboard? — Jeremy Lakeman
– Jeremy Lakeman, Commented Nov 24, 2022 at 23:47
@JeremyLakeman Actually after trying Vikman's examples, I see the problem actually is not that textarea bind truncates it, but rather Visual Studio value inspecting shows it truncated, and for some reason HtmlAgilityPack also reads the truncated version, interesting. — veix
– veix, Commented Nov 25, 2022 at 8:33

Vikram Reddy · Accepted Answer · 2022-11-25 06:17:10Z

1

I don't see any issue with textarea and InputTextArea.

InputTextArea Example:

@page "/test"

<EditForm EditContext="@_editContext" OnValidSubmit="HandleOnValidSubmit">

    <div class="form-group row m-3">
        <label class="col-md-2 col-form-label">Html Code:</label>
        <div class="col-md-10">
            <InputTextArea class="form-control" @bind-Value="sampleCode.HtmlCode" />
        </div>
    </div>

    <div class="row m-3">
        <div class="col-md-12 text-right">
            <button type="submit" class="btn btn-success float-right">Submit</button>
        </div>
    </div>
</EditForm>

<div class="row m-3">
    <div class="col-md-12 text-right">
        HTML code length: @length
    </div>
</div>

@code {
    private int length;
    private SampleCode sampleCode = new SampleCode();
    private EditContext _editContext;

    protected override void OnInitialized()
    {
        _editContext = new EditContext(sampleCode);
        base.OnInitialized();
    }

    public void HandleOnValidSubmit()
    {
        this.length = sampleCode.HtmlCode.Length;
        Console.WriteLine($"HTML code length: {sampleCode.HtmlCode.Length}");
    }

    public class SampleCode
    {
        public string HtmlCode { get; set; }
    }
}

textarea Example:

@page "/test"

<div class="form-group row mb-3">
    <label class="col-md-2 col-form-label">Html Code:</label>
    <div class="col-md-10">
        <textarea class="form-control" rows="3" @oninput="OnInput"></textarea>
    </div>
</div>

<div>HTML code length: @length</div>

@code {
    private int length;

    void OnInput(ChangeEventArgs args)
    {
        this.length = args.Value.ToString().Length;
    }
}

answered Nov 25, 2022 at 6:17

Vikram Reddy

745 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

veix Over a year ago

Thank you for code examples, they actually showed me that the code can handle and even print the HTML code with no problems, but the problem seems to appear in Visual Studio when inspecting the value while debugging.. Also the problem somehow carries over when using HtmlAgilityPack to handle the data, still unsure what is the problematic part. Do you have any suggestions?

Vikram Reddy Over a year ago

For what purpose are you using the HtmlAgilityPack library? Are you open to trying other libraries?

veix Over a year ago

I am extracting information from the HTML source code. I save the HTML source code as HtmlDocument with HtmlAgilityPack so I can select nodes and save information for analyzing.

Collectives™ on Stack Overflow

Binded Textarea truncates value in Blazor WASM if it contains HTML code

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related