EditForm on Razor component not firing OnValidSubmit

Question

I have a simple razor component that accepts a comment from a user and then saves the comment. The Page that renders it is currently located at Pages >> Expeditions >> Index.cshtml. When I navigate to /Expeditions in a browser everything loads correctly and the OnValidSubmit works. When I navigate to /Expeditions/Index the page renders properly but the OnValidSubmit is never fired.

I'm guessing there is some type of magic that takes place when I leave out Index in the URL. I'm wondering what I am doing incorrectly here because if I put the component in any page other than an Index page, the Submit button doesn't fire the OnValidSubmit.

Here is the code... Index.cshtml

@page
@model Project1.com.Pages.Expeditions.IndexModel
@{
    ViewData["Title"] = "Home page";
}

@(await Html.RenderComponentAsync<ComposeCommentComponent>(RenderMode.ServerPrerendered, new { PostId = 1 }))

<script src="_framework/blazor.server.js"></script>

ComposeCommentComponent.razor

@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Forms
@using Project1.com.Models
@using Project1.com.Services
@using System.Security.Claims
@using Microsoft.AspNetCore.Components.Authorization
@inject AuthenticationStateProvider AuthenticationStateProvider

@inject CommentService CommentService

<EditForm Model="@Comment" OnValidSubmit="OnValidSubmit">
    <div class="form-group">
        <InputTextArea id="Comment" @bind-Value="@Comment.Comment" class="form-control" rows="5" cols="65" placeholder="Leave a Comment!"></InputTextArea>
    </div>
    <button class="btn btn-primary float-right">Submit</button>
</EditForm>

@functions{
    public ClaimsPrincipal User { get; set; }

    protected override async void OnInitialized()
    {
        await base.OnInitializedAsync();

        var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
        User = authState.User;
    }
}

@code {
    [Parameter]
    public int PostId { get; set; }

    CommentModel Comment = new CommentModel();

    private async void OnValidSubmit()
    {
        // Update Database with New Comment
        CommentService.CreateComment(new CommentModel() { Username = User.Identity.Name, Comment=Comment.Comment, PostId=PostId});

        // Clear Comment
        Comment.Comment = "";

        // Notify Parent Component to Update Data.
        await OnNewComment.InvokeAsync(Comment.Id);
    }

    [Parameter]
    public EventCallback<int> OnNewComment { get; set; }
}

Startup.cs

using Project1.com.Data;
using Project1.com.Services;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.AspNetCore.Identity;
using Microsoft.AspNetCore.Identity.UI;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Project1.com
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddDbContext<ApplicationDbContext>(options =>
                options.UseSqlServer(
                    Configuration.GetConnectionString("DefaultConnection")));
            services.AddDefaultIdentity<IdentityUser>(options => options.SignIn.RequireConfirmedAccount = true)
                .AddEntityFrameworkStores<ApplicationDbContext>();
            services.AddRazorPages();
            services.AddServerSideBlazor();

            services.AddTransient<ExpeditionService>();
            services.AddTransient<CommentService>();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
                app.UseDatabaseErrorPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseStaticFiles();

            app.UseRouting();

            app.UseAuthentication();
            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapRazorPages().RequireAuthorization(); 
                endpoints.MapBlazorHub();
            });
        }
    }
}

Answer 1

If you check the page that doesn't work you'll find there are one or more blazor.server.js 404 errors. Probably this:

Your problem is that you are not specifying a base href for your application.

• /Expeditions works because Blazor thinks you're in the root, but
• /Expeditions/Index doesn't because it now tries to access resources from the /Expeditions subdirectory.

Blazor uses <base href="~/" /> to define where to get it's resources.

@page 
@using StackOverflow.Web.Components
@model StackOverflowAnswers.Pages.MeModel
@{
    ViewData["Title"] = "Home page";
}
<!DOCTYPE html>
<html lang="en">
<head>
    <base href="~/" />
</head>
<body>
    @(await Html.RenderComponentAsync<ComposeCommentComponent>(RenderMode.ServerPrerendered, new { PostId = 1 }))

    <script src="_framework/blazor.server.js"></script>
</body>
</html>

Note: @enet's points in his answer still apply to clean up your code.