The Razor WebApp fails to load CSS properly when integrated as middleware in a WebApi project

After successfully creating a Razor app that can be plugged into another .NET web application, I encountered an issue where the static files like *.css and *.js were not loading in the Razor project. This led to the page looking plain with just HTML. The wwwroot and other folders seemed unreachable in the browser. How can I isolate the CSS and JS files within the Razor app?

If you are looking for default projects with minimal changes, please refer to this GitHub link.

//Code snippet from the pluggable razor app
//Extension methods to add the Razor app
public static IServiceCollection AddRoseQuartz(this IServiceCollection services)
{
     services.AddRazorPages();
     return services;
}

//Method to include routing and static files
public static IApplicationBuilder UseRoseQuartz(this IApplicationBuilder builder)
{
    builder.UseStaticFiles();
    builder.UseRouting();
    builder.UseEndpoints(endpoints => { endpoints.MapRazorPages(); });
    return builder;
}
//Code snippet from the main project
// ConfigureServices method which adds services to the container
public void ConfigureServices(IServiceCollection services)
{
    services.AddRoseQuartz();
    services.AddControllers();
}

// Configure method which configures the HTTP request pipeline
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseRoseQuartz();
    //Additional startup code here
} 

Answer №1

After careful investigation over the course of a few days, I stumbled upon this particular question. Is it possible for a Razor Class Library to include static files such as js and css?

Ehsan Mirsaeedi shared a successful method for embedding static files into RCL that worked perfectly for my project. For those interested, you can find the solution at .

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I dynamically assign a value to 'ItemNullValueHandling' in C#?

I have a specific requirement to display properties in the response based on the value of a class property. When initializing the class, all properties are initialized by default. However, I want to exclude certain properties based on another property&apos ...

Challenges encountered when using Tailwindcss and Nextjs with class and variables

Hey there, I'm currently facing a major issue with tailwindcss + nextjs... The problem lies in setting classes using a variable. Although the class is defined in the css, tailwind fails to convert it into a style. This is how I need it to be: https ...

Experiencing difficulty successfully reaching two locations at the same time using a reverse proxy

I have a dilemma with my two controllers - I want to access both controllers' APIs simultaneously, but my code only hits one randomly. How can I resolve this issue? TeaController [Route("api/[controller]")] [ApiController] public class TeaC ...

Setting up a .NET Core API to redirect to a 404 page within the startup

I am facing a rather challenging task with my app, as it is going to offer 3 different startup options. Each application will be hosted differently, have unique use cases, and routing configurations. This design requirement must be adhered to without any a ...

What is the best way to create underlined text that is either left-aligned or centered?

I am looking to replicate this specific style of decoration in a full width container. My goal is to have it aligned to the left of the text and restricted to a maximum width. https://i.stack.imgur.com/H8DXT.png ...

Creating a clickable image map for the footer

I have successfully made a navigation bar fixed to the bottom right of the page. However, when I attempted to create an image map out of it in Dreamweaver, the image did not appear for me to draw around. I considered doing it manually, but then questioned ...

When utilizing a responsive table in Bootstrap, the content on the page is being shifted off the screen to the right

I've come across the following HTML (JSFiddle): <div class="d-flex" style="max-width: 1460px;"> <div style="width: 100%; background: red;"> <div class="table-responsive"> < ...

Opening a Material Dialog automatically scrolls the body to the top of the page

I'm currently using Material UI within a React application and I'm facing an issue where opening a dialog causes the body of my page to scroll to the top. This behavior also occurs when opening a Material Popover or a Material TextBox selector. D ...

Exploring the latest features in Bootstrap 4 Alpha and enhancing your

Rumors have it that Bootstrap 4 will make its debut during the year 2016. When duty calls for an upgrade, is a complete re-write truly the best solution? Tackling such a project from Boostrap 2 to 3 was no small feat, and I find myself hesitant to take on ...

Tips for switching the input language for a designated control in a Windows Forms application

Is there a way to automatically change the input language in a Windows Forms application when a specific control is focused, without requiring the user to press any keys? I am looking for a solution where the language changes to a specific language (such ...

Issue with the carousel feature displaying multiple images in Bootstrap 4.3

I attempted to create a Carousel using bootstrap that displays multiple images in a row and slides one image at a time, similar to this: https://i.sstatic.net/tw22R.png I followed this post. Instead of using bootstrap-3.3.6 and jquery-2.2.2, I used boots ...

jQuery appears to be unresponsive or inactive

I'm trying to implement a jQuery script that will slide in a header after scrolling on the page, but for some reason, it's not working. When I reach the 3rd line, my code editor displays a !read only alert, suggesting there may be a syntax issue? ...

Utilizing TWAIN for asynchronous document scanning

I am encountering an issue with my C# program that utilizes TwainDotNet to scan and retrieve images from a fujitsu scanner. Although I have functional code for this task, the GUI becomes unresponsive while waiting for the scan process to finish. Hence, I a ...

Tips for creating a responsive design for this division device

There is a video playing in the background, with two sections overlaying it - one for sketches and the other for text. The issue I am facing is that when I resize the window, the text overflows. I have tried using Bootstrap and CSS (media queries, flex) bu ...

Specialized Error Handler Yields a Distinct Error from the Standard Error Handler

My custom error handler is displaying the following message: Error Message: An exception of type 'System.Web.HttpUnhandledException' was thrown. Source: System.Web Stack Trace: at System.Web.UI.Page.HandleError(Exception e) at System.Web.UI ...

Creating objects in the server context using Component Object Model (COM) :D

I am in the process of developing a COM component with .net to update some outdated components for a server migration project. The previous component was responsible for receiving an image path from the current server, converting it to a jpeg format, and ...

Utilize a single image to encompass the entire background/theme

As a beginner, I am eager to learn how to use html and css. I understand the importance of being able to style an entire webpage in order to prevent issues like page overload or cache problems. Are there any easy-to-understand examples available for begi ...

Struggling to make input:checked feature function properly

I'm in the process of developing a product page and I'd like to implement a feature where clicking on the Buy button triggers a pop-up menu to appear. I've been attempting to use the Checkbox hack to achieve this but have encountered some di ...

I'm currently working on setting up a gallery on the lower part of my webpage, but for some reason, the lightbox2 images are not aligning next to each other in rows. Can anyone

Struggling to align images in a gallery at the bottom of my webpage. They keep appearing on separate lines instead of next to each other. HTML: <section id="galleries"> <h2>Galleries</h2> <article class="img- ...

How to Properly Adjust the Material UI CircularProgress Size

Is there a way to display the Material UI CircularProgress component at a size that nearly fills the parent div, which has an unknown size? Ideally, I want the size to be around 0.8 * min(parent_height, parent_width). I've experimented with adjusting ...