0
139
VistasJavascript in Razor component
I am trying to load a javascript function on load in a razor component but I am getting an error.
@inject IJSRuntime JsRuntime
@if (listProducts != null)
{
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Home place</th>
<th>Expiration</th>
<th>Phone number</th>
<th>Tea</th>
<th>Local</th>
<th>App</th>
<th>Company /Lease</th>
<th>Road time</th>
<th>Notes</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach(var product in this.listProducts)
{
<ProductItemComponent
Product="product"
OnProductDeleted="OnProductDeleted"></ProductItemComponent>
}
</tbody>
</table>
}
@code {
protected override async Task OnInitializedAsync()
{
await LoadProducts();
await JsRuntime.InvokeVoidAsync("exampleJsFunctions.DisableCopy");
}
}
At the beginning I am injecting IJSRuntime like so @inject IJSRuntime JsRuntime and in the OnInitializedAsync() I am calling my function which is in _Layout.cshtml which looks something like this
<script>
window.exampleJsFunctions =
{
DisableCopy: function (data) {
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = clickNS4;
}
else if (document.all && !document.getElementById) {
document.onmousedown = clickIE4;
}
}}
</script>
and this is the error in console
Any ideas on what's wrong?
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Here is a demo about calling js in blazor:
wwwroot/js/test.js(put the js code into js file of wwwroot)：
window.exampleJsFunctions =
{
DisableCopy: function (data) {
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = clickNS4;
}
else if (document.all && !document.getElementById) {
document.onmousedown = clickIE4;
}
}}
Pages/_Host.cshtml(add reference of test.js in _Host.cshtml):
...
<html lang="en">
<head>
...
</head>
<body>
...
<script src="~/js/test.js"></script>
</body>
</html>
Don't call js in OnInitializedAsync().The component is being statically rendered.SO JavaScript interop calls cannot be issued at this time.So you can call it in OnAfterRender.
razor component:
@inject IJSRuntime JsRuntime
@code {
protected override void OnAfterRender(bool firstRender)
{
JsRuntime.InvokeVoidAsync("exampleJsFunctions.DisableCopy");
}
}
·
Juan Pablo Isaza
Denunciar
Responde la pregunta