Blazor - Razor class library - reuse full blazor page

Question

I am having a problem here,

I created a Blazor app (server side) with core 3.1, then I created a Razor class library (old razorlib) with this classlib I can create blazor comp and reuse in my blazor app < myComp >, share Css even create full Razor views like Area/MyAdmin/Pages/Page1.cshtml and use it from my Blazor app calling https://MyApp/MyAdmin/Page1, sorry for the big introduction, my problem is, how to reuse FULL Blazor componemt like a page? add in my Razor class lib a folder Pages and in there add Contact.razor and it will not be used as < Contact > from my Blazor app but I will be able to call just like https://MyApp/Contact?

can someone give me an example? Thanks!

Answer 1

• Once you have created RazorClasslibrary Project with Component1 as Your Razor Page build the project with output type:(default) class libray
• Single dll will be created , remember the namespace
• Add reference to your new Blazor project as assemble by selecting dll or add as project by selecting .csproj
• Not required but build the new Blazor project and In any page start adding your component.
• You can either use fully qualified namespace or import in new /contact page removing other not required code

eg.

@page "/contact"
<RazorClassLibrary.Component1></RazorClassLibrary.Component1>
@code { ... }

Answer 2

There are a few steps to make to show a page from a Razor class library in a Blazor project:

1. Create a class library (there exists a template)

2. Add a page to the class library

3. Add the project reference to your blazor project (Rightclick on dependencies ...)

4. In the Blazor project add the assembly of the Razor component library to the Router component (in this example the name of the Razor component library is GeneralUi). You can do that by setting the AdditionalAssemblies parameter:

      <Router AppAssembly="@typeof(Program).Assembly"
            AdditionalAssemblies="new[] { typeof(GeneralUi.About).Assembly}">
        <Found Context="routeData">
            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
   

Here it is important that you just take a page from the Razor component library (doesn't matter which one you take). With that step you are able to route to pages from the Razor component library.

If you just want to use components (no pages) you can drop step 4. Then you just need to include the component in another component. If you don't want to provide the full namespace there just add the namespace in the _Imports.razor file of your Blazor project.

If you have styles defined in you Razor class library you need to add these styles (files) to the Blazor project. In Blazor WebAssembly you can do this in the index.html file just by adding:

<link href="_content/GeneralUi/css/styles.css" rel="stylesheet" />

The _content is a naming convention and it is needed to tell that the style file is from another assembly/project. In this example, the style file styles.css comes from the GeneralUi project, and there it is placed in the css folder under the wwwroot folder (in the wwwroot folder are all static assets of a project)