Blazor Server : How to access css file(s) of RazorClassLibrary from Blazor ?

Question

Hi guys ...
In my sample Blazor server project, I'm using dynamic assembly loading, to load my RazorClassLibrary dll file into my main blazor server project. This works correctly but i don't know how to load static files of my razorClassLibrary project such as css.
Where is the problem & how to solve this?
Thanks in advance

Answer 1

Hi @Hamed Vaziri ,

To access the RCL's static assets from the main project (the Blazor server project), First, place the static assets in the wwwroot folder of the RCL and reference the static assets with the following path in the app: _content/{PACKAGE ID}/{PATH AND FILE NAME}. The {PACKAGE ID} placeholder is the library's package ID. The package ID defaults to the project's assembly name if <PackageId> isn't specified in the project file. The {PATH AND FILE NAME} placeholder is path and file name under wwwroot.

For example, I create an Asp.net 6 Razor Class Library (RCL) named "RCLComponentsLib", add a Stylesheet1.css file in the wwwroot folder.

the Stylesheet1.css file:

Then, in the RCL application, there have a component as below:

In the Blazor application, add the app.UseStaticFiles(); middleware and add the RCL project reference. Then, consume the RCL component content like this:

The result like this:

More detail information, see Create an RCL with static assets in the wwwroot folder and Consume content from a referenced RCL.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Dillion

Answer 2

Many thanks @Zhi Lv - MSFT
But, As i told in my first post, I'm using rcl dynamically and i don't want to add it as reference!
If you give me a solution which use rcl dynamically.
Thanks in advance ..

Answer 3

Many thanks @Zhi Lv - MSFT
Also, after a lot of research on Oqtane framework which can load rcl dynamically, i found that the static css & js files(s) of rcl project copied to Oqtane.Server project static files inside a folder as follow :

..\wwwroot\Modules\MyRCLProjectName\Module.css
..\wwwroot\Modules\MyRCLProjectName\Module.js

This copy process occures automatically & immediately after i build my rcl solution. In the MyRCLProjectName.Package project, we have debug & release cmd file(s) which execute this code(s) after i build entire solution :

..
XCOPY "..\Server\wwwroot*" "....\oqtane.framework-dev\Oqtane.Server\wwwroot\" /Y /S /I
..

To use these staic files, In Oqtane.Server and in _Host.cshtml's code behind, It create "link ..." tag dynamically inside head tag.

That's it!
However, Thank you very much ..