how to import #mdi/font to my vue3 project without vuetify? - mdi

I installed #mdi/font using
npm i #mdi/font
But how can i import it to my vue3 Project?
vite return warning:
[vite] dependency #mdi/font declares non-existent entry file D:\xxxx\node_modules\#mdi\font\index.js.
What should I do so that i can use mdi icons like this way
<span class="mdi mdi-account-heart" aria-hidden="true"></span>

if you dont want to pack the font to your project,just add cdn link to your index.html in public folder like this:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#mdi/font#latest/css/materialdesignicons.min.css">

Related

jQuery mobile flipbox TypeErrpr:Cannot read property 'prototype'

Im trying to add the datebox plugin,
from: http://dev.jtsage.com/
Im trying to follow the instructions on the website, but maybe Im missing something
because i keep getting the following error message on page load:
"Uncaught TypeError: Cannot read property 'prototype' of undefined"
Im using mvc 4,and added the plugin to my project using 'NuGet'
my bundleConfig:
bundles.Add(new ScriptBundle("~/bundles/jqm-datebox-core").Include(
"~/Scripts/jqm-datebox.core.js"));
bundles.Add(new ScriptBundle("~/bundles/jqm-flipbox").Include(
"~/Scripts/jqm-datebox/jqm-datebox.mode.flipbox.js"));
bundles.Add(new ScriptBundle("~/bundles/jqm-datebox-en").Include(
"~/Scripts/jquery.mobile.datebox.i18n.en.utf8.js"));
bundles.Add(new StyleBundle("~/Content/jqm-datebox")
.Include(("~/Content/jqm-datebox.css")));
layout.cshtml:
#Styles.Render("~/Content/pangojquerymobilecss", "~/Content/jqueryMobileIconsCss", "~/Content/jqueryMobileStructureCss", "~/Content/Mobile/css", "~/Content/jqm-datebox")
#Scripts.Render("~/bundles/jquerymobile", "~/bundles/jqm-datebox-core", "~/bundles/jqm-flipbox", "~/bundles/jqm-datebox-en")
the cshtml:
<input type="text" data-role="datebox" data-options='{"mode":"flipbox"}'>
and if that's any help, the header that created when i load the page:
<script async="" src="//www.google-analytics.com/analytics.js"></script><script src="/Scripts/jquery-2.1.1.js"></script>
<script src="/Scripts/jquery.validate-1.13.0.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.mobile-1.4.2.js"></script>
<script src="/Scripts/jqm-datebox/jqm-datebox.mode.flipbox.js"></script>
<style type="text/css"></style></head>
thanks
For what it's worth, you can actually create a combined js file if you prefer here:
http://dev.jtsage.com/jQM-DateBox/builder/
It allows you to tailor to which jQM version you are using, include the modes you are using, and include whatever number of language files you need as well.
If for some reason you need to use a version not listed there (although, the 1.4.4 version works for the entire jQM 1.4 branch, and the 1.4.0 version is backwards compatible with 1.3.0), another option is just to copy and paste the contents of all the js files into one - the only requirement is that the .core file has to appear first, and jQM must still be loaded prior to datebox.

Polymer Elements in Dart Packages

