Why isn't my JavaScript rendering properly when using Blazor?
Question
So I have this theme that I usually use, it's a folder containing all the files, such as the assets, the html pages etc etc.
And if I start the index page from there and I click a menu item, wen can clearly see that the animation works perfectly.
However, as soon as I add the same CSS and JS which that page uses, this is how it starts acting.
You can't see it but I'm clicking each item, and it doesn't animate the menu. It's also missing some icons which you can see if you compare the two.
Now here is what's interesting.. It works PERFECTLY if I change the render-mode to static rather than ServerPrerendered here
<app>
<component type="typeof(App)" render-mode="ServerPrerendered" />
</app>
But if I do that we have this issue..
Rendering server components from a static HTML page isn't supported.
The way I add the HTML is by doing this.. I go into the _Host.cshtml file and at the top in the tags like so
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="stylesheet" href="assets/css/bootstrap/bootstrap.min.css" />
<link href="assets/css/site.css" rel="stylesheet" />
<!-- Articles CSS -->
<link type="text/css" rel="stylesheet" href="assets/plugins/dataTable/datatables.min.css">
<link type="text/css" rel="stylesheet" href="assets/plugins/summernote/summernote.min.css">
<link type="text/css" rel="stylesheet" href="assets/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css">
<!-- Main CSS -->
<link type="text/css" rel="stylesheet" href="assets/css/style.css" />
And the same goes for the JS files, but I do it before the tag like so..
<script src="_framework/blazor.server.js"></script>
<!-- Footer Script -->
<!--================================-->
<script src="assets/plugins/jquery/jquery.min.js"></script>
<script src="assets/plugins/jquery-ui/jquery-ui.js"></script>
<script src="assets/plugins/popper/popper.js"></script>
And it can obviously find some of it because it keeps the same general style, and when I render it using "static" as I mentioned before, it works just fine. It's almost as if it's rendering something too fast.
Where did I go wrong on this?
1 answers
solution1
0 2021-02-26 08:37:12
I think that's now easier to achieve with the Net5. You can add this JavaScript module to your .NET library as a static web asset (wwwroot/exampleJsInterop.js) and then import the module into your .NET code using the IJSRuntime service:
await jsRuntime.InvokeAsync<JSObjectReference>("import", "./_content/MyComponents/exampleJsInterop.js");
The “import” identifier is a special identifier used specifically for importing a JavaScript module. You specify the module using its stable static web asset path: _content/[LIBRARY NAME]/[PATH UNDER WWWROOT].
Learn more about it here
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.