I have a ASP.NET MVC solution in .NET 5 with a simple _Layout.chhtml:
<!DOCTYPE html>
<html>
<head>
<environment include="Development">
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true"/>
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true"/>
</environment>
</head>
<body>
#RenderBody()
<environment include="Development">
<script type="text/javascript" src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment exclude="Development">
<script type="text/javascript" src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
#RenderSection("Scripts", required: false)
</body>
</html>
I expect that in Development mode (running from VS 2019) minimized versions of JavaScript and CSS are NOT loaded.
However every time I start the application from Visual Studio all variants both not minimized and minimized (both JavaScript and CSS) are loaded into pages. Why?
Do I misunderstand the concept of <environment exclude="Development"> tag?
<environment exclude="Development"> is a so called Razor tag helper.
In order to activate Razor tag helpers a special directive needs to be used on a Razor page:
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
Tag helpers do not work without this.
Or better to add a list of # directives in a separate file named _ViewImports.cshtml
For example:
#using MyApp
#namespace MyApp.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
Related
I am setting up my application to bundle css and js files when not in development, and not bundle when in development.
To do that I first have a bundleconfig.json file:
[
{
"outputFileName": "wwwroot/css/bundle.min.css",
"inputFiles": [
"wwwroot/lib/bootstrap/bootstrap.min.css",
"wwwroot/lib/jqueryui.jquery-ui.min.css"
]
},
{
"outputFileName": "wwwroot/js/bundle.min.js",
"inputFiles": [
"wwwroot/lib/jquery/jquery.min.js",
"wwwroot/lib/jqueryui/jquery-ui.min.js",
"wwwroot/lib/bootstrap/dist/js/bootstrap.bundle.js"
]
}
]
Then in my page I have a head tag:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewBag.Title</title>
<environment exclude="development">
<link rel="stylesheet" href="~/css/bundle.min.css" asp-append-version="true" />
<script type="text/javascript" src="~/js/bundle.min.js" asp-append-version="true"></script>
</environment>
<environment include="development">
<link rel="stylesheet" href="~/lib/bootstrap/bootstrap.css" asp-append-version="true" />
<link rel="stylesheet" href="~/lib/jqueryui/jquery-ui.css" asp-append-version="true" />
<script type="text/javascript" src="~/lib/jquery/jquery.js" asp-append-version="true"></script>
<script type="text/javascript" src="~/lib/jqueryui/jquery-ui.js" asp-append-version="true"></script>
<script type="text/javascript" src="~/lib/bootstrap/dist/js/bootstrap.bundle.js" asp-append-version="true"></script>
</environment>
</head>
This all works fine. I'm just not a fan of the fact that I have to duplicate the list of files in the budingconfig.json and in the development environment tag in the header.
In WebForms project I can use <%: Scripts.Render("...") %> and it will generate links for each item in the bundle if in development mode, and it will generate 1 link for the bundle if not in development mode. Is something like this available in .net core MVC projects as well?
There is no build-in way to do this in ASP.NET Core. However it is pretty straight forward to roll your own.
Mad Christensen has build an unpacker for MVC5 and here is a gist that adapts it to .NET Core.
You use it like this:
<environment names="Development">
#Bundler.Unpack(HostingEnvironment.ContentRootPath, "/js/site.min.js")
</environment>
However, if you have no specific reason to include each file other than debugging you can also rely an sourcemaps. There is a flag in the bundleconfig for this. ( "sourceMap": true )
You can try a TagHelper like the following
https://github.com/meziantou/Meziantou.AspNetCore.BundleTagHelpers
That will help you what you want to achieve. Instead of writing following type of code
<environment names="Development">
<link rel="stylesheet" href="~/css/site1.css" />
<link rel="stylesheet" href="~/css/site2.css" />
<link rel="stylesheet" href="~/css/site3.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
You can only write this:
<bundle name="wwwroot/css/site.min.css" />
In production, it uses the minified file and appends the version in
the query string (same behavior as asp-append-version).
In development, it uses all input files and does not append version.
I have an ASP.Net MVC 5 project using Infragistics IgniteUI. When I load igniteui charts or grids using my bundled and minified infragistics scripts and stylesheets, I get errors. When I use the unbundled versions, I do not get the errors.
UPDATE I also tried bundling with minification disabled, which still produces the errors.
Why is it looking for images in the /bundles/ path when I use the bundled files?
What can I do differently, to prevent these errors while using bundling?
Errors
The controller for path '/bundles/images/ui-icons_888888_256x240.png' was not found or does not implement IController.
The controller for path '/bundles/images/igLoadingSmall.gif' was not found or does not implement IController.
BundleConfig
#region Scripts
...
bundles.Add(new ScriptBundle("~/bundles/igniteui_full_js").Include(
"~/Scripts/IgniteUI/js/infragistics.core.js",
"~/Scripts/IgniteUI/js/infragistics.dv.js",
"~/Scripts/IgniteUI/js/infragistics.lob.js",
"~/Scripts/IgniteUI/js/infragistics.loader.js"
));
#endregion
#region Styles
...
bundles.Add(new StyleBundle("~/bundles/igniteui_full_css").Include(
"~/Content/IgniteUI/css/themes/infragistics/infragistics.theme.css",
"~/Content/IgniteUI/css/structure/infragistics.css"
));
#endregion
Layout Head Razor Code
<!-- Header Styles-->
#Styles.Render(
"~/bundles/css",
"~/bundles/igniteui_full_css"
)
<!-- Header Scripts-->
#Scripts.Render(
"~/bundles/jquery",
"~/bundles/ajax",
"~/bundles/modernizr",
"~/bundles/bootstrap",
"~/bundles/site",
"~/bundles/igniteui_full_js"
)
Unbundled Head - Doesn't produce Errors
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Header Styles-->
<link href="/Content/bootstrap-multiselect.css" rel="stylesheet"/>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<link href="/Content/Dashboard.css" rel="stylesheet"/>
<link href="/Content/IgniteUI/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"/>
<link href="/Content/IgniteUI/css/structure/infragistics.css" rel="stylesheet"/>
<!-- Header Scripts-->
<script src="/Scripts/jquery-2.2.0.js"></script>
<script src="/Scripts/jquery-ui-1.11.4.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/validator.js"></script>
<script src="/Scripts/jquery.browser.mobile.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/bootstrap-multiselect.js"></script>
<script src="/Scripts/site.js"></script>
<script src="/Scripts/IgniteUI/js/infragistics.core.js"></script>
<script src="/Scripts/IgniteUI/js/infragistics.dv.js"></script>
<script src="/Scripts/IgniteUI/js/infragistics.lob.js"></script>
<script src="/Scripts/IgniteUI/js/infragistics.loader.js"></script>
</head>
Bundled Head - Produces Errors
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Header Styles-->
<link href="/bundles/css?v=DOErVhQffVVJij5tRivXIDYvvea9XjXYoWkD6iph4yo1" rel="stylesheet"/>
<link href="/bundles/igniteui_full_css?v=oMN-4N9H6hCThCn7D6WHIiusJgqj7Qk9KfeKje7iGdI1" rel="stylesheet"/>
<!-- Header Scripts-->
<script src="/bundles/jquery?v=3wcNYlWV3nKyr3gSm0Ry9LrwfpXaysXErYMcQN9fkcw1"></script>
<script src="/bundles/ajax?v=jmjhTWiGrUMlGQS2hayanNTeGVZ9FC7i0HnCBpQ4IZ81"></script>
<script src="/bundles/modernizr?v="></script>
<script src="/bundles/bootstrap?v=kNIhecyepPMk8f_DFvoGkBz2T4zIItHFFHq2488ZHwY1"></script>
<script src="/bundles/site?v=stk1SwAEJZvoHt7p5QZ9202zmQ1IeBvXWmqmxFpIXI01"></script>
<script src="/bundles/igniteui_full_js?v=6y5k9Wl7x2PlzNsRN0azCfVIh1oR8SLPZohqnlbLrNo1"></script>
</head>
View
#using Infragistics.Web.Mvc
#using MyProject.Web.Website.ViewModels
#model ReportViewModel
#(Html.Infragistics()
.Grid(Model.ReportData.AsQueryable())
.ID("grid")
.AutoGenerateColumns(true)
.AutoGenerateLayouts(true)
.DataBind()
.Render()
)
I believe the issue is that you need a CssRewriteUrlTransform because the bundling changes where the resources should be referenced from.
bundles.Add(new StyleBundle("~/bundles/igniteui_full_css")
.Include("~/Content/IgniteUI/themes/infragistics/infragistics.theme.css", new CssRewriteUrlTransform())
.Include("~/Content/IgniteUI/structure/infragistics.css", new CssRewriteUrlTransform()));
On a side note, you can remove the infragistics.loader.js from your script bundle as you're bundling all of the combines script files, thus the loader is not needed.
I see Telerik provides open source version of Kendo UI at following URL
http://www.telerik.com/download/kendo-ui-core
I downloaded it but not able to make it work in ASP.NET MVC application.
I am not sure what i am missing. I make a call to CSS and JS files as mentioned in below link:
http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/asp-net-mvc-4
Although I am missing one step Add reference to Kendo.Mvc.dll because Telerik don't provide installer in free version and I need JavaScript version of Kendo UI not with MVC selector.
Any idea here?
If you go to: http://dojo.telerik.com/
The default page contains everything you will need to get up and running and in what order:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
</head>
<body>
</body>
</html>
If it is still not working after you put this in your page then something else is going on.
Comment out the following line in _layout.cshtml page
##Scripts.Render("~/bundles/jquery")#
and add the below lines at the end of the head section :
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.903/js/kendo.all.min.js"></script>
I made an application with dart / polymer / sockets, and i want to compile it in Javascript. But I don't know how to do. I tried to do "Generate Javascript", but it said "You do not have main entry point".
Should I compile manually each dart files ?
Does build.dart useful ?
Edit Added index.html from comments:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="bootstrap.min.css" />
<link rel="import" href="console.html" />
<link rel="stylesheet" href="base.css" />
<link rel="stylesheet" href="css/main.css" />
<script src='packages/polymer/boot.js'></script>
<title>XXX</title>
</head>
<body>
<fei-console></fei-console>
<script type="application/dart">
main() { }
</script>
</body>
</html>
If it is complaining about a main entry point, I suspect it cannot find a main() function defined anywhere. In your index.html (or whatever the main html file is called), you presumably have a link to a Dart file. Does that file have a main() function defined?
I am trying to separate all the things that I could reuse in sections, so it would be easier for me to maintain.
However I got this exception:
The file "~/Views/Position/Edit.cshtml" cannot be requested directly because it calls the "RenderSection" method
I created a file called sections.cshtml with the following content:
#section scripts{
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
}
And in the _layout.cshtml file I changed it to:
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
#RenderSection("scripts", required:false)
#*<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>*#
</head>
When I go to the view in the browser and check the source code it shows only:
<head>
<meta charset="utf-8" />
<title>Edit</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
</head>
RenderSection can only exist in Layout files (i.e. master pages)... its purpose is to allow the pages you can request directly to target various sections of a Layout (layout being a file common to all pages which choose to use it) and supply content for these different sections.
If you want to separate this section out as something which is resuable on many pages you should put it in a partial and replace the rendersection call to something like
#Html.Partial("Scripts")
Alternatively you could use helper to separate code you use more often. Especially if you cannot use sections because of the constraint Martin-Booth mentioned.
#helper Scripts(){
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
}
and the usage is just:
<somehtml />
#Scripts()
<somehtml />