I have a dart package that contains three extensions of polymer element: tp-element-a, tp-element-b and tp-element-c. For each of these elements there is a html-file containing the markup of the element and a dart file for the code. The tp-element-c contains references to the tp-element-a and tp-element-b.
The package structure looks like this:
testpolymer
pubspec.yaml
- packages
- asset
tp-element-a.html
tp-element-b.html
tp-element-c.html
- lib
testpolymer.dart
tp-element-a.dart
tp-element-b.dart
tp-element-c.dart
- web
index.html
The definitiopn of the polymer elements are very simple:
tp-element-a.html
<polymer-element name="tp-element-a">
<template>
<h1>Hello Element A</h1>
</template>
<script type="application/dart" src="../lib/tp-element-a.dart"></script>
</polymer-element>
tp-element-a.dart
part of testpolymer;
#CustomTag("tp-element-a")
class TpElementA extends PolymerElement {
TpElementA.created() : super.created() {}
}
I skip the definitions of tp-element-b and tp-element-c. They are similar. With the only difference that tp-element-c uses the tp-element-a and tp-element-b within its template markup.
The file testpolymer.dart contains the definition of the library testpolymer:
library testpolymer;
import "package:polymer/polymer.dart";
part "tp-element-a.dart";
part "tp-element-b.dart";
part "tp-element-c.dart";
In the yaml file I decalre the dependency to the polymer package and add the polymer transformer:
name: testpolymer
description: A pub package
dependencies:
polymer: any
transformers:
- polymer:
entry_points: web/index.html
Last not least the index.html just contains the link to the tp-element-c.html and uses this element:
<html>
<head>
<link rel="import" href="../asset/tp-element-c.html">
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
</head>
<body>
<div id="sample_container_id">
<tp-element-c></tp-element-c>
</div>
</body>
</html>
So far so good. But when I run a pub build I get errors, that are probably all caused by organizing the dart files in a library:
packages/testpolymer/tp-element-a.dart:1:1:
Directive not allowed here.
part of testpolymer;
packages/testpolymer/tp-element-a.dart:4:26:
A class can't extend a malformed type.
Try correcting the malformed type annotation or removing the 'extends' clause.
class TpElementA extends PolymerElement {
packages/testpolymer/tp-element-a.dart:3:2:
Cannot resolve 'CustomTag'.
#CustomTag("tp-element-a")
So how is it possible to include the code for polymer elements in libraries?
If I don't organize the polymer code as a library, I get another error in tp-element-c.dart, which imports (if no library is used) the tp-element-a.dart and the tp-element-b.dart directly:
The imported libraries 'tp-element-a.dart' and 'tp-element-b.dart' should not have the same name ''
How can I resolve this puzzle?
You get the last error message, if you don't have in each dart file unique library uniquename; definitions. In your case names could be: tp-element-a, tp-element-b etc.

Imported Resource Causes Ambiguous Reference Error

I have run into an ambiguous reference error when using a component from a package, where a primary project also refers to a shared dependency of that component. I have outlined an example project and a dependency project which illustrates the issue.
My aim is to have a base library of UI components, and a separate project that may subclass those components. I am currently unable to subclass those components, because as soon as I do, there ends up being two compiled versions of it - leading to the ambiguous reference error.
Dart SDK 0.6.5.0 r25017
My Package
This is the package that I created and imported into my current project. It defines a single Web Component and has a dependency on Web UI.
MyPackageComponent.html
<!DOCTYPE html>
<html><body>
<element name="my-package-component" constructor="MyPackageComponent" extends="span">
<template>My Package Component</template>
<script type="application/dart" src="MyPackageComponent.dart"></script>
</element>
</body></html>
MyPackageComponent.dart
import "package:web_ui/web_ui.dart";
class MyPackageComponent extends WebComponent
{
MyPackageComponent();
}
My Project
This is the primary project. It defines a single derived Web Component and has dependencies on My Package and Web UI.
MyLocalComponent.html
<!DOCTYPE html>
<html><body>
<element name="my-local-component" constructor="MyLocalComponent" extends="span">
<template>My Local Component</template>
<script type="application/dart" src="MyLocalComponent.dart"></script>
</element>
</body></html>
MyLocalComponent.dart
Note that MyLocalComponent is subclassed from MyPackageComponent.
import "package:MyPackage/MyPackageComponent.dart";
class MyLocalComponent extends MyPackageComponent
{
MyLocalComponent();
}
Index.html
<!DOCTYPE html>
<html><head>
<link rel="import" href="package:MyPackage/MyPackageComponent.html"/>
<link rel="import" href="MyLocalComponent.html"/>
</head><body>
<my-local-component></my-local-component> <!-- REF 1 -->
<my-package-component></my-package-component> <!-- REF 2 -->
<!-- Dart scripts etc. -->
</body>
Result
Everything runs fine if I use only the local component in Index.html (see REF 1). When I use the packaged component (see REF 2), I run into the following error:
Internal error: 'file:[omitted]/MyProject/src/out/Index.html.dart': Error: line [omitted] pos [omitted]: ambiguous reference: 'MyPackageComponent' is defined in library 'file:[omitted]/MyProject/src/out/_from_packages/MyPackage/MyPackageComponent.html.dart' and also in 'package:MyPackage/MyPackageComponent.dart'
__t.component(new MyPackageComponent()..host = __e0);
^ [omitted]/MyProject/src/out/index.html_bootstrap.dart:0
I am not sure if I am doing something wrong or if this is a bug. It seems highly unlikely that I can not use resources from other packages.
Investigation
There is an auto-generated folder in the out directory named _from_packages that seems to be the source of the ambiguous reference. MyPackageComponent is defined in there as well as in the packages directory.
Seems like the Web UI compiler is generating a class for the imported MyPackageComponent.dart (used specifically by the imported component) in addition to the original in packages/MyPackage/MyPackageComponent.dart which is referred to elsewhere in My Project.

How can I link to an external Dart library containing the constructor for my web component?

I've been following the Dart web-ui codelab. When I embed dart source code inside a web component .html file, I'm not getting any static analysis or autocomplete support in the Dart Editor (there's an open bug for this http://code.google.com/p/dart/issues/detail?id=7449 ). Hence, I'm looking for a temporary workaround by using the src attribute.
According to the spec, the src attribute is supported for web components in Dart:
https://www.dartlang.org/articles/dart-web-components/spec.html#behavior. I tried linking to an external Dart library: given a foo.html web component for
<element name="x-foo-component" constructor="FooComponent" extends="div">
I'd like to link to a separate foo_embed.dart file in the same directory as my web component, which defines FooComponent, by adding:
<script type="application/dart" src="foo_embed.dart"></script>
within foo.html. Following the spec's suggestions, foo_embed.dart needs to be a Dart library, and would contain:
library foo_embed;
import 'package:web_ui/web_ui.dart';
class FooComponent extends WebComponent {
...
}
When I try this, running build.dart (from these instructions http://www.dartlang.org/articles/dart-web-components/tools.html) ends up only putting foo_embed.dart in out/ and there's no out/foo.html.dart generated for importing in application.dart.
As expected, pasting the contents of foo_embed.dart as an inline script inside foo.html directly (as done in the codelab) works with build.dart, and I can launch my webapp in Dartium, so I don't seem to have any other syntax problems in my project.
Do I probably have a simple syntax mistake somewhere? Or is this a temporary limitation of the Dart web components compiler? Thanks.
I can't reproduce your problem.
This works for me:
lib/foo.dart
library foo;
import 'package:web_ui/web_ui.dart';
class FooComponent extends WebComponent {
var foo = 'asddfg';
}
lib/foo.html
<element name="x-foo" constructor="FooComponent" extends="div">
<template>
<input value="{{ foo }}" />
</template>
<script type="application/dart" src="foo.dart"></script>
</element>
example/test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="components" href="packages/foo/foo.html" />
</head>
<body>
<x-foo></x-foo>
<script type="application/dart">main() {}</script>
<script type="text/javascript" src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>
</body>
</html>
Then I open up Dartium and go to .../example/out/test.html and I see an input with the data bound to it properly.

Why is my CSS bundling not working with a bin deployed MVC4 app?

I have bin deployed an MVC4 application to my hosting provider, based on advice given here and one or two on-the-fly fixes, but the most immediately apparent problem is that the bundling for css doesn't work. When I replace the bundle ref with explicit file refs, my css works again.
I am using a standard MVC4 RTM project template from VS2012. The provider is running IIS 7.5 and ASP.NET 4, and my previous MVC3 version of the same app worked fine. I am guessing I have grabbed a dependency somewhere of too low a version, and this might also contribute to my area based action link problem.
Technical symptoms are:
The line #Styles.Render("~/Content/css") renders as <link href="/Content/css?v=" rel="stylesheet"/>
UPDATE 11/4/2013:
The reason why this happens is because you have .js or .css at the end of your bundle name which causes ASP.NET to not run the request through MVC and the BundleModule.
The recommended way to fix this for better performance is to remove the .js or .css from your bundle name.
So /bundle/myscripts.js becomes /bundle/myscripts
Alternatively you can modify your web.config in the system.webServer section to run these requests through the BundleModule (which was my original answer)
<modules runAllManagedModulesForAllRequests="true">
<remove name="BundleModule" />
<add name="BundleModule" type="System.Web.Optimization.BundleModule" />
</modules>
Edit: I also noticed that if the name ends with 'css' (without the dot), that is a problem as well. I had to change my bundle name from 'DataTablesCSS' to 'DataTablesStyles' to fix my issue.
The CSS and Script bundling should work regardless if .NET is running 4.0 or 4.5. I am running .NET 4.0 and it works fine for me. However in order to get the minification and bundling behavior to work your web.config must be set to not be running in debug mode.
<compilation debug="false" targetFramework="4.0">
Take this bundle for jQuery UI example in the _Layout.cshtml file.
#Styles.Render("~/Content/themes/base/css")
If I run with debug="true" I get the following HTML.
<link href="/Content/themes/base/jquery.ui.core.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.resizable.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.selectable.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.accordion.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.autocomplete.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.button.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.dialog.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.slider.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.tabs.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.datepicker.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.progressbar.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.theme.css" rel="stylesheet"/>
But if I run with debug="false". I'll get this instead.
<link href="/Content/themes/base/css?v=myqT7npwmF2ABsuSaHqt8SCvK8UFWpRv7T4M8r3kiK01" rel="stylesheet"/>
This is a feature so you can easily debug problems with your Script and CSS files. I'm using the MVC4 RTM.
If you think it might be an MVC dependency problem, I'd recommend going into Nuget and removing all of your MVC related packages, and then search for the Microsoft.AspNet.Mvc package and install it. I'm using the most recent version and it's coming up as v.4.0.20710.0. That should grab all the dependencies you need.
Also if you used to be using MVC3 and are now trying to use MVC4 you'll want to go into your web.config(s) and update their references to point to the 4.0 version of MVC. If you're not sure, you can always create a fresh MVC4 app and copy the web.config from there. Don't forget the web.config in your Views/Areas folders if you do.
UPDATE: I've found that what you need to have is the Nuget package Microsoft.AspNet.Web.Optimization installed in your project. It's included by default in an MVC4 RTM app regardless if you specify the target framework as 4.5 or 4.0. This is the namespace that the bundling classes are included in, and doesn't appear to be dependent on the framework. I've deployed to a server that does not have 4.5 installed and it still works as expected for me. Just make sure the DLL gets deployed with the rest of your app.
Just to clarify a few things, System.Web.Optimization (aka Bundling/Minification) will work against 4.0. It is not depending on anything in 4.5, so there should be no problems there.
If script bundling is working, and its only an issue with CSS, perhaps the issue is with relative URLs?
I'd first look at the rendered page and see if you are getting references to the CSS bundle, i.e. something like:
<link href="/app/Content/css?v=oI5uNwN5NWmYrn8EXEybCI" rel="stylesheet"/>
If you are, then bundling is working, but something inside your CSS bundle is messed up. Usually this is due to relative URLs inside your CSS bundle being incorrect, i.e. if your images live under ~/Content, but you name your bundle ~/bundles/css, the browser will incorrectly look for images under ~/bundles.
Also, the default behavior is to disable bundling and minification when debug=true. So, if you do want optimizations enabled even when debug=true, you will need to force:
BundleTable.EnableOptimizations = true
Updated: With the new info that v="", that means the bundle was empty, you should verify that you are adding files to the bundle correctly, and that it found them. How are you including files to the bundle?
Omitting runAllManagedModulesForAllRequests="true" also worked for me. Add the following configuration in web.config:
<modules>
<remove name="BundleModule" />
<add name="BundleModule" type="System.Web.Optimization.BundleModule" />
</modules>
runAllManagedModulesForAllRequests will impose a performance hit on your website if not used appropriately. Check out this article.
Another thing to consider is the references cannot have the same name. For example, if you have jQuery UI in the libraries directory, and bundle its JavaScript file like so:
bundles.Add(new ScriptBundle("~/libraries").Include("~/libraries/jquery-ui/jqyery-ui.js"));
and then try to bundle its CSS files like so:
bundles.Add(new StyleBundle("~/libraries").Include("~/libraries/jquery-ui/jqyery-ui.css"));
...
it will fail. They have to have unique names. So do something like ScriptBundle("~/libraries/js")... and ScriptBundle("~/libraries/css")... or whatever.
As an addendum to the existing answers, none of which worked for me I found my solution HERE:
https://bundletransformer.codeplex.com/discussions/429707
The solution was to
right click the .less files in visual studio
Select properties
Mark the Build Action as Content
Redeploy
I did NOT need to remove extensionless handlers (as can be found in other solutions on the internet)
I did NOT have to add the <add name="BundleModule" type="System.Web.Optimization.BundleModule" /> web.config setting.
Hope this helps!
I encountered the same issue with CSS on a live environment. I followed all of the advise here and investigated how the bundling works behind the scene. This lead me to request that the .Net cache was cleared (I didn't have access to the app servers) which caused the bundling to start working on the app servers. However, when accessing the site via a load balancer with a CDN configured, although the bundle identifier was updated in the url, the bundle contained the old CSS. Simply flushing the CDN resolved the issue.
I hope this goes some way to helping some one else who may encounter this
One of my css files had an '_' character in the file name which caused issues.
Renamed your_style.css to yourstyle.css
I know this is an old issue, but people may still face this.
The following checks if the BundleModule exists in web.config and loaded,
and sets EnableOptimizations based on its existance.
This way wether it is available or not, the css/js references will work fine.
In other words:
If BundleModule is available, the bundeling/optimization will be enabled.
If BundleModule is not available, the bundeling/optimization will be disabled and automatically the full references will be used
instead.
Code:
public static void RegisterBundles(BundleCollection bundles)
{
// bundeling code here
// ...
// bundeling code here
bool bundelingModuleIsAvailable = false;
try {
bundelingModuleIsAvailable = HttpContext.Current.ApplicationInstance.Modules.AllKeys.Contains("BundleModule");
}
catch { }
if (!bundelingModuleIsAvailable)
System.Diagnostics.Debug.WriteLine("WARNING : optimization bundle is not added to Web.config!");
BundleTable.EnableOptimizations = bundelingModuleIsAvailable && !Debug_CheckIsRunning();
//Debug_CheckIsRunning is optional, incase you want to disable optimization when debugging yourself
BundleTable.EnableOptimizations = true;
}
private bool Debug_CheckIsRunning()
{//Check if debug is running
string moduleName = System.Diagnostics.Process.GetCurrentProcess().MainModule.ModuleName;
return (moduleName.Contains("iisexpress.exe") || moduleName.Contains(".vshost") || moduleName.Contains("vstest.executionengine") || moduleName.Contains("WebDev.WebServer"));
}
Just for history:
Check that all mentioned less/css files in bundle have Build Action = "Content".
There is no error if some files from bundle missing on destination server.
I had the same problem and it turned out to be a stupid mistake, the css files were not included in the project so they weren't published, make sure you view all files in the solution and add them to the project.
I was facing this problem while deploying the code in Azure websites. it did worked when I deployed build from visualstudio.com and wasn't when I tried to publish the build from visual studio 2013. the main problem was CSS Minification. I totally agree with 1st response to this question. but thought of sharing solution that worked for me, may be it will help you in fixing it.
basically when we deploy through VSO it generates minification files for css, js by kicking in system.web.Optimization, but when we do publish build from VS 2013 we have to take care of the below.
bundling-and-minification
1. make sure the folder structure and your bundler naming convention should be different. something like this.
bundles.Add(new StyleBundle("~/Content/materialize/mcss").Include(
"~/Content//materialize/css/materialize.css"));
2. add at the bottom of your bundleconfig definition
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
// Code removed for clarity.
BundleTable.EnableOptimizations = true;
}
3. make sure to add debug false in web.config (when you start local debuging VS2013 will give you a popup saying that you need to make sure to putting it back before deploying into prod. that itself explains much.
<system.web>
<compilation debug="true" />
<!-- Lines removed for clarity. -->
</system.web>
With Visual Studio 2015 I found the problem was caused by referencing the .min version of a javascript file in the BundleConfig when debug=true is set in the web.config.
For example, with jquery specifying the following in BundleConfig:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.min.js"));
resulted in the jquery not loading correctly at all when debug=true was set in the web.config.
Referencing the un-minified version:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));
corrects the problem.
Setting debug=false also corrects the problem, but of course that is not exactly helpful.
It is also worth noting that while some minified javascript files loaded correctly and others did not. I ended up removing all minified javascript files in favor of VS handling minification for me.
try this:
#System.Web.Optimization.Styles.Render("~/Content/css")
#System.Web.Optimization.Scripts.Render("~/bundles/modernizr")
It worked to me.
I'm still learning, and I've not figured it out yet why it is happening
To add useful information to the conversation, I came across 404 errors for my bundles in the deployment (it was fine in the local dev environment).
For the bundle names, I including version numbers like such:
bundles.Add(new ScriptBundle("~/bundles/jquerymobile.1.4.3").Include(
...
);
On a whim, I removed all the dots and all was working magically again:
bundles.Add(new ScriptBundle("~/bundles/jquerymobile143").Include(
...
);
Hope that helps someone save some time and frustration.
I had this issue while adding some packages from nuget and forgot to do an update
So first do an update of all packages installed in the project
Update-Package
In the Global.asax.cs add the following
BundleTable.EnableOptimizations = true;
css names must be consistent.
Names of jqueryUI css are not "jquery.ui.XXX" in Contents/themes/base folder .
so it should be :
wrong:
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));
correct :
bundles.Add(new StyleBundle("~/Bundles/themes/base/css").Include(
"~/Content/themes/base/core.css",
"~/Content/themes/base/resizable.css",
"~/Content/themes/base/selectable.css",
"~/Content/themes/base/accordion.css",
"~/Content/themes/base/autocomplete.css",
"~/Content/themes/base/button.css",
"~/Content/themes/base/dialog.css",
"~/Content/themes/base/slider.css",
"~/Content/themes/base/tabs.css",
"~/Content/themes/base/datepicker.css",
"~/Content/themes/base/progressbar.css",
"~/Content/themes/base/theme.css"));
I tried in MVC5 and worked successfully.
You need to add this code in your shared View
#*#Scripts.Render("~/bundles/plugins")*#
<script src="/Content/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Kendo JS -->
<script src="/Content/kendo/js/kendo.all.min.js" type="text/javascript"></script>
<script src="/Content/kendo/js/kendo.web.min.js" type="text/javascript"></script>
<script src="/Content/kendo/js/kendo.aspnetmvc.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="/Content/bootstrap/js/bootstrap.min.js"></script>
<!-- Morris.js charts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="/Content/plugins/morris/morris.min.js"></script>
<!-- Sparkline -->
<script src="/Content/plugins/sparkline/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="/Content/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="/Content/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- jQuery Knob Chart -->
<script src="/Content/plugins/knob/jquery.knob.js"></script>
<!-- daterangepicker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="/Content/plugins/daterangepicker/daterangepicker.js"></script>
<!-- datepicker -->
<script src="/Content/plugins/datepicker/bootstrap-datepicker.js"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="/Content/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Slimscroll -->
<script src="/Content/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="/Content/plugins/fastclick/fastclick.min.js"></script>
<!-- AdminLTE App -->
<script src="/Content/dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/Content/dist/js/demo.js"></script>
<!-- Common -->
<script src="/Scripts/common/common.js"></script>
<!-- Render Sections -->
#RenderSection("scripts", required: false)
#RenderSection("HeaderSection", required: false)
This solved my issue. I have added these lines in _layout.cshtml
#*#Scripts.Render("~/bundles/plugins")*#
<script src="/Content/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Kendo JS -->
<script src="/Content/kendo/js/kendo.all.min.js" type="text/javascript"></script>
<script src="/Content/kendo/js/kendo.web.min.js" type="text/javascript"></script>
<script src="/Content/kendo/js/kendo.aspnetmvc.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="/Content/bootstrap/js/bootstrap.min.js"></script>
<!-- Morris.js charts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="/Content/plugins/morris/morris.min.js"></script>
<!-- Sparkline -->
<script src="/Content/plugins/sparkline/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="/Content/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="/Content/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- jQuery Knob Chart -->
<script src="/Content/plugins/knob/jquery.knob.js"></script>
<!-- daterangepicker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="/Content/plugins/daterangepicker/daterangepicker.js"></script>
<!-- datepicker -->
<script src="/Content/plugins/datepicker/bootstrap-datepicker.js"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="/Content/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Slimscroll -->
<script src="/Content/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="/Content/plugins/fastclick/fastclick.min.js"></script>
<!-- AdminLTE App -->
<script src="/Content/dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/Content/dist/js/demo.js"></script>
<!-- Common -->
<script src="/Scripts/common/common.js"></script>
<!-- Render Sections -->
i had the same problem . i just convert
#Styles.Render("~/Content/css")
and #Scripts.Render("~/bundles/modernizr") to
#Styles.Render("/Content/css")
#Scripts.Render("/bundles/modernizr")
and its worked.
just dont forget to convert
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
to
#Scripts.Render("/bundles/jquery")
#Scripts.Render("/bundles/bootstrap")
have nice time

Resources