CODEWITHSUNDEEP
razorblazor
Neil W
Neil W

Reputation: 9112

Load Razor Component in Layout Page

I have a Blazor WebAssembly Hosted Application. My intention is to use Server for some of the site and WebAssembly pages for the remainder so they can run off-line.

I have what should be a simple question about the Server side.

I have the following:
Pages/_Layout.cshtml
Pages/Index.cshtml
Pages/Components\MyComponent.razor

/Pages/_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="/lib/twitter-bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <base href="~/" />  
</head>
<body>
    <div>
        The Layout Header
        WHAT MAGIC GOES HERE TO INSERT MyComponent.razor
    </div>
    <div class="m-2">
        @RenderBody()
    </div>
    <script src="_framework/blazor.server.js"></script>
</body>
</html>

/Pages/Index.cshtml

@page
@model MyApp.Server.Pages.IndexModel
@{
}

<h1>Index Page</h1>

/Pages/Components/MyComponent.razor

<h3>My Component</h3>

My output is:

The Layout Header

The Index Page

I want:

The Layout Header

My Component

The Index Page

How do I add that razor component to my _Layout.cshtml page?

Upvotes: 1

Views: 1859

Answers (1)

enet
enet

Reputation: 45596

Your _Layout.cshtml page is a Razor Pages page, right? So you can use the component Html tag to render a Blzor component in your Razor Pages page, something like this:

<div>
        The Layout Header
        WHAT MAGIC GOES HERE TO INSERT MyComponent.razor
        <component type="typeof(MyComponent)" render- 
             mode="ServerPrerendered" />
</div>

Note that the above requires you to set some configuration for this to work.

Upvotes: 2

Related Questions