Submit blazor component data to controller mvc

Your example code, if it worked like MVC, unloads the Blazor application from the browser and goes to the MVC application.

How to do it in blazor component ?

Your intentions are not clear given the code example. If I had to guess, I think the MVC application is used to register a user? Is the idea to share MVC controller logic with the Blazor application?

Also, is this a Blazor server application? Client side?

Your goal is not clear. Blazor can use webclient to post form data to a MVC action, but webapi makes more sense.

If you want the page hosting the Blazor app to be replaced by MVC action, The easiest approach is to define a hidden form (or create one with jsinterop) outside the Blazor app div. Use jsinterop to load the form data and submit.

your other option is make the blazor app static (non interactive), then the component just produces the html, and the form post works as normal.

note: microsoft identity uses razor pages. so when the Blazor app needs to login/register/etc, it uses jsinterop to redirect to the razor page. MVC could be used instead.

Blazor. Interactive is currently designed to build a SPA application, not a page component. When hosted on a page, it takes over navigation by intercepting browser url navigation. In general you would recode all your site pages to be Blazor pages.

Blazor is built on 3 frameworks

• The Blazor app. this the application logic to update the Razor Component Tree. The app code is either hosted on the server or as by the browser as a WASM
• javascript render and event client. this code runs in the browser. it captures events to pass to the Blazor app, and renders the updated Blazor tree into html
• the communication layer. this allow the Blazor app to send render tree updates to the javascript client or the client to send browser events to the Blazor app. If server, then a signal/r connection is used. if WASM, then the browser's messaging system

see hosting a razor component on a razor/mvc page:

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/integration?view=aspnetcore-9.0

To achieve your requirement on form submission, send data to MVC controller using HttpClient.

@page "/form"
@inject HttpClient Http
<EditForm Model="DetailsViewModel" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <InputText @bind-Value="DetailsViewModel.Name" class="form-control" />
    <button type="submit">Submit</button>
</EditForm>
@code {
    [Parameter] public DetailsViewModel DetailsViewModel { get; set; } = new DetailsViewModel();
private async Task HandleValidSubmit()
    {
        var response = await Http.PostAsJsonAsync("/Registration/Submit", DetailsViewModel);
        if (response.IsSuccessStatusCode)
        {
            // redirect or display a message
        }
    }
}

You could refer this link for more detail:

Integrate ASP.NET Core Razor components with MVC or Razor Pages

Hi,

Thanks for your question!

When integrating Blazor components into an existing ASP.NET MVC application, submitting form data from a Blazor component directly to an MVC controller using traditional Html.BeginForm syntax isn't a supported scenario, since Blazor operates on a different rendering and event model than classic MVC views.

To post data from a Blazor component to an MVC controller, here are a few recommended approaches:

1. Use JavaScript Interop: Blazor provides JavaScript interop capabilities. You can use this to send an HTTP POST request (e.g., using fetch or XMLHttpRequest) from your Blazor component to your MVC controller endpoint.
2. Leverage HttpClient in Blazor: In server-side Blazor, you can use HttpClient to make HTTP calls directly to your MVC controller actions. This lets you mimic traditional form submissions by sending JSON or form data.
3. Bind a form and submit via JavaScript: If you prefer using standard HTML forms, you could structure a form in your Blazor component and use JavaScript to manually trigger a submission to your MVC endpoint, ensuring that data is serialized appropriately.
4. Avoid direct form posts: It’s often more manageable to treat your Blazor component as a client-side component that communicates with your MVC back end via API endpoints, rather than mixing direct form posts. This fits better with Blazor’s component model and modern web practices.

For more detailed integration guidance, I recommend checking out the official Microsoft documentation on this topic here:

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/integration?view=aspnetcore-9.0

Hope this helps.