One can include js/css by placing them in /wwwroot and then using the InjectJavascript and InjectStylesheet options.
But how can I instead inject a file that exists as an embedded resource? It used to be possible (if I remember correctly), but I can't find out how to do it for the AspNetCore version of Swashbuckle.
(I'm not asking how to embed a file, but rather how to tell Swashbuckle to use it.)
To customize the Swashbuckle UI in asp.net core, as you said, we need to use the SwaggerUIOptions's InjectJavascript and InjectStylesheet options.
For example, I create a Asp.net 6 application with Swashbuckle.AspNetCore 6
Then, add the css and javascript fille in the wwwroot folder.
Finally, in the program.cs file, enable Static File Middleware and inject the css and javascript file as below:
app.UseStaticFiles();
app.UseSwagger();
app.UseSwaggerUI(c =>
{
c.InjectStylesheet("/swagger-ui/css/custom.css");
c.InjectJavascript("/swagger-ui/js/CustomJavaScript.js");
});
The result like this:
Related
I have a bare bones razor pages project targeting the net6.0 framework using Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation 6.0.11 (Microsoft.NET.Sdk.Web).
It consumes a Razor Class Library, also targeting net6.0 (Microsoft.NET.Sdk.Razor).
Both projects are in the same solution in VS 2022 Pro.
I am using minimal build:
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages().AddRazorRuntimeCompilation();
builder.Services.Configure<MvcRazorRuntimeCompilationOptions>(options => {
var libraryPath = System.IO.Path.GetFullPath(System.IO.Path.Combine(builder.Environment.ContentRootPath, "..", "razor.platform.thehub.cloud"));
options.FileProviders.Add(new PhysicalFileProvider(libraryPath));
});
var app = builder.Build();
app.UseStaticFiles();
app.MapRazorPages();
app.Run();
The project builds and consumes the razor class library perfect fine. Razor pages, wwwroot content all work perfectly in the consuming app. Breakpoints work fine in the RCL and changes to any RCL wwwroot content prompts a hot reload as expected (css, js etc).
My only issue is with .cshtml in the RCL (Pages). Any changes to them prompts a hot reload as expected, so VS debugging is detecting a code change and confirms that 'Code changes were applied successfully'. However, the changes to the .cshtml file in the RCL are not shown. I have to rebuild and restart the local debugging session to see them.
I'm convinced I've been able to do this in the past (Core 2/3), but I may be imagining it!
Any help greatly appreciated.
I was also wondering the same. The feature that existed in the past was called "razor runtime compilation". According to official docs:
Enable runtime compilation with the instructions at Conditionally
enable runtime compilation in an existing project.
Configure the runtime compilation options in
Startup.ConfigureServices:
public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
services.Configure<MvcRazorRuntimeCompilationOptions>(options =>
{
var libraryPath = Path.GetFullPath(
Path.Combine(HostEnvironment.ContentRootPath, "..", "MyClassLib"));
options.FileProviders.Add(new PhysicalFileProvider(libraryPath));
});
}
In the preceding code, an absolute path to the MyClassLib RCL is
constructed. The PhysicalFileProvider API is used to locate
directories and files at that absolute path. Finally, the
PhysicalFileProvider instance is added to a file providers collection,
which allows access to the RCL's .cshtml files.
I recently took over an application which combines a number of cshtml files written in Razor with a JavaScript spa. I've never seen this structure before and am wondering if anyone has run into this before?
/api
/App_Code
MyCache.cs - caches some data from an external API
Application.cs - looks like the code behind for Global.asax
Api.cshmtl - Uses razor syntax but the entire file is C# and it gets an auth Token and adds it to all api calls.
Global.asax - without global.asax.cs
web.config - not much helpful in here.
index.cshtml
Most of the .cshtml files use Razor syntax. Some are just calling a method from the MyCache.cs via #Html.Raw(myMethodFromCache).
Unfortunately, I don't have a .csproj or .sln file, so it's really hard to guess how this gets compiled. Also no package.config, so I don't know what version of the assemblies, but it only includes:
System.Web.Helpers
System.Web
System.Web.WebPages.Deployment
System.Web.WebPages
System.WebPage.Razor
Have any of you see something like this before? Do you know if this is some older way of handling Spas with .NET?
Any suggestions you have are appreciate.
I finally figured out what this is. It is using ASP.NET Web Pages which is a package available on NuGet. It is a trimmed down version of ASP.NET with the Razor syntax and .cshtml pages without all of the overhead of MVC.
And it was set up to run as a "web site" instead of "web application" which means the application is built at runtime.
It is a pretty simple Task, I want to use images in my razor pages which are located in wwwroot/css/images and use it in html like this.
<img src="~/css/images/logo.png"/>
In a normal ASP.Net Core application I would just add app.UseStaticFiles() in the Configure method, but since this is a blazor hosted application, it changes nothing.
I also tried adding the app.UseStaticFiles() in the server project, but with no success either.
If you want to try it out yourself just create a blazor-hosted project from the templates and try to serve/display images like I did.
Blazor serves static file just fine. The issue you’re having is the syntax you’re using to reference the file. You just need to drop the ~ symbol.
<img src="/css/images/logo.png" />
One precision about that...the static file root for anything
in blazor starts at the wwwroot folder. wwwroot is
simply taken for granted and is omitted in the actual
path you need to use to ask for a static file. using :
"/css/images/logo.png"
could also be expressed :
"css/images/logo.png"..I'm pretty sure.
If you are in a Razor Class Libray...there is also a wwwroot for
the Razor Class Library itself. When used is a Blazor
Wasm Client the filepath for any static file in the RCL becomes :
"_content/[RCL assembly name]/css/images/logo.png"
Note that even for classes and stuff you implement inside the Razor Class Library itself,
even you are in that library defining stuff...static files
in your own wwwroot inside a Razor Class Library are called using
the "_content/[RCL assembly name]" prefix.
I have a webpack configuration that ties together all the dependencies for my web app. The web app is pretty old and is made using Web Forms. I'm going away from using the built in .NET minifier and bundle loader, and instead, towards using webpack's vendor packages etc.
My issue is that the web app is served out of a virtual directory, so I need to be able to reliably locate all required *.js files at runtime for the web app. In my mind I reckon this looks like webpack "somehow" producing an output of what files it has written (including hashes etc), then somehow putting this into my master pages or something. I know there is the HTML plugin for webpack but I don't know how to wrangle that to just produce a list of the *.js files, or if thats even on the right track.
How can I load my webpack'd *.js and *.css files from within Web Forms?
First, you need to install assets-webpack-plugin and configure it in your webpack. You can access this package here in npmjs.org
Why Is This Useful?
When working with Webpack you might want to generate your bundles with a generated hash in them (for cache busting). This plug-in outputs a json file with the paths of the generated assets so you can find them from somewhere else.
There is a good tutorial here to adding styles and scripts dynamically in ASPX.
{
"one": {
"js": "/js/one_2bb80372ebe8047a68d4.bundle.js"
},
"two": {
"js": "/js/two_2bb80372ebe8047a68d4.bundle.js"
}
}
In your aspx or master-page of your web-forms, you can easily deserilize this JSON and load your script and style assets in your page.
I'm using assets-webpack-plugin in my MVC project and I'm sure it wouldn't be a problem to use it in ASPX WebForms.
How can you automatically move all RCL pages to a sub-folder of Pages/, such as Pages/<module name> at compile-time, or at WebApplication import-time?
I need this to be transparent such that, in the RCL solution, all pages are in Pages/, but compiled, they are in Pages/<module name>. Or, they're compiled at Pages/, but when imported by the WebApplication, they are hosted in Pages/<module name>.
Is there a project level setting which can prepend the compiled pages with some folder name? Or some other mechanism I can use to achieve the same effect?
Attempted Solutions
I thought about adding routing options to the RCL pages themselves via the #page razor directive but decided against it because it would have to be done to each page individually, and I need something more general which will apply to all pages in a RCL.
I looked up ways to import the RCL content under a different folder via Startup.cs's ConfigureServices() and Configure() but to no success with Conventions. Both PageRouteModel and PageApplicationModel conventions only see the overwritten pages. Also tried to use ConfigureFilter but it ran into the same issue.
Tried to look at adding something in the RCL's root _ViewImports.cshtml to apply some sort of directory offset, but I wasn't able to find good documentation on the razor directives I can use here.