dotnet / AspNetCore.Docs

Documentation for ASP.NET Core
https://docs.microsoft.com/aspnet/core
Creative Commons Attribution 4.0 International
12.6k stars 25.29k forks source link

@inherits InputText causes an unhandled error in a Blazor WebAssembly project #17200

Closed BrettSandham closed 4 years ago

BrettSandham commented 4 years ago

As soon as I add "@inherits InputText", I get an unhandled error when requesting the page...

@page "/notebook" @inherits InputText

Notebook


Document Details

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

guardrex commented 4 years ago

Hello @BrettSandham ... standby ... let's check on that ...

@rynowak, the code sample came from your issue at https://github.com/dotnet/AspNetCore.Docs/issues/13912 (approved on PR #14123). I just noticed a suspicious phrase there ...

We plan to add this feature to InputText when possible.

... "when possible."

rynowak commented 4 years ago

When possible in this context means: " when we have time and ability" The team is focused on the Blazor WASM release right now, which doesn't include an update to the component model (or built-in components).

We learned from user feedback after shipping 3.0 that people really wanted this functionality, but didn't have time to do it in 3.1 - so we made a sample for how you can implement it yourself.

What's the exception?

guardrex commented 4 years ago

It seems ok here ... I can't repro any error.

One thing tho looking at this text/example again now. :eyes: I think I should flesh it out fully. It's a little too FAST. I could put up something akin to the first example in the topic. Something like this ......

Shared/CustomInputText.razor:

@inherits InputText

<input 
    @attributes="AdditionalAttributes" 
    class="@CssClass" 
    value="@CurrentValue"
    @oninput="EventCallback.Factory.CreateBinder<string>(
         this, __value => CurrentValueAsString = __value, 
         CurrentValueAsString)" />

Pages/TestForm.razor:

@page  "/testform"
@using System.ComponentModel.DataAnnotations;

<EditForm Model="@_exampleModel" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <CustomInputText @bind-Value="_exampleModel.Name" />

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

<p>
    CurrentValue: @_exampleModel.Name
</p>

@code {
    private ExampleModel _exampleModel = new ExampleModel();

    private void HandleValidSubmit()
    {
        Console.WriteLine("OnValidSubmit");
    }

    public class ExampleModel
    {
        [Required]
        [StringLength(10, ErrorMessage = "Name is too long.")]
        public string Name { get; set; }
    }
}