CODEWITHSUNDEEP
asp.net-coreblazorblazor-server-side
dudeNumber4
dudeNumber4

Reputation: 4687

Can't render blazor component

Using visual studio 2019 preview 2.0, .NET core SDK 3.0.100-preview8-013656. Server-side blazor application.

The blazor docs say the way to render a component is to call Html.RenderComponentAsync. I can't find this static Html class anywhere.
In the SDK directory, when I look inside Microsoft.AspNetCore.Components.dll, I see it has an HtmlRenderer class with such a method, but it's not static.
When I look at AspNetCore source, I see an HtmlHelperComponentExtensions class in namespace Microsoft.AspNetCore.Mvc.Rendering

MVC? I'm very confused. I'm using the latest SDK, is the doc simply old?

If I try to navigate directly to the route for my component, I just get (await Html.RenderComponentAsync()) written directly to my document along with signalR exceptions to the console.

Upvotes: 3

Views: 4090

Answers (2)

Albert Takaruza
Albert Takaruza

Reputation: 1

The problem is that you want to use the Html.RenderComponentAsync in the wrong is why it won’t work and probably you can’t proceed from this. your actual problem is that you want to display a Razer component inside another razer component or blazer page in case of a full blazer App. At this point, the solution is that instead of doing this

@(await Html.RenderComponentAsync<Counter>(new { IncrementAmount = 10 }))

just do this

\<Counter IncrementAmount = 10/>

Upvotes: 0

enet
enet

Reputation: 45586

When I look at AspNetCore source, I see an HtmlHelperComponentExtensions class in namespace Microsoft.AspNetCore.Mvc.Rendering

MVC? I'm very confused. I'm using the latest SDK, is the doc simply old?

No, the docs are not old... Html.RenderComponentAsync is not Blazor. Blazor does not have the concept of Html helpers, and its file extensions are either .razor, for Component files or .cs for normal class. 

@(await Html.RenderComponentAsync<Counter>(new { IncrementAmount = 10 }))

The code above use the Html helper method RenderComponentAsync to render a component named Counter embedded in an MVC app, passing to its IncrementAmount property the value 10.

If you select server-side Blazor app, a file named _Host.cshtml is created for you in the Pages folder. This file contains the method RenderComponentAsync whose type specifier is App, which is the root element of the Blazor app, thus pre-rendering the whole app.

To do: Be sure to install the latest preview of Visual Studio 2019: .NET Core 3.0 Preview 8 requires Visual Studio 2019 16.3 Preview 2 or later

To install the latest Blazor WebAssembly template also run the following command: dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview8.19405.7

You should select Blazor Server App (server-side Blazor), and you'll get everything ready. You don't have to add anything else.

Upvotes: 1

Related Questions