I have few JS files which i am trying to Bundle using MVC4, the code is as follows:-
public static void RegisterBundles(BundleCollection bundles)
{
//Global App Items go here.
bundles.Add(new ScriptBundle("~/Scripts/modernizr")
.Include("~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/lib")
.Include(
"~/Scripts/jquery.js",
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*",
"~/Scripts/jquery-ui*",
"~/Scripts/jquery.tablesorter.js"));
bundles.Add(new StyleBundle("~/content/bootstrap")
.Include("~/Content/bootstrap.css"));
var lessBundle = new Bundle("~/content/myApp").Include(
"~/Content/jqueryMultiSelect.less",
"~/Content/scrollbars.css");
lessBundle.Transforms.Add(new LessTransform());
lessBundle.Transforms.Add(new CssMinify());
bundles.Add(lessBundle);
BundleTable.EnableOptimizations = true;
}
Now, when i see my console in Firefox, I can see my Response as Expected. But when same i do it in Chrome, the bundled file is broken.
Broken may be a non-technical term, What i mean by broken is :-
The file is incomplete....
Please let me know, if i need to provide more detail.
Its actually the display issue.
In chrome the js file length is limited, so does not display completely.
Try to open that file in a new tab, you will see the entire content.
In Firefox, it prompts the user to open in a new tab to see the complete content.
Related
I'm using "embed" to show pdf file in Razor component of Blazor Server
<embed src="#showedPdfContent" visible="false" width="1100" height="730" type="application/pdf"/>
public void SetPdfContent(byte[] content)
{
showedPdfContent = $"data:application/pdf;base64,{Convert.ToBase64String(content)}";
StateHasChanged();
}
when I run with Firefox, it works correctly to show pdf file. But, when I run with Chrome or Edge, it shows empty.
embed in chrome
I tried to use "object" or "iframe". But they also didn't work as well. Any ideas to this issue?
How to manage .min files generated by grunt-uglify and "debug" version?
If I set
BundleTable.EnableOptimizations = true;
or at web.config
<compilation debug="false" />
apparently the bundle concat all files by itself and don't use the min files generated by grunt.
All debug version has their own minify version at the same folder ex:
Folder A
testA.js
testA.min.js
...
Folder B
testB.js
testB.min.js
...
PS: I'm not referencing minified files in bundleConfig.cs.
What is the best solution to handle it? I need to use ONLY minified files generated by GRUNT at the release moment, and still using debug version when in development.
BundleTable.EnableOptimizations = true;
This code works only if you're using BundleConfig.cs
I think that the best way for you is to create a custom UrlHelper that can build JS scripts url according to if you're in debug mode or not (this is pseudo-code) :
public static class UrlHelper
{
public static string JsScript(this UrlHelper urlHelper, string baseFileName) {
return HttpContext.Current.IsDebuggingEnabled
? urlHelper.Content(baseFileName + '.js')
: urlHelper.Content(baseFileName + '.min.js');
}
}
And for example, if you want to use it in your Razor view :
<script src="#Url.JsScript("~/js/folderA/testA")"></script>
I am using MVC4 and have added Bootstrap and Font Awesome via nuget.
I can see how Bootstrap gets bundled in via BootstrapBundleConfig.cs (which was added by the nuget package) below:
public static void RegisterBundles()
{
BundleTable.Bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap*"));
BundleTable.Bundles.Add(new StyleBundle("~/Content/bootstrap").Include("~/Content/bootstrap.css", "~/Content/bootstrap-responsive.css"));
}
I have the following questions:
For font-awesome, I don't see similar bundling code to the above for registering the required css files, is there any, or do i just link to the stylesheet in the content directory <link href="~/Content/font-awesome.min.css" rel="stylesheet" /> - what is the proper way?
For bootstrap, if I do not want a responsive layout, would I just comment out the bootstrap-responsive.css from Include("~/Content/bootstrap.css", "~/Content/bootstrap-responsive.css"))?
You can read more about how bundling works on the asp.net site.
It seems that the BootStrap nuget package has made some bundles for you. You could modify this to include Font Awesome in the existing bundle, or make it it's own bundle
e.g.
public static void RegisterBundles()
{
BundleTable.Bundles
.Add(new ScriptBundle("~/bundles/bootstrap")
.Include("~/Scripts/bootstrap*"));
// Either add it to the existing bundle
BundleTable.Bundles
.Add(new StyleBundle("~/Content/bootstrap")
.Include("~/Content/bootstrap.css",
"~/Content/bootstrap-responsive.css",
"~/Content/font-awesome.css"));
// Or make it it's own bundle
BundleTable.Bundles
.Add(new StyleBundle("~/Content/font-awesome")
.Include("~/Content/font-awesome.css"));
}
Then, you need to make sure that your _layout.cshtml renders these bundles (the Bootstrap nuget may not have done this for you).
e.g.
#Styles.Render("~/Content/bootstrap")
// Or, if you made it it's own bundle
#Styles.Render("~/Content/font-awesome")
If you don't want to include ~/Content/bootstrap-responsive.css in your bundle, simple delete this string from the Include method.
I am using Mvc 4 project from Internet Application template. Why bundle feature does not enabled by default or am I missing something?
There is no such methods like this in Mvc4 as mentioned by other post:
BundleTable.Bundles.RegisterTemplateBundles();
BundleTable.Bundles.EnableDefaultBundles();
Update: This how to enable bundle in debug mode
BundleTable.EnableOptimizations = true;
after registering bundles.
Bundles are registered and enabled by default. When you run in Release mode (debug="false") in your web.config the #Script.Render helper will concatenate and minify the resources into a single file. If you run in Debug mode then each script will be rendered separately.
I run into a similiar issue and my solution is this:
public class bundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
// bundle as usual
#if(!DEBUG)
BundleTable.EnableOptimizations = true;
#endif
}
}
This way, when I launch it in Release mode, it does minification and bundling but if I launch it in Debug mode, it doesn't.
I am unable to get images loaded on a webpage when in the LocalState directory.
Specifically, there appears to be a security issue when attempting to launch the webpage when the file path is referencing the LocalState directory.
The webpage DOES load with images when I right-click the html file and view it in the browser within Visual Studio.
I have changed the path of the src tag to: src="ms-appdata:///Local/Logo.jpeg"
It doesn't work.
Help me...
Example code
public static async Task Update(WebView webview, IStorageFile file) {
var html = await Windows.Storage.PathIO.ReadTextAsync(file.Path);
webview.NavigateToString(html);
}
The NavigateToString method doesn't work with tags that point to images in the LocalData folder. (as far as I recall anyway). In fact NavigateToString also breaks JavaScript and CSS links.
Images on Server
One solution, is to change your source to point to a network server instead of localdata. I'm not sure it that works for your app scenario though.
Images and HTML as content
The second choice is to add your html and image files as content to your app and use
WebView1.Navigate(new Uri("ms-appx-web:///assets/SampleHtmlPage.html"));
to load the HTML.
In Process HTTP Server
Here is a solution that uses a custom HTTP server in the app to handle the issues.
Loading Local HTML Content in Metro WebView (Windows 8)
Base 64 encoded image
Finally, there is another solution using Base64 encoding of your images in the LocalData folder.
internal async void MakeHtmlString()
{
StorageFile imageFile; // get image file here.
var html =
string.Format("<div><img src='data:image/png;base64,{0}'",
await GetImageBase64(imageFile));
}
internal async Task<string> GetImageBase64(StorageFile imageFile)
{
var imageStream = await imageFile.OpenAsync(FileAccessMode.Read);
var inputStream = imageStream.GetInputStreamAt(0);
var dataReader = new DataReader(inputStream);
var dataResults = await dataReader.LoadAsync((uint)imageStream.Size);
var bytes = new byte[dataResults];
dataReader.ReadBytes(bytes);
return Convert.ToBase64String(bytes);
}
This last approach works for images, but not for CSS files.