Me temo que será una pregunta estúpida. Pero no logro usar mi JS-Package (por ejemplo, jQuery), que instalé con Visual Studio Nuget-Package-Manage en mi .net 5 Blazor Server-App.
Lo que hice: instalar el paquete. Aquí instalé jquery.datatable que incluye jQuery mismo:
Pero ahora, no sé cómo incluirlo, por ejemplo, en mi archivo "_Host.cshmtl":
<script type="text/javascript" charset="utf-8" src="???WHERE IS IT????"></script>¿Dónde está mi archivo *.js? Por ejemplo: consulta.dataTables.js ?? Lo encontré en "C:\Users\xxxxxx.nuget\packages\jquery.datatables\1.10.15" y "C:\Users\xxxxxx.nuget\packages\jquery\1.7.0"
¿Realmente tengo que copiarlo en mi wwwroot-Folder manualmente? Si es así, ¿por qué debería usar el administrador de paquetes?
¡¡Gracias por tu ayuda!!
Las aplicaciones web tradicionales que usan JavaScript normalmente cargan el archivo desde una carpeta local o desde un CDN web (por ejemplo, CDNJS.com, etc.). Luego se carga desde la página (a menudo se hace referencia desde un archivo de diseño).
Al principio solía ocurrir que las bibliotecas JS se podían cargar a través de paquetes NUGET, pero ahora se desaconseja este enfoque. Tenía que corregir la creación del script en una ubicación determinada, por ejemplo, /Scripts y no había flexibilidad. Casi todas las bibliotecas del lado del cliente ahora están en NPM como paquetes o en CDN como cdnjs.com.
El enfoque actual para que las aplicaciones web .NET carguen activos del lado del cliente es usar LibMan o NPM y tener algún tipo de arreglo de paquete web para compilar/empaquetar/copiar. Nunca cargaría el JS desde una carpeta /packages de la forma que sugirió.
Blazor (desde .NET 5.0) puede cargar módulos JS integrados (desde su código) o directamente desde una URL.
Si desea empaquetar algo de JS con su aplicación, debe consultar las bibliotecas de Razor Component . Esto permite que los activos estáticos, como los archivos JS, se incrusten en el código, que Blazor pone a disposición a través de la ruta _content , por ejemplo, _content/LibraryName/myfile.js .
Debido a que Blazor es un SPA, no incluye JavaScript mediante una etiqueta <script> en su HTML, debe cargarlo como un módulo y hacer referencia allí.
Esta documentación lo explica: https://docs.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-5.0#blazor-javascript-isolation-and-object-references
Entonces, ¿debería incluir jquery.min.js y jquery.datatables.min.js en su biblioteca? Sugeriría que un mejor enfoque es cargar desde un CDN: su paquete es más pequeño y existe la posibilidad de que la URL ya esté almacenada en caché y cargada, por ejemplo
var module = await js.InvokeAsync<IJSObjectReference>( "import", "https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js");Esto carga el módulo bajo demanda desde la URL directamente. También necesitaría cargar jquery antes de esto.
Finalmente, haría esta observación: ¿estás seguro de que quieres seguir este camino?
Hay varias bibliotecas Blazor nativas en NUGET para representar y manejar tablas. Le resultará mucho más fácil seguir este camino en lugar de intentar parchear bibliotecas basadas en jquery en una aplicación Blazor.
Tuve un problema similar. No con las mismas bibliotecas, pero quería hacer algo que aún no estaba disponible en una biblioteca de Blazor. Necesitaba un reproductor de video que pudiera manejar cierto formato que el elemento de video HTML 5 predeterminado no puede manejar. Hay un reproductor de código abierto, videoJS, que hizo el trabajo, pero es una biblioteca de JavaScript. Está disponible en npm y hay cdn, sin embargo, los complementos (por lo que pude ver) no estaban en CDN, así que tuve que seguir la ruta npm.
Cuando instala un paquete npm, lo coloca en una carpeta oculta de node_modules. Desafortunadamente, incluso si apunta a esa ruta o incluso copia el archivo con sus otros archivos js, no funcionará. Los paquetes Npm están diseñados para ser ejecutados por nodejs, en lugar de directamente en el navegador. Para que se ejecuten en una aplicación Blazor (en el navegador), debe realizar un paso intermedio para transpilarlo en un formato compatible con el navegador.
Lo que realmente quería era un componente reutilizable, que envolviera el javascript. Me tomó un tiempo llegar allí, pero finalmente lo descubrí. He escrito una serie de artículos en mi blog detallando esto. El último transfiere todo a una biblioteca Razor Class que se puede consumir sin conocimiento del js subyacente. El cuarto artículo trata sobre la importación de bibliotecas npm y su uso dentro de una aplicación de ensamblaje web. Pondré el enlace a continuación, pero esencialmente el proceso es:
Consulte la publicación del blog aquí para obtener detalles completos (es la parte 4 de una serie de 5 partes; la parte cinco lo coloca todo en una biblioteca de clases de afeitar para que pueda agregarlo a un proyecto sin ver el javascript)
Sé que es tarde, pero esta SO pregunta era una que seguía encontrando cuando buscaba cómo hacer lo que quería, así que pensé en poner mi solución aquí en caso de que ayude a alguien más a buscar lo que hice.