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.