CODEWITHSUNDEEP
c#asp.net-corerazor-pagesblazor-server-side
user520100
user520100

Reputation: 121

How to integrate Razor Components into existing Razor Pages Asp.net Core project with multiple routes

I have an existing Razor Page asp.net Core 2.2 project I am trying to port to asp.net core 3 (I understand this is still in preview but RC is just around the corner and I'm just brushing up) it's a basic project with a few simple pages and some routing for those pages. I can get the components to render correctly, but the SignlaR connection for dynamic content only works on the index page, no matter where I inject the blazor js

My startup.cs looks like this

public class Startup
{
    public Startup(IConfiguration configuration)
    { 
        Configuration = configuration;
    }

    public IConfiguration Configuration { get; }

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

        services.AddRazorPages();
        services.AddServerSideBlazor();
        services.AddMvc();
    }

    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.MapBlazorHub();
            endpoints.MapRazorPages();
            endpoints.MapControllers();
        });
    }
}

I've created my _imports.razor file that contains...

@using System.Net.Http
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Layouts
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.JSInterop
@using Web
@using Web.Components

...and in my _Layout.cshtml file I've placed a reference to the blazor script...

<script src="_framework/blazor.server.js"></script>

On both my index and sub page I'm calling the component like this...

<div id="counter">
    @(await Html.RenderComponentAsync<Web.Components.Counter>(new { }))
</div>

On the index page of the site everything works fine, rendering of CSS and HTML with dynamic server executed code working through SignalR. But as soon as go to another page or route, the CSS and HTML still render but the dynamic server side content stops, even though I've placed the blazor.server.js in the global layout. Should this not work on all child pages and routes that are linked to the parent layout page?

Upvotes: 0

Views: 2619

Answers (2)

user520100
user520100

Reputation: 121

For anybody who's looking I managed to work out the answer.

As well as making the all the previous changes mentioned above, you also need to put this inside your HEAD tag, in your _Layout.cshtml

<base href="~/" />

After this, the dynamic server-side components work on any route and page. Tested and working on Preview 7 too, woop!

Upvotes: 1

JBlazor
JBlazor

Reputation: 11

In Blazor a layout is just another component,(Layout Documentation) and so we shouldnt put the script tag there. I would suggest you move it back to the _Host.cshtml within the Pages folder. If you are using the basic template is that were your Counter.razor component is? If so, you should then simply be able to add

<Counter />

anywhere within index.razor or FetchData.razor and check that it's working in those locations.

If you have moved the Counter component, then maybe re-read the Components documentation again, particularly the section Component Classes, I think that should help you.

For extra info see this error message: Script tags should not be placed inside components because they cannot be updated dynamically. To fix this, move the script tag to the 'index.html' file or another static location. For more information see https://go.microsoft.com/fwlink/?linkid=872131

Upvotes: 0

Related Questions