3

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.

Improve this question

2 Answers 2

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

You pointed me in the right direction (_Host.cshtml). When I follow the source there, it takes me to the method which lives in Microsoft.AspNetCore.Mvc.ViewFeatures (more MVC, it's still confusing to me). And I still can't reference Html.RenderStaticComponentAsync from my Index.razor even though I have it exactly as the docs do. But I suppose that's a separate problem.
Once again, Html.RenderStaticComponentAsync is not Blazor. Blazor does not have the concept of Html helpers. Html helpers are used in MVC and Razor Pages. _Host.cshtml is a Razor file, not a Blazor file. Thus, if you want to use Html.RenderStaticComponentAsync to enable pre-rendering, you should use it in a .cshtml extension file. And no, you "can't reference Html.RenderStaticComponentAsync from my Index.razor." But you can reference Html.RenderStaticComponentAsync from .cshtml extension file. I know, it's confusing, and indeed requires some learning efforts.
That being the case, this is terribly confusing. "Html.RenderStaticComponentAsync is not Blazor:" well it's in the blazor docs. "you can reference Html.RenderStaticComponentAsync from .cshtml extension file:" This is the documented way to render components and when I add a new component to a blazor project I get a .razor file.
0

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/>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.