I have a ASPNET CORE website that references a separate class library.
In that class library I have a javascript file as an embedded resource.
IOW, I have this in MyLibrary.csproj:
<Project Sdk="Microsoft.NET.Sdk">
[...]
<ItemGroup>
<EmbeddedResource Include="JavaScript/MyFile.js" />
</ItemGroup>
</Project>
In the website project my _Layout.cshtml contains this:
<body>
[...]
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
I would like to add a tag, either to the end of the element in _Layout.cshtml, or to the "Scripts" section within any of the .cshtml files that use _Layout.cshtml.
How do I do this?
OK, I have something mostly working.
First, some context. I have two projects, building two different assemblies. It can be difficult, when reading various "explanations" of how to make this work, to understand which assembly they were referring to, so I'm going to be pedantically explicit.
There are a number of steps:
Add the file to the library project.
Make it accessible as an embedded resource.
Map an endpoint in the web site that serves up the embedded resource file.
Add a <script> tag to the html that links to that endpoint.
MyLibrary is a class library project containing a number of classes, and a JavaScript file that I want to make available to any website that references those classes.
In it I have a directory "JavaScript", and in that the file "MyJsFile.cs" that I want to make available to the client.
I've installed the Microsoft.Extensions.FileProviders.Embedded NuGet package in MyLibrary, and I've set GenerateEmbeddedFilesManifest to true.
And I've added the file I want to be available in an EmbeddedResource ItemGroup.
So MyLibrary.csproj looks like:
<Project Sdk="Microsoft.NET.Sdk">
<PropertyGroup>
<TargetFramework>net5.0</TargetFramework>
<GenerateEmbeddedFilesManifest>true</GenerateEmbeddedFilesManifest>
</PropertyGroup>
<ItemGroup>
[...]
<PackageReference Include="Microsoft.Extensions.FileProviders.Embedded" Version="5.0.8" />
</ItemGroup>
<ItemGroup>
<EmbeddedResource Include="JavaScript/MyJsFile.js" />
</ItemGroup>
</Project>
At this point, I compiled MyLibrary, and checked to confirm that MyJsFile.js was listed as an embedded resource in MyLibrary.dll. On Windows, you can examine an assembly using ildasm.exe. If you're running on Linux, and don't want to bother with finding, downloading, and maybe having to build one of the various competing versions of ildasm that seem to be out there, you can just stick this into a project that's referencing MyLibrary, and step past it in the debugger:
var resourceNames = typeof(MyLibrary).Assembly.GetManifestResourceNames();
You should see the name of the file, in resourceNames. You can extract the whole file with:
using (var resourceStream = typeof(MyLibrary).Assembly.GetManifestResourceStream("MyLibrary.JavaScript.MyJsFile.js"))
{
var rdr = new StreamReader(resourceStream);
var contents = rdr.ReadToEnd();
}
MyWebsite is a ASP.NET Core Web App project that references MyLibrary, and it's this that I need to be able serve up the file.
First we need to reference the library project. MyWebsite.csproj:
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>net5.0</TargetFramework>
</PropertyGroup>
<ItemGroup>
[...]
</ItemGroup>
<ItemGroup>
<ProjectReference Include="../MyLibrary/MyLibrary.csproj" />
</ItemGroup>
</Project>
Next, we need to map an endpoint in Startup.cs:
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
[...]
app.Map("/mylibrary", builder =>
{
var provider = new ManifestEmbeddedFileProvider(
assembly: Assembly.GetAssembly(typeof(MyLibrary)), "JavaScript");
builder.UseStaticFiles(new StaticFileOptions
{
FileProvider = provider
});
});
}
What this is doing is setting up a routing rule such that any reference to a file beginning with /mylibrary is mapped to an embedded resource of the same name in the JavaScript directory of MyLibrary.dll
Which means we can reference it in a <script> tag:
#section Scripts {
<script src="~/mylibrary/MyJsFile.js"></script>
[...]
}
And this is working. The objects defined in MyJsFile.js are visible in the browser.
All that's left is to move the App.Map("/mylibrary", [...]) configuration into an extension method in the library, so that MyWebsite doesn't need to know the details of how to configure it.
To do that, I need to add a couple of NuGet packages to MyLibrary:
Microsoft.AspNetCore.Mvc.Core
Microsoft.AspNetCore.StaticFiles
And then I needed to create an extension method in MyLibrary:
public static class ApplicationBuilderExtensions
{
public static IApplicationBuilder MapMyLibrary(this IApplicationBuilder app, string localPath)
{
app.Map(localPath, builder =>
{
var provider = new ManifestEmbeddedFileProvider(
assembly: Assembly.GetExecutingAssembly(), "JavaScript");
builder.UseStaticFiles(new StaticFileOptions
{
FileProvider = provider
});
});
return app;
}
}
And then, finally, change Startup.cs, in MyWebsite, to call it:
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
[...]
app.MapMyLibrary("/mylibrary");
}
<configuration>
<appSettings>
<add key="var1" value="SomeValue"/>
</appSettings>
<configuration>
I want to read this var1 in angularJS controller
Like this...
function ReadConfigurationSettings()
{
var k = '<%=ConfigurationManager.AppSettings["var1"].ToString() %>'
alert(k);
}
but its not working..
You cannot get a value from web config directly. One option is to put the value into a meta tag in your index html for example like this:
<meta name="var1" content="#ConfigurationManager.AppSettings["var1"]" />
Then you can get that value from angular like this:
var var1 = angular.element(document).find('meta[name=var1]').prop("content");
From reusabilty point of view, I want to create a component for an interface. So I use it with different concrete objects.
For example, the interface is like this
interface ICalculation
{
double Calculate();
}
and the Test component is
<button #onclick="(() => SetResult())">Set</button>
#result
#code{
double result;
ICalculation Calculation;
void SetResult()
{
result = Calculation.Calculate();
}
}
so some where else in another component/page I have some thing like this
<Test inject CalculationA />
<Test inject CalculationB />
So I want to inject Different Calculations into different instances of this component. How can i get this?
I thought using dependency injection of net core, but that is for to inject one object for an interface.
Why important? It helps me to override requests to api, for example, admin and user have different requests but they see the same page structure.
In the Test component you would make it a normal parameter:
[Parameter]
public ICalculation Calculator { get; set; }
and then in 'some where else'
#inject CalculationA CalculationA
#inject CalculationB CalculationB
<Test Calculator="CalculationA" />
<Test Calculator="CalculationB" />
Or replace those '#inject` lines with normal instantiations (2x) because with multiple implementations you can't do DI on the interface anyway.
I am using asp.net MVC 4, I'd like to do something like this in my view
my link
I don't like it. Is there a way I can have the namespace implicit? Can I not pass in Viewbag and grab it somehow like global.request.current.viewbag?
If it helps I don't need TheFunctionIUseAlot to be static. I just need it to be easily callable in all my views and hopefully i'd like to not pass in viewbag. The reason I pass viewbag is because i need something in the controller which i stuck in viewbag as well. Maybe i can put it in the model but i don't want the same problem where i am passing model instead of viewbag
You can make the namespace implicit by adding #using NamespaceHere; at the top of your view, or by registering it as a namespace in the views web config. Something like this:
<system.web.webPages.razor>
<host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
<pages pageBaseType="System.Web.Mvc.WebViewPage">
<namespaces>
<add namespace="System.Web.Mvc" />
<add namespace="System.Web.Mvc.Ajax" />
<add namespace="System.Web.Mvc.Html" />
<add namespace="System.Web.Routing" />
<add namespace="NamespaceHere"/>
</namespaces>
</pages>
</system.web.webPages.razor>
You can get access to the viewbag in your function if you use a custom page base type for your views. You can find instructions on doing that here: http://haacked.com/archive/2011/02/21/changing-base-type-of-a-razor-view.aspx.
In your situation, to get access to the ViewBag you will want to define your FunctionThatIUseALot in a non-static class that takes a WebViewPage as a constructor parameter (either as dynamic or as a ViewDataDictionary). Then, in your WebViewPage's InitHelpers override, you can create your helper class, passing in this. That will give you access to all of the standard properties of the WebViewPage.
Something like this:
public class Utils {
private WebViewPage page;
public Utils(WebViewPage page) { this.page = page; }
public FunctionThatIUseALot(string someParameter) {
string someViewBagValue = page.ViewBag.SomeViewBagValue;
}
}
public abstract class CustomWebViewPage : WebViewPage {
public Utils Utils { get; set; } // Utils is your helper class
public override void InitHelpers() {
base.InitHelpers();
Utils = new Utils(this);
}
}
The above is not everything you need to do to make it work, you will need to read the article for the rest. But the end result should be that you can just call #Utils.FunctionThatIUseALot("some value") directly in your views.
Note: you will need to do this twice - once for the standard WebViewPage base class, and one for the WebViewPage<TModel> base class.
I have debug="true" in both my web.config(s), and I just don't want my bundles minified, but nothing I do seems to disable it. I've tried enableoptimisations=false, here is my code:
//Javascript
bundles.Add(new ScriptBundle("~/bundles/MainJS")
.Include("~/Scripts/regular/lib/mvc/jquery.validate.unobtrusive.js*")
.Include("~/Scripts/regular/lib/mvc/jquery.validate*")
.Include("~/Scripts/regular/lib/bootstrap.js")
.IncludeDirectory("~/Scripts/regular/modules", "*.js", true)
.IncludeDirectory("~/Scripts/regular/pages", "*.js", true)
.IncludeDirectory("~/Scripts/regular/misc", "*.js", true));
//CSS
bundles.Add(new StyleBundle("~/bundles/MainCSS")
.Include("~/Content/css/regular/lib/bootstrap.css*")
.IncludeDirectory("~/Content/css/regular/modules", "*.css", true)
.IncludeDirectory("~/Content/css/regular/pages", "*.css", true))
Conditional compilation directives are your friend:
#if DEBUG
var jsBundle = new Bundle("~/Scripts/js");
#else
var jsBundle = new ScriptBundle("~/Scripts/js");
#endif
If you have debug="true" in web.config and are using Scripts/Styles.Render to reference the bundles in your pages, that should turn off both bundling and minification. BundleTable.EnableOptimizations = false will always turn off both bundling and minification as well (irrespective of the debug true/false flag).
Are you perhaps not using the Scripts/Styles.Render helpers? If you are directly rendering references to the bundle via BundleTable.Bundles.ResolveBundleUrl() you will always get the minified/bundled content.
To disable bundling and minification just put this your .aspx file
(this will disable optimization even if debug=true in web.config)
vb.net:
System.Web.Optimization.BundleTable.EnableOptimizations = false
c#.net
System.Web.Optimization.BundleTable.EnableOptimizations = false;
If you put EnableOptimizations = true this will bundle and minify even if debug=true in web.config
You can turn off minification in your bundles simply by Clearing your transforms.
var scriptBundle = new ScriptBundle("~/bundles/scriptBundle");
...
scriptBundle.Transforms.Clear();
I personally found this useful when wanting to bundle all my scripts in a single file but needed readability during debugging phases.
I tried a lot of these suggestions but noting seemed to work. I've wasted quite a few hours only to found out that this was my mistake:
#Scripts.Render("/bundles/foundation")
It always have me minified and bundled javascript, no matter what I tried. Instead, I should have used this:
#Scripts.Render("~/bundles/foundation")
The extra '~' did it. I've even removed it again in only one instance to see if that was really it. It was... hopefully I can save at least one person the hours I wasted on this.
Combine several answers, this works for me in ASP.NET MVC 4.
bundles.Add(new ScriptBundle("~/Scripts/Common/js")
.Include("~/Scripts/jquery-1.8.3.js")
.Include("~/Scripts/zizhujy.com.js")
.Include("~/Scripts/Globalize.js")
.Include("~/Scripts/common.js")
.Include("~/Scripts/requireLite/requireLite.js"));
bundles.Add(new StyleBundle("~/Content/appLayoutStyles")
.Include("~/Content/AppLayout.css"));
bundles.Add(new StyleBundle("~/Content/css/App/FunGrapherStyles")
.Include("~/Content/css/Apps/FunGrapher.css")
.Include("~/Content/css/tables.css"));
#if DEBUG
foreach (var bundle in BundleTable.Bundles)
{
bundle.Transforms.Clear();
}
#endif
There is also some simple way to control minification (and other features) manually. It's new CssMinify() transformer using, like this:
// this is in case when BundleTable.EnableOptimizations = false;
var myBundle = new StyleBundle("~/Content/themes/base/css")
.Include("~/Content/themes/base/jquery.ui.core.css" /* , ... and so on */);
myBundle.Transforms.Add(new CssMinify());
bundles.Add(myBundle);
// or you can remove that transformer in opposite situation
myBundle.Transforms.Clear();
That's convenient when you want to have some bundles special part only to be minified. Let's say, you are using some standard (jQuery) styles, which are getting under your feet (taking lots of excessive browser requests to them), but you want to keep unminified your own stylesheet. (The same - with javascript).
I combined a few answers given by others in this question to come up with another alternative solution.
Goal: To always bundle the files, to disable the JS and CSS minification in the event that <compilation debug="true" ... /> and to always apply a custom transformation to the CSS bundle.
My solution:
1) In web.config:
<compilation debug="true" ... />
2) In the Global.asax Application_Start() method:
protected void Application_Start() {
...
BundleTable.EnableOptimizations = true; // Force bundling to occur
// If the compilation node in web.config indicates debugging mode is enabled
// then clear all transforms. I.e. disable Js and CSS minification.
if (HttpContext.Current.IsDebuggingEnabled) {
BundleTable.Bundles.ToList().ForEach(b => b.Transforms.Clear());
}
// Add a custom CSS bundle transformer. In my case the transformer replaces a
// token in the CSS file with an AppConfig value representing the website URL
// in the current environment. E.g. www.mydevwebsite in Dev and
// www.myprodwebsite.com in Production.
BundleTable.Bundles.ToList()
.FindAll(x => x.GetType() == typeof(StyleBundle))
.ForEach(b => b.Transforms.Add(new MyStyleBundleTransformer()));
...
}
If you set the following property to false then it will disable both bundling and minification.
In Global.asax.cs file, add the line as mentioned below
protected void Application_Start()
{
System.Web.Optimization.BundleTable.EnableOptimizations = false;
}
Here's how to disable minification on a per-bundle basis:
bundles.Add(new StyleBundleRaw("~/Content/foobarcss").Include("/some/path/foobar.css"));
bundles.Add(new ScriptBundleRaw("~/Bundles/foobarjs").Include("/some/path/foobar.js"));
Sidenote: The paths used for your bundles must not coincide with any actual path in your published builds otherwise nothing will work. Also make sure to avoid using .js, .css and/or '.' and '_' anywhere in the name of the bundle. Keep the name as simple and as straightforward as possible, like in the example above.
The helper classes are shown below. Notice that in order to make these classes future-proof we surgically remove the js/css minifying instances instead of using .clear() and we also insert a mime-type-setter transformation without which production builds are bound to run into trouble especially when it comes to properly handing over css-bundles (firefox and chrome reject css bundles with mime-type set to "text/html" which is the default):
internal sealed class StyleBundleRaw : StyleBundle
{
private static readonly BundleMimeType CssContentMimeType = new BundleMimeType("text/css");
public StyleBundleRaw(string virtualPath) : this(virtualPath, cdnPath: null)
{
}
public StyleBundleRaw(string virtualPath, string cdnPath) : base(virtualPath, cdnPath)
{
Transforms.Add(CssContentMimeType); //0 vital
Transforms.Remove(Transforms.FirstOrDefault(x => x is CssMinify)); //0
}
//0 the guys at redmond in their infinite wisdom plugged the mimetype "text/css" right into cssminify upon unwiring the minifier we
// need to somehow reenable the cssbundle to specify its mimetype otherwise it will advertise itself as html and wont load
}
internal sealed class ScriptBundleRaw : ScriptBundle
{
private static readonly BundleMimeType JsContentMimeType = new BundleMimeType("text/javascript");
public ScriptBundleRaw(string virtualPath) : this(virtualPath, cdnPath: null)
{
}
public ScriptBundleRaw(string virtualPath, string cdnPath) : base(virtualPath, cdnPath)
{
Transforms.Add(JsContentMimeType); //0 vital
Transforms.Remove(Transforms.FirstOrDefault(x => x is JsMinify)); //0
}
//0 the guys at redmond in their infinite wisdom plugged the mimetype "text/javascript" right into jsminify upon unwiring the minifier we need
// to somehow reenable the jsbundle to specify its mimetype otherwise it will advertise itself as html causing it to be become unloadable by the browsers in published production builds
}
internal sealed class BundleMimeType : IBundleTransform
{
private readonly string _mimeType;
public BundleMimeType(string mimeType) { _mimeType = mimeType; }
public void Process(BundleContext context, BundleResponse response)
{
if (context == null)
throw new ArgumentNullException(nameof(context));
if (response == null)
throw new ArgumentNullException(nameof(response));
response.ContentType = _mimeType;
}
}
To make this whole thing work you need to install (via nuget):
WebGrease 1.6.0+
Microsoft.AspNet.Web.Optimization 1.1.3+
And your web.config should be enriched like so:
<runtime>
[...]
<dependentAssembly>
<assemblyIdentity name="System.Web.Optimization" publicKeyToken="31bf3856ad364e35" />
<bindingRedirect oldVersion="1.0.0.0-x.y.z.t" newVersion="x.y.z.t" />
</dependentAssembly>
<dependentAssembly>
<assemblyIdentity name="WebGrease" publicKeyToken="31bf3856ad364e35" culture="neutral" />
<bindingRedirect oldVersion="0.0.0.0-x.y.z.t" newVersion="x.y.z.t" />
</dependentAssembly>
[...]
</runtime>
<!-- setting mimetypes like we do right below is absolutely vital for published builds because for some reason the -->
<!-- iis servers in production environments somehow dont know how to handle otf eot and other font related files -->
<system.webServer>
[...]
<staticContent>
<!-- in case iis already has these mime types -->
<remove fileExtension=".otf" />
<remove fileExtension=".eot" />
<remove fileExtension=".ttf" />
<remove fileExtension=".woff" />
<remove fileExtension=".woff2" />
<mimeMap fileExtension=".otf" mimeType="font/otf" />
<mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
<mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
<mimeMap fileExtension=".woff" mimeType="application/font-woff" />
<mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
</staticContent>
<!-- also vital otherwise published builds wont work https://stackoverflow.com/a/13597128/863651 -->
<modules runAllManagedModulesForAllRequests="true">
<remove name="BundleModule" />
<add name="BundleModule" type="System.Web.Optimization.BundleModule" />
</modules>
[...]
</system.webServer>
Note that you might have to take extra steps to make your css-bundles work in terms of fonts etc. But that's a different story.
Search for EnableOptimizations keyword in your project
So if you find
BundleTable.EnableOptimizations = true;
turn it false.
This does disable minification,
And it also disables bundling entirely
Just to supplement the answers already given, if you also want to NOT minify/obfuscate/concatenate SOME files while still allowing full bundling and minification for other files the best option is to go with a custom renderer which will read the contents of a particular bundle(s) and render the files in the page rather than render the bundle's virtual path. I personally required this because IE 9 was $*%#ing the bed when my CSS files were being bundled even with minification turned off.
Thanks very much to this article, which gave me the starting point for the code which I used to create a CSS Renderer which would render the files for the CSS but still allow the system to render my javascript files bundled/minified/obfuscated.
Created the static helper class:
using System;
using System.Text;
using System.Web;
using System.Web.Mvc;
using System.Web.Optimization;
namespace Helpers
{
public static class OptionalCssBundler
{
const string CssTemplate = "<link href=\"{0}\" rel=\"stylesheet\" type=\"text/css\" />";
public static MvcHtmlString ResolveBundleUrl(string bundleUrl, bool bundle)
{
return bundle ? BundledFiles(BundleTable.Bundles.ResolveBundleUrl(bundleUrl)) : UnbundledFiles(bundleUrl);
}
private static MvcHtmlString BundledFiles(string bundleVirtualPath)
{
return new MvcHtmlString(string.Format(CssTemplate, bundleVirtualPath));
}
private static MvcHtmlString UnbundledFiles(string bundleUrl)
{
var bundle = BundleTable.Bundles.GetBundleFor(bundleUrl);
StringBuilder sb = new StringBuilder();
var urlHelper = new UrlHelper(HttpContext.Current.Request.RequestContext);
foreach (BundleFile file in bundle.EnumerateFiles(new BundleContext(new HttpContextWrapper(HttpContext.Current), BundleTable.Bundles, bundleUrl)))
{
sb.AppendFormat(CssTemplate + Environment.NewLine, urlHelper.Content(file.VirtualFile.VirtualPath));
}
return new MvcHtmlString(sb.ToString());
}
public static MvcHtmlString Render(string bundleUrl, bool bundle)
{
return ResolveBundleUrl(bundleUrl, bundle);
}
}
}
Then in the razor layout file:
#OptionalCssBundler.Render("~/Content/css", false)
instead of the standard:
#Styles.Render("~/Content/css")
I am sure creating an optional renderer for javascript files would need little to update to this helper as well.
If you're using LESS/SASS CSS transformation there's an option useNativeMinification which can be set to false to disable minification (in web.config). For my purposes I just change it here when I need to, but you could use web.config transformations to always enable it on release build or perhaps find a way modify it in code.
<less useNativeMinification="false" ieCompat="true" strictMath="false"
strictUnits="false" dumpLineNumbers="None">
Tip: The whole point of this is to view your CSS, which you can do in the browser inspect tools or by just opening the file. When bundling is enabled that filename changes on every compile so I put the following at the top of my page so I can view my compiled CSS eaily in a new browser window every time it changes.
#if (Debugger.IsAttached)
{
View CSS
}
this will be a dynamic URL something like https://example.com/Content/css/bundlename?v=UGd0FjvFJz3ETxlNN9NVqNOeYMRrOkQAkYtB04KisCQ1
Update: I created a web.config transformation to set it to true for me during deployment / release build
<bundleTransformer xmlns="http://tempuri.org/BundleTransformer.Configuration.xsd">
<less xdt:Transform="Replace" useNativeMinification="true" ieCompat="true" strictMath="false" strictUnits="false" dumpLineNumbers="None">
<jsEngine name="MsieJsEngine" />
</less>
</bundleTransformer>
This may become useful to someone in the future as the new framework, when setup through VS, gets a default web.config, web.Debug.config and web.Release.config. In the web.release.config you will find this line:
<compilation xdt:Transform="RemoveAttributes(debug)" />
this was seeming to override any inline changes I made. I commented this line out and we were gravy (in terms of seeing non-minified code in a "release" build)