Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

Blazor Fluent UI Editform "EditForm requires either a Model parameter" error

$
0
0

I'm learning Blazor and I'm adapting Fluent UI because they are both made by Microsoft and I think they will work well.

So I'm changing the html editform below to a fluent editform.I'm applying it by looking at the form description on the Blazor Fluent UI site, and when I press the Login button, it says "EditForm requires either a Model parameter, or an EditContext parameter, please provide one of these." I get this error.

This works fine.

<EditForm Model="@loginModel" OnValidSubmit="Authenticate" FormName="LoginForm"><DataAnnotationsValidator /><div class="mb-3 text-center flex-cloumn"><h3>LOGIN</h3></div><div class="mb-3"><label for="userName" class="form-label">User Name:</label><InputText id="userName" @bind-Value="loginModel.UserName" class="form-control" /><ValidationMessage For="() => loginModel.UserName" class="text-danger" /></div><div class="mb-3"><label for="password" class="form-label">Password:</label><InputText id="password" @bind-Value="loginModel.Password" class="form-control" /><ValidationMessage For="() => loginModel.Password" class="text-danger" /></div><div class="mb-3 text-center"><span class="text-danger">@errorMessage</span></div><button type="submit" class="btn btn-primary">Login</button></EditForm>@code {    [SupplyParameterFromForm]    public LoginViewModel loginModel { get; set; } = new();    private string? errorMessage;    private async Task Authenticate()    {        Console.WriteLine("Authenticate called");    }}

but it's not

<FluentEditForm Model="@loginModel" OnValidSubmit="Authenticate" FormName="LoginForm" novalidate><DataAnnotationsValidator /><FluentStack Orientation="Orientation.Vertical"><h3>LOGIN</h3><div><FluentTextField Name="userName" @bind-Value="loginModel.UserName" Label="User Name" Required /><FluentValidationMessage For="@(() => loginModel.UserName)"/></div><div><FluentTextField Name="password" @bind-Value="loginModel.Password" TextFieldType="TextFieldType.Password" Label="Password" Required /><FluentValidationMessage For="@(() => loginModel.Password)"/></div><FluentButton Type="ButtonType.Submit" Appearance="Appearance.Accent">Login</FluentButton></FluentStack></FluentEditForm>@code {    [SupplyParameterFromForm]    public LoginViewModel loginModel { get; set; } = new();    private string? errorMessage;    private async Task Authenticate()    {        Console.WriteLine("Authenticate called");    }}

I'm already providing a Model parameter in the FluentEditform tag, but I'm getting this error, so it doesn't make a lot of sense.

InvalidOperationException: EditForm requires either a Model parameter, or an EditContext parameter, please provide one of these.

Microsoft.AspNetCore.Components.Forms.EditForm.OnParametersSet()Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()Microsoft.AspNetCore.Components.Rendering.ComponentState.SupplyCombinedParameters(ParameterView directAndCascadingParameters)Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewSubtree(ref DiffContext diffContext, int frameIndex)Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InsertNewFrame(ref DiffContext diffContext, int newFrameIndex)Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange(ref DiffContext diffContext, int oldStartIndex, int oldEndIndexExcl, int newStartIndex, int newEndIndexExcl)Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, out Exception renderFragmentException)Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()Microsoft.AspNetCore.Components.ComponentBase.StateHasChanged()Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()Microsoft.AspNetCore.Components.Rendering.ComponentState.SupplyCombinedParameters(ParameterView directAndCascadingParameters)Microsoft.AspNetCore.Components.Rendering.ComponentState.SetDirectParameters(ParameterView parameters)Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderRootComponentAsync(int componentId, ParameterView initialParameters)Microsoft.AspNetCore.Components.HtmlRendering.Infrastructure.StaticHtmlRenderer.BeginRenderingComponent(IComponent component, ParameterView initialParameters)Microsoft.AspNetCore.Components.Endpoints.EndpointHtmlRenderer.RenderEndpointComponent(HttpContext httpContext, Type rootComponentType, ParameterView parameters, bool waitForQuiescence)System.Threading.Tasks.ValueTask<TResult>.get_Result()Microsoft.AspNetCore.Components.Endpoints.RazorComponentEndpointInvoker.RenderComponentCore(HttpContext context)Microsoft.AspNetCore.Components.Endpoints.RazorComponentEndpointInvoker.RenderComponentCore(HttpContext context)Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext+<>c+<<InvokeAsync>b__10_0>d.MoveNext()Microsoft.AspNetCore.Authorization.AuthorizationMiddleware.Invoke(HttpContext context)Microsoft.AspNetCore.Authentication.AuthenticationMiddleware.Invoke(HttpContext context)Microsoft.AspNetCore.Antiforgery.Internal.AntiforgeryMiddleware.InvokeAwaited(HttpContext context)Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddlewareImpl.Invoke(HttpContext context)

Most of the answers I've found are just to make sure you've provided a Model or initialized the Model you provide, which I think is a pretty simple task and nothing more than a modification to the tutorial, but I don't know why.

I tried following this post, but I want to use httpcontext on static pages, so I was hoping there was another workaround.


Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>