Aplicación Blazor Server carga y elimina scripts JS

Estoy desarrollando una aplicación Blazor que usó Chart. Biblioteca Js. Cuando el proyecto se inicia el Carga de Carga y desaprueba inmediatamente.

Pero cuando puse Render-mood de mi aplicación a estática, el Chart. Archivo JS cargado estancias sin desaparecer.

de mi olor, teniendo framework/blazor.server.js elimina otra JS pura.

Cuando uso Rendrer-mood como estáticam la JSInterop Tiempo de ejecución para llamar la JS pura en blazor no funciona. ¿Cómo puedo resolver esto?

Pregunta hecha hace 3 años, 4 meses, 29 días - Por algorithmadept

2 Respuestas:

  • Para resolver este problema de carga y eliminación de scripts JS en una aplicación Blazor Server, puedes seguir estos pasos:

    • Crea un archivo de configuración de inicialización para tu aplicación Blazor. Puedes hacerlo agregando un nuevo archivo JavaScript en la carpeta "wwwroot" de tu proyecto Blazor y llamándolo "blazorInit.js".
    • En el archivo "blazorInit.js", crea una función que se encargue de cargar tus scripts JS necesarios. Por ejemplo:
    javascript
function loadChartLibrary() {
    var script = document.createElement('script');
    script.src = 'ruta_al_archivo/scriptChart.js';
    script.async = false;
    document.head.appendChild(script);
}
    • Llama a esta función desde tu componente Blazor que necesite utilizar la biblioteca Chart JS. Para hacerlo, puedes utilizar el método `JSInterop` de Blazor. Por ejemplo:
    csharp
await JSRuntime.InvokeVoidAsync("loadChartLibrary");
    • Para evitar que se eliminen los scripts JS cuando cambias el modo de renderización de tu aplicación Blazor a estático, puedes agregar una condición en la función `loadChartLibrary` para cargar los scripts solo una vez. Por ejemplo, puedes verificar si el script ya está cargado antes de agregarlo al documento.

    Con estos pasos, deberías ser capaz de cargar y mantener activos los scripts JS necesarios para tu aplicación Blazor Server. ¡Espero que esta solución te sea útil!

    Respondida el Dec 19, 2020 a las 11:14 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Problema:

    En una aplicación Blazor Server que utiliza Chart.js, el archivo JS se carga y se elimina inmediatamente cuando el modo de representación está establecido en "Server", pero permanece cargado en modo "Static". Cuando el modo de representación está establecido en "Static", JSInterop no funciona.

    Solución:

    Para resolver este problema, debes utilizar un enfoque diferente para cargar y administrar el archivo Chart.js:

    • Crea un componente personalizado de Blazor: Crea un componente de Blazor que sea responsable de cargar y controlar el archivo Chart.js.
    • Carga el archivo JS en el método `OnAfterRenderAsync`: En el método `OnAfterRenderAsync` del componente, utiliza JSInterop para cargar el archivo Chart.js.
    • Registra el componente en el archivo `_Imports.razor`: Registra el componente personalizado en el archivo `_Imports.razor` para que pueda usarse en toda la aplicación.
    • Usa el componente en tus páginas de Razor: En tus páginas de Razor, agrega el componente personalizado para cargar Chart.js.

    Ejemplo de código:

    Componente Personizado:

    
@using Microsoft.JSInterop;

namespace YourNamespace
{
    public class ChartJsComponent : ComponentBase
    {
        [Inject]
        public IJSRuntime JSRuntime { get; set; }

        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            if (firstRender)
            {
                await JSRuntime.InvokeVoidAsync("eval", "var chart = new Chart(ctx, config);");
            }
        }
    }
}

    Uso en Páginas de Razor:

    
@page "/"

    Nota:

    Asegúrate de que el archivo Chart.js esté disponible en la carpeta wwwroot de tu proyecto. También debes establecer el modo de representación en "Server" en tu archivo appsettings.json.

    Respondida el Dec 19, 2020 a las 11:18 - por Gemini

    Votos positivos: 0 | Votos negativos: 0