What is the best location to insert JavaScript from a website template into a Blazor project?

I recently set up a new Blazor WebAssembly project in Visual Studio 2019 and wanted to integrate a website template. After downloading the template, I am unsure where to place the accompanying JavaScript files.

Currently, I have placed them within my index.html file located in the wwwroot folder:

    <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>ImmoPlatform.SPA</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="ImmoPlatform.SPA.styles.css" rel="stylesheet" />
    <link href="manifest.json" rel="manifest" />
    <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
</head>

<body>
    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <!-- jQuery library -->
    <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> -->
    <script src="js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.js"></script>
    <!-- slick slider -->
    <script type="text/javascript" src="js/slick.js"></script>
    <!-- Price picker slider -->
    <script type="text/javascript" src="js/nouislider.js"></script>
    <!-- mixit slider -->
    <script type="text/javascript" src="js/jquery.mixitup.js"></script>
    <!-- Add fancyBox -->
    <script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>
    <!-- Custom js -->
    <script src="js/custom.js"></script>

    <script src="_framework/blazor.webassembly.js"></script>
    <script>navigator.serviceWorker.register('service-worker.js');</script>
</body>

</html>

However, upon launching my Blazor project, it seems that the JavaScript is not loading. The CSS included in the mainlayout.razor file within the Shared folder is functioning properly, but that CSS was part of the template itself.

Could this be the appropriate location for the JavaScript files, or should they be placed elsewhere?

Answer â„–1

I encountered a similar issue to what you're facing. The J/S files need to be directed to the index.html in Blazor, but they don't load automatically. You have to use J/S interoperability, which can be complex, especially if you're unfamiliar with the template's functions.

When working on a project at home, I wanted to utilize Admin LTE. Fortunately, I came across a GitHub project where developers are adapting this template for Blazor.

https://github.com/sjefvanleeuwen/blazor-adminlte

Hopefully, the Blazor team will simplify this process in the future, as it currently poses challenges for front-end development.

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

Executing filepicker.io Javascript API calls may lead to unsafe errors in Javascript

I am currently using AngularJS and encountering an issue when trying to call filePicker.pickAndStore from my Upload controller. Every attempt to use a filepicker.io API function triggers an "Unsafe Javascript attempt" error: The frame requesting access ...

Disappearance of array data

I have been working on creating an array of objects with nested arrays, but I am facing an issue where data seems to go missing in the final step: const args_arr = []; const options_arr = []; let options = ''; let text = ""; for (let i = 0; ...

Seeking a way to keep the returned Ajax string consistent and prevent it from fading away after page transition

I have a form that appears when the user clicks on the "Edit" link, allowing them to input their profile information. Upon submission, the data is processed via Ajax and saved in an SQL database using a PHP script. After saving the new profile, I would lik ...

Exploring the power of Cucumber, Ruby, Capybara, and Selenium: Enhancing the 'visit' method to handle dynamic content delays

For weeks now, I've been dealing with an issue that seems to have no solution found online... like waiting for ajax, etc... Check out the versions of gems: capybara (2.10.1, 2.7.1) selenium-webdriver (3.0.1, 3.0.0) rspec (3.5.0) running ruby 2.2.5 ...

Is it possible to use WHILE loops twice in PHP?

Just starting out with PHP and hoping for some assistance. I have a MySQL database table with columns for "id", "img", "link", and "desc". My goal is to echo all of this data in the following format: <div id="featured"> <a target='_b ...

What are some techniques to ensure null checking is enforced for objects that are nested within multiple layers

Currently, I am leveraging redux sagas to fetch data asynchronously from various endpoints using a unified interface: export interface ResponseInfo { data?: any; status: number; headers?: any; subCode?: string; } To ensure that null check ...

Accessing HTML partials from separate domains using AngularJS

I am looking to load html partials from Amazon S3 by uploading them and using the public URLs like this: 'use strict'; /* App Module */ var phonecatApp = angular.module('phonecatApp', [ 'ngRoute', 'phonecatAnimatio ...

Setting an object as nullable in Javascript (NodeJS): A Step-by-Step Guide

I am encountering the following error message: TypeError: Cannot read property 'doors' of null. My objective is to make the value of doors nullable in order to avoid this error and instead receive a 404 response. However, I am uncertain about the ...

Display a preview image of the video without playing the actual video

Is there a way to display a thumbnail image from a video without loading the actual video content? I only need the thumbnail displayed, not the video itself. I am looking to showcase the thumbnail after uploading a video using file upload. The thumbnail s ...

Adjust images, documents, and videos to fit seamlessly within an iFrame

I am currently working on an MVC project with a View named Index.cshtml. Within this view, I have a dynamically created iFrame where the HTML content is generated in a string and then appended to a div using .html(). The content of the iFrame changes based ...

Attempting to conceal my default drop-down menu

I need to find a way to hide my drop down menu by default, as it currently shows up automatically. The drop down menu in question is under "My Account". This is the HTML code I'm working with: <li class="hoverli"> <a href="/customer/ac ...

Using CSS to justify the final line of content

I have created a CSS helper class that is meant to justify-align the last line of text, or inline block divs, along with the rest of them. Here is the CSS code I have implemented: .justify-all-lines { text-align: justify; /* IE-only properties th ...

Is there a way to upload a kml file to Google Maps using my website or by using JavaScript commands?

I have information on my website regarding gas stations, including the quality of gasoline and the GPS coordinates of each station. My concept involves incorporating Google Maps into my site, similar to how flightradar24.com displays pins indicating gas s ...

Encountered an error saying "Unable to locate property '0' of undefined" while trying to access an environment variable in MongoDB

I am attempting to access a variable that is defined in my JavaScript code. This variable holds data fetched from a MongoDB using a GET request. The entire database is stored under this variable and then read by the HTML for display. The output of the GET ...

Having Difficulty with Mathematical Operators in AngularJS

Here is the code snippet I am currently working with: $scope.calculateTotal = function() { $scope.totalAmounts = []; var total = 0; for (var i = 0; i < $scope.orderDetails.length; i++) { console.log($scope.orderDetails[i]['pric ...

How can I prevent 401 unauthorized errors from appearing in the console?

I am facing an issue with a Vue.js function that sends data to the back-end for user login. When the user doesn't exist, it returns a 401 unauthorized error. While I can handle this error, it keeps getting logged in the console. Is there a way to prev ...

I'm looking to provide the average rating of a restaurant along with the name of the owner

Currently, I am utilizing knex to craft queries for my express server. Within my database, I have two tables structured as follows: My objective is to establish a join between the two tables using the "owner_id" foreign key. Subsequently, I aim to retriev ...

How can one access a div tag within a script using Jquery?

I am faced with a challenge related to accessing the div tag "warningMessage" within my HTML code. Below is the snippet that contains this div tag under scripts: <script id="notePopup" type="text/x-kendo-template"> <p class="notePopupMessage" ...

What is the best way to boost a number using an input value?

I am looking to dynamically increase the number in the span tag based on the number of characters entered in the input field. Each character entered should equate to 5. While my current setup is somewhat functional, there are some minor issues. $(functi ...

Tips for adjusting the color of a row when hovering

Can I modify the row color on hover in material-table using props? Similar to this example. Appreciate your help. ...