Submit blazor component data to controller mvc

Question

Hi There,

I am trying to integrate blazor with MVC and use Razor Component in MVC. In that I need to send/post data from razor component form to controller in MVC on click of a button click.

Similar to what we use to do in ASP.Net mvc.

@using (Html.BeginForm("Submit", "Registration", FormMethod.Post, new { @class = "form-horizontal", id = "myform" }))

How to do it in blazor component ?

Answer 1

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?

Answer 2

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.

Answer 3

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

Answer 4

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