Blazor Setup JS
I am having issue to understand how to set up and use the Theme with Blazor. Everything seems installed, and I know that the Blazor Theme does not include every single side the HTML includes. I also know that if I want certain stuff from the HTML Template, I can simply copy and paste the HTML into my Blazor Project.
Let's say for example I want to add a Modal (Offer-a-Deal) into a component on Blazor. I copy and paste everything from the HTML file and the HTML looks good. Sadly, at this moment, the full functionality seems missing. That's when the JavaScript comes into place, I assume.
Out of my testing, it seems that the only JavaScript file that gets loaded is the assets/js/custom/scripts.bundle.js. Am I correct about that? Since the rest of it is missing also, the JavaScript for the Offer-a-Deal Modal is missing. I found those files are under assets/js/custom/utilities/modals/offer-a-deal/main.js (and all the other ones)
What is the correct way now to:
1. Load them so they are accessible in my project?
2. Call them inside a component? (I assume with JS. Invoke())
The same happens to other libraries like Select2. What is the correct way to load the so everything works the same as in the HTML Theme?
I search every single forum post in here, but for some reason I am not able to understand the right way to use everything in my Blazor Project. I would really, really appreciate your help.
Replies (6)
I was trying different Things to achieve my Goal. One of them was putting all the files into _Master and load it inside a script tag, so the functions are available.
@code {
protected override void OnAfterRender(bool firstRender)
{
JS.InvokeVoidAsync("KTCreateAccount.init");
JS.InvokeVoidAsync("KTCreateApp.init");
}
}By simply load it with a script tag and invoke it in the file where I need it, it's not working. The Functions are neither accessible on the console. Then I tried to expose the function like:
window.KTCreateApp = KTCreateApp ( to make it globaly accessible)Parts of the Modal seem to work then but i get a lot of errors like the following:
create-app.js:25 Uncaught (in promise) TypeError: stepperObj.getCurrentStepIndex is not a function
at create-app.js:25:1
at _triggerEvent (event-handler.js:39:1)
at Object.trigger (event-handler.js:98:1)
at _goTo (stepper.js:125:1)
at _goNext (stepper.js:131:1)
at KTStepper.the.goNext (stepper.js:286:1)
at create-app.js:51:1I am sure I am doing something wrong, but can't figure out what it is. Would really appreciate a helping hand.
Hi,
Sorry for the late reply.
By default, we are loading two mandatory JS files defined in _keenthemes/config/themeconfig.json property Theme.Assets.Js, other js files are loaded within razor files, refer to Shared/Layout/_LayoutScripts.razor.
In your example, you are initializing JS component correctly.
Load js file
<script suppress-error="BL9992" src="@KTTheme.getAssetPath("js/custom/utilities/modals/create-app.js")"></script>Then initialize it inside OnAfterRender function
protected override void OnAfterRender(bool firstRender){
JS.InvokeVoidAsync("KTCreateApp.init");
}After testing the initialization code we didn't manage to reproduce your error, did you make any changes in create-app.js?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
I found out by removing the IIFE like from:
/******/ (() => { // webpackBootstrap
/******/ "use strict";
var __webpack_exports__ = {};
// ... your code ...
}());to:
/******/ // webpackBootstrap
"use strict";
var __webpack_exports__ = {};
// ... your code ...And Invoke the Function on the Blazor Component it works. Is that the right way to go?
Hi,
Thanks for the reply. Sorry, I forgot to mention that CreatApp.Js was working. It's more about Offer-a-Deal-Modal that's not working. Even if I did everything you mentioned below.
No I did not change anything about the JS file itself neither the HTML. I also made sure everything you mentioned below is getting loaded. And it does.
Is there anything else I need to do to expose stuff?
I got it to work! Finaly I missed some steps. I only ivoked
JS.InvokeVoidAsync("KTModalOfferADeal.init");Instead of
JS.InvokeVoidAsync("KTModalOfferADeal.init");
JS.InvokeVoidAsync("KTModalOfferADealDetails.init");
JS.InvokeVoidAsync("KTModalOfferADealComplete.init");
JS.InvokeVoidAsync("KTModalOfferADealFinance.init");
JS.InvokeVoidAsync("KTModalOfferADealType.init");Hi,
Glad to hear that.
The KTModalOfferADeal instance will handle the initialization of the stepper for the "Offer a Deal" modal. If you're using your own form validation handler and step element initialization handlers, you don't need to initialize other instances.
Please let us know if you have any further questions on this topic or anything else.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
