asp.net mvc - net - ¿Cuál es el reemplazo para @ Scripts.Render en MVC 6?

razor c#

Question

Estoy tratando de ejecutar algunos d3js en mi MVC 6 y estaba mirando este ejemplo https://github.com/DustinEwers/D3-DotNetMVC-Demos/blob/master/D3Demos/Views/TagDemos/BasicBarChart.cshtml y usa

@Scripts.Render("~/bundles/d3")
@section Scripts{

Pero si hago eso consigo

El nombre ''Scripts'' no existe en el contexto actual

Entonces, ¿hay una nueva forma de hacerlo en MVC 6?

Answer 1

Ahora es un poco más complicado, pero la documentation explica bastante bien:

La plantilla web de inicio de ASP.NET MVC 5 utilizó el soporte integrado de ASP.NET para la agrupación. En ASP.NET MVC 6, esta funcionalidad se realiza mejor usando los pasos de compilación del cliente ...

Así que para agrupar los scripts puedes usar una herramienta como gulp-concat . Y para incluir un script, solo agréguelo como lo haría si fuera un contenido estático:

<script src="~/lib/bundle.js"></script>

Para un ejemplo más completo de incluir contenido, la respuesta de @Shyju es excelente.

Answer 2

En ASP.NET 5, no hay tal método Scripts.Render . Para representar scripts, puede utilizar el ayudante de etiquetas de entorno.

No es necesario que utilice el ayudante de etiquetas de entorno. Puede poner directamente sus etiquetas de script en el archivo de diseño. Pero los ayudantes del entorno nos permiten generar condicionalmente scripts basados ​​en el entorno. ( Versión Minified-Bundled vs All Un Minified )

Aquí está la sintaxis, puede incluir esto en su archivo de diseño.

<environment names="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/js/d3.js"></script>
</environment>
<environment names="Staging,Production">
<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery">
</script>
<script src="~/js/d3.min.js" asp-file-version="true"></script>
</environment>

Suponiendo que tiene los archivos de script d3.js and d3.min.js existen en el directorio ~/js .

También debe asegurarse de haber invocado el método UseStaticFiles() dentro del método Configure() (dentro de Startup.cs )

public void Configure(IApplicationBuilder app, IHostingEnvironment env,
ILoggerFactory loggerFactory)
{
//Other configuration goes here
app.UseStaticFiles(); // This enables static file serving from the app.
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
});
}

UseStaticFiles() método de extensión UseStaticFiles() permite el servicio de archivos estáticos, incluidos archivos js, archivos css, etc.

Cuando ejecute la aplicación en el modo de desarrollo, representará las etiquetas de script dentro del entorno "Development" y cuando la ejecute en Staging o Production, representará las etiquetas de script en el entorno "Staging,Production" .

Puede cambiar el valor del entorno haciendo clic derecho en el proyecto y seleccionando properties->Debug y especifique el valor de la variable de entorno Hosting:Environment

Puede ver que he incluido la versión minified de los archivos js en el entorno de Ensayos / Producción. Esto no es necesario pero el enfoque preferido, ya que ahorrará algo de ancho de banda. ( También puede poner la versión no minimizada en lugar de minified si realmente quiere hacerlo ). Si tiene un solo archivo empaquetado, puede usarlo también aquí en lugar de archivos individuales.

Si ya no tiene una versión minificada, puede generarla ejecutando gulp task para la minificación (esto se incluye en el archivo gulp.js predeterminado que se encuentra en la nueva plantilla de la aplicación web). Solo necesita abrir el ejecutor de tareas y ejecutar la tarea de minificación.

Si no desea ejecutar esto manualmente cada vez, puede seleccionar Bindings -> Before build para que así se ejecute automáticamente esa tarea purticular cada vez que genere su proyecto.

Answer 3

Si no desea ejecutar ese script, simplemente cree una etiqueta de script html:

<script src="js/d3.js?version=1"></script>

Pero realmente recomiendo que agrupe y minimice sus archivos de activos. Puede agrupar, minimizar, mover (y mucho más) sus archivos javascript / css con la ayuda de corredores de tareas como Gulp y Grunt.

La información sobre cómo usar gulp se puede encontrar aquí: http://rudiv.se/Article/asp-net-5-bundling-with-bower-and-gulp

Y luego, con la ayuda de Shyju, cargue los archivos correctos cuando ejecute su entorno de desarrollo o de prueba.