CODEWITHSUNDEEP
blazor
Chas
Chas

Reputation: 89

Blazor Components in Razor Pages

We have a basic razor page app. We would like to add Blazor components. We have no problem getting this to work via replicating the steps in the 04/16 Blazor Update video or using the Blazor documentation. However, once we add the Blazor component to a Razor page, all of our asp-page links no longer work. The url changes in the address bar, but we remain on the same page. The startup file is as follows:

public void ConfigureServices(IServiceCollection services)
{
    services.Configure<CookiePolicyOptions>(options =>
    {
        options.CheckConsentNeeded = context => true;
    });

        services.AddRazorPages()
            .AddNewtonsoftJson();

        services.AddServerSideBlazor();
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Error");
            app.UseHsts();
        }

        app.UseHttpsRedirection();
        app.UseStaticFiles();

        app.UseCookiePolicy();

        app.UseRouting();

        app.UseAuthorization();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapRazorPages();
            endpoints.MapBlazorHub();
         });
    }

If some one can point me to a multi page tutorial with Razor Pages and Blazor Components, I’m sure we can figure this out! Thanks in advance!

The blazor components works fine. 

<a asp-page="./Index">Home</a><br /> 
<div id="Counter"> @(await Html.RenderComponentAsync<Counter>()) 
<script src="~/_framework/blazor.server.js">
</script> 
</div>

The microsoft docs state - Integrate components into Razor Pages and MVC apps Use components with existing Razor Pages and MVC apps. There's no need to rewrite existing pages or views to use Razor components. When the page or view is rendered, components are prerendered† at the same time. - https://learn.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.0

Upvotes: 5

Views: 8475

Answers (2)

enet
enet

Reputation: 45734

In order to embed Razor Components in your Razor Pages you can do the following:

  1. Add a folder named Components to your app 1.1 Create a component named App.razor which should contain: <Router AppAssembly="@typeof(MvcSandbox.Startup).Assembly" />

  2. Create a folder named Pages (Under the Components folder)

  3. Place your Counter.razor file in this folder. This folder may contain more Razor Components.
  4. Add a _ViewImports.cshtml in the Pages folder. It should contain:
    @using WebApplication1.Components.Shared
    @layout MainLayout

  1. Create a folder named Shared in your Components folder. This folder should contain two files: MainLayout.razor and NavMenu.razor. Just copy these files from a Blazor app.

  2. Add a _ViewImports.cshtml file in the Components folder This file should contain: @namespace WebApplication1.Components

What actually we did here is creating a Blazor app, that would be prerendered and executed in your MVC or Razor Pages.

How to use it:

  1. In your application Pages folder (WebApplication1.Pages) add two files: Components.cshtml and Components.cshtml.cs

1.1 Components.cshtml may contain:

 @page
@model WebApplication1.Pages.ComponentsModel
@{ 
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebApplication1- Components</title>
    <base href="~/" />
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
</head>
<body>
    <app>@(await Html.RenderComponentAsync<WebApplication1.Components.App>())</app>

    <script src="_framework/components.server.js"></script>
</body>
</html>

1.2 Components.cshtml.cs should contain something like:

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace WebApplication1.Pages
{
    public class ComponentsModel : PageModel
    {
        public void OnGet()
        {
        }
    }
}

That is all. If this does not work, the issue may be related to configuration faults in the Startup class.

Hope this helps...

Upvotes: 3

Chas
Chas

Reputation: 89

Opened this issue - https://github.com/aspnet/AspNetCore/issues/9834. Turns out, this was a bug that needed to be resolved by the Blazor team. You will also want to take a look at https://github.com/aspnet/AspNetCore/pull/10062. To resolve immediately, do a pull request when this issue is closed or wait till the next preview release.

Upvotes: 3

Related Questions