[ACCEPTED]-Blazor in MVC: Component gets rendered, but @onclick not working. Problem with connection-blazor-server-side

Accepted answer

Score: 10

The solution to the problem was changing 3 two things:

To fix the errors in the console I had to put <base href="/" /> in the header of _Layout.cshtml
To fix the actual @onclick issue I had to put these using statements in the Blazor component:

@using Microsoft.AspNetCore.Components
@using Microsoft.AspNetCore.Components.Web;

After that the @onclick was working 2 and intellisense recognized stuff a bit 1 better in the Blazor component.

Score: 2

From the docs: https://docs.microsoft.com/en-us/aspnet/core/host-and-deploy/blazor/index?view=aspnetcore-3.0&tabs=visual-studio#app-base-path

App base path

The app base path is the app's root URL 51 path. Consider the following ASP.NET Core 50 app and Blazor sub-app:

The ASP.NET Core app is named MyApp:
- The app physically resides at d:/MyApp.
- Requests are received at https://www.contoso.com/{MYAPP RESOURCE}.
A Blazor app named CoolApp is a sub-app of MyApp:
- The sub-app physically resides at d:/MyApp/CoolApp.
- Requests are received at https://www.contoso.com/CoolApp/{COOLAPP RESOURCE}.

Without specifying 49 additional configuration for CoolApp, the sub-app 48 in this scenario has no knowledge of where 47 it resides on the server. For example, the 46 app can't construct correct relative URLs 45 to its resources without knowing that it 44 resides at the relative URL path /CoolApp/.

To provide 43 configuration for the Blazor app's base 42 path of https://www.contoso.com/CoolApp/, the <base> tag's href attribute is set to 41 the relative root path in the Pages/_Host.cshtml file (Blazor 40 Server) or wwwroot/index.html file (Blazor WebAssembly):

<base href="/CoolApp/">

Blazor 39 Server apps additionally set the server-side 38 base path by calling in the app's request 37 pipeline of Startup.Configure:

app.UsePathBase("/CoolApp");

By providing the relative URL 36 path, a component that isn't in the root 35 directory can construct URLs relative to 34 the app's root path. Components at different 33 levels of the directory structure can build 32 links to other resources at locations throughout 31 the app. The app base path is also used 30 to intercept selected hyperlinks where the 29 href target of the link is within the app base 28 path URI space. The Blazor router handles 27 the internal navigation.

In many hosting 26 scenarios, the relative URL path to the 25 app is the root of the app. In these cases, the 24 app's relative URL base path is a forward 23 slash (<base href="/" />), which is the default configuration 22 for a Blazor app. In other hosting scenarios, such 21 as GitHub Pages and IIS sub-apps, the app 20 base path must be set to the server's relative 19 URL path of the app.

To set the app's base 18 path, update the <base> tag within the <head> tag elements 17 of the Pages/_Host.cshtml file (Blazor Server) or wwwroot/index.html file (Blazor 16 WebAssembly). Set the href attribute value to 15 /{RELATIVE URL PATH}/ (the trailing slash is required), where 14 {RELATIVE URL PATH} is the app's full relative URL path.

For 13 an Blazor WebAssembly app with a non-root 12 relative URL path (for example, <base href="/CoolApp/">), the app 11 fails to find its resources when run locally. To overcome 10 this problem during local development and 9 testing, you can supply a path base argument that 8 matches the href value of the <base> tag at runtime. Don't 7 include a trailing slash. To pass the path 6 base argument when running the app locally, execute 5 the dotnet run command from the app's directory with 4 the --pathbase option:

dotnet run --pathbase=/{RELATIVE URL PATH (no trailing slash)}

For a Blazor WebAssembly app 3 with a relative URL path of /CoolApp/ (<base href="/CoolApp/">), the command 2 is:

dotnet run --pathbase=/CoolApp

The Blazor WebAssembly app responds locally 1 at http://localhost:port/CoolApp.

Score: 0

In my case was passing a specific model 4 as parameter to component, the model has 3 been created with DI and had no parameterless 2 constructor. Once such default constructor 1 was added everything started to work fine.

Source: stackoverflow.com

[ACCEPTED]-Blazor in MVC: Component gets rendered, but @onclick not working. Problem with connection-blazor-server-side

App base path

Cannot render raw html in a Razor component

Run Blazor WASM as Blazor Server-Side

How to add onclick with parameter to button in Blazor?

How to Separate Code From UI In Blazor.Net

How do I get the access token from a blazor (server-side) web app?

Play sound on the client in Blazor?

How to add controller (not view) support to a server-side Blazor project

Blazor TypeError: Cannot read property 'removeChild' of null at Object.e [as removeLogicalChild]

Blazor Navigation: Update URL without changing reloading page

ASP.Net Core Blazor: How to load different _Host.cshtml files based on header value