I am trying to include jquery-ui in my .NET Core project so that I can use autocomplete in one of my typescript files. I am able to use webpack to copy my node_modules files to my root folder. I have also included the jquery-ui.js file in my master layout, and added require("jquery-ui-bundle"); to my entry file.
But when i run my project, i get a console error stating $(...)autocomplete is not a function, when i check the sources tab in developer tools, I do not see the jquery-ui file added, although i see the other libraries such as jquery which i have added the same way. I am not sure what i am missing. See configurations below.
webpack.config.js
/// <reference path="wwwroot/lib/datatables/js/jquery.datatables.js" />
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CopyWebpackPlugin = require("copy-webpack-plugin");
var glob = require("glob");
module.exports = {
target: "web",
entry: "./Scripts/entry.ts",
output: {
filename: "./wwwroot/Scripts/[name].js"
},
devtool: "source-map",
resolve: {
extensions: ["", ".ts", ".less"]
},
module: {
loaders: [
{ test: /\.ts/, exclude: [/node_modules/, /typings/], loader: "ts-loader" },
{ test: /\.less/, exclude: /node_modules/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader") },
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: "url-loader?limit-100000&name/css/[hash].[ext]" },
{
test: /datatables\.net.*/,
loader: "imports?define=>false"
}
]
},
plugins:[
new ExtractTextPlugin("./wwwroot/css/site.css", { allChunks: true }),
new CopyWebpackPlugin([
{ from: "node_modules/jquery/dist", to: "./wwwroot/lib/jquery/dist" },
{ from: "node_modules/jquery-ui-bundle", to: "./wwwroot/lib/jquery-ui-bundle" },
{ from: "node_modules/bootstrap/dist", to: "./wwwroot/lib/bootstrap/dist" },
{ from: "node_modules/datatables.net/js", to: "./wwwroot/lib/datatables/js" },
{ from: "node_modules/datatables.net-bs/js", to: "./wwwroot/css/datatables/js" },
{ from: "node_modules/datatables.net-dt/css", to: "./wwwroot/css/datatables/css" },
{ from: "node_modules/datatables.net-bs/css", to: "./wwwroot/css/datatables/css" },
{ from: "node_modules/datatables.net-dt/images", to: "./wwwroot/css/datatables/css" }
])
],
watch: true
}
typescript entry file
import $ = require("jquery");
require("jquery-ui-bundle");
Script included in layout page
<environment names="Development">
<script type="text/javascript" src="~/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="~/lib/jquery-ui-bundle/jquery-ui.js"></script>
<script type="text/javascript" src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
#*<script type="text/javascript" src="~/lib/datatables/js/jquery.dataTables.js"></script>*#
<script src="~/css/datatables/js/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="~/Scripts/main.js"></script>
#RenderSection("scripts", false)
</environment>
File path (wwwroot)
Chrome developer tools does not show jquery ui under lib folder
Related
I have an ASP.NET MVC application that is using Angular 4. In my layout I have a base tag that looks like this:
<base href="/src/">
I am setting everything up and I just added Angular Routing. Now right after my base component loads my URL is appended with 'src'.
Here is my routes file:
import { Routes } from '#angular/router';
import { HomeComponent } from './Components/Home/home.component';
export const AppRouting: Routes = [
{ path: '', component: HomeComponent }
];
I did not see this prior to adding the routing.
The key purpose of the base tag is for routing. This is from the docs:
Most routing applications should add a element to the
index.html as the first child in the tag to tell the router how
to compose navigation URLs.
If the app folder is the application root, as it is for the sample
application, set the href value exactly as shown here.
https://angular.io/guide/router#base-href
At development time, it is most often set to "/" so the routes will run from root. At deployment, you change it to the folder on the server containing your application.
I was able to fix this. For reference, my app folder is under a src directory, not in the root of my project. Here is what I did.
Change the base tag to:
<base href="/">
Update my main.js call from:
<script>
System.import('main.js').catch(function (err) { console.error(err); });
</script>
to:
<script>
System.import('src/main.js').catch(function (err) { console.error(err); });
</script>
Then in my systemjs.config.js I had to change these lines:
map: {
//app is within the app folder
'app': 'app',
to:
map: {
//app is within the app folder
'app': 'src/app',
and I also had to change:
packages: {
app: {
defaultExtension: 'js',
meta: {
'./*.js': {
loader: 'systemjs-angular-loader.js'
}
}
},
to:
packages: {
app: {
defaultExtension: 'js',
meta: {
'./*.js': {
loader: 'src/systemjs-angular-loader.js'
}
}
},
Short Version:
I'm building an app with Angular2 and Webpack. I have the bundles building successfully, but when I include them on my page, the angular components loading. No errors are showing up.
webpack.config.js
"use strict";
let webpack = require('webpack');
let ExtractTextPlugin = require('extract-text-webpack-plugin');
let helpers = require('./webpack.helpers.js');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
'app': helpers.root('/Modules/Shared/Main.ts'),
'vendor': helpers.root('/External/Vendor.ts'),
'polyfills': helpers.root('/External/Polyfill.ts')
},
devtool: 'source-map',
resolve: {
extensions: ['.ts', '.js', '.json', '.css', '.scss', '.html']
},
output: {
path: helpers.root('/wwwroot/scripts'),
filename: '[name].js'
},
module: {
rules: [
{
test: /\.ts$/,
loaders: [
{ loader: 'awesome-typescript-loader', options: { tsConfig: 'tsconfig.json' } },
'angular-router-loader',
'angular2-template-loader',
'source-map-loader',
'tslint-loader'
]
},
{
test: /\.(png|jpg|gif|woff|woff2|ttf|svg|eot)$/,
loader: 'file-loader?name=assets/[name]-[hash:6].[ext]'
},
{
test: /favicon.ico$/,
loader: 'file-loader?name=/[name].[ext]'
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallbackLoader: "style-loader",
loader: "css-loader"
})
},
{
test: /\.scss$/,
exclude: /node_modules/,
loaders: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.html$/,
loader: 'raw-loader'
}
]
},
plugins: [
new ExtractTextPlugin('css/[name].bundle.css'),
new webpack.NoEmitOnErrorsPlugin(),
// Workaround for angular/angular#11580
new webpack.ContextReplacementPlugin(
// The (\\|\/) piece accounts for path separators in *nix and Windows
/angular(\\|\/)core(\\|\/)#angular/,
'Modules/', // location of your src
{} // a map of your routes
),
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfills']
}),
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery',
}),
new HtmlWebpackPlugin()
]
};
tsconfig.json
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "commonjs",
"moduleResolution": "node",
"noEmitOnError": true,
"noImplicitAny": true,
"removeComments": true,
"skipLibCheck": true,
"sourceMap": true,
"target": "es5"
},
"exclude": [
"node_modules",
"wwwroot"
],
"compileOnSave": true
}
The files are being generated correctly:
http://imgur.com/a/xzw0E
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"]</title>
<base href="/" />
</head>
<body style="background-color: #333;">
#RenderBody()
<script type="text/javascript" src="/scripts/polyfills.js"></script>
<script type="text/javascript" src="/scripts/vendor.js"></script>
#RenderSection("scripts", required: false)
</body>
</html>
index.cshtml
#using System.Threading.Tasks
#{
ViewData["Title"] = "Home Page";
}
<div style="height: 100%;">
<app-component>Loading...</app-component>
</div>
#section Scripts{
<script type="text/javascript" src="/scripts/app.js"></script>
}
The component I'm expecting to see looks like this:
import { Component } from '#angular/core';
#Component({
selector: 'app-component'
})
export class AppComponent {
constructor() {
console.log('I\'m running !!!!');
}
}
But when I generate the page, it looks like this:
http://imgur.com/a/YrPJf
with no errors in the console:
http://imgur.com/a/Xepl2
Any help is greatly appreciated
Seems you forgot about bootstrapping your application via
platformBrowserDynamic().bootstrapModule(AppModule);
Here is my Razor page code:
#using System.Web.Optimization;
#{ BundleTable.Bundles.Add(
new ScriptBundle("~/Scripts/Vuejs")
.Include("~/Static/Scripts/Vuejs/vue.min.js")); }
#section Scripts {
#Scripts.Render("~/Static/vue/assets/bundle.js")
#Scripts.Render("~/Scripts/Vuejs")
}
<div id="app_container">
{{text}}
</div>
and here is the entry of the webpack javascript:
import Vue from 'vue';
const v = new Vue({
el: '#app_container',
data: { text: 'abcdefg' }
});
Webpack config:
export default {
entry: [
'babel-polyfill',
'./src/index.js'
],
output: {
filename: 'bundle.js',
path: 'C:/WebSandbox/Static/vue/assets',
publicPath: '/vue/assets/'
},
devtool: 'source-map',
module: {
loaders: [
{ test: /\.vue$/, loader: 'vue' },
{ test: /\.js/, loader: 'babel', exclude: /node_modules/ },
{ test: /\.json$/, loader: 'json' },
{ test: /\.txt/, loader: 'raw' }
]
},
plugins: [
new webpack.optimize.DedupePlugin(),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production'),
APP_ENV: JSON.stringify('browser')
}
})
]
};
All the javascript files are in place and when open the page I can see the mapped code from Developer Tools of Chrome. And if I make a break point in the javascript code, it will be hit.
But the text displayed is "{{text}}", not "abcdefg".
If I added following code after the div:
<script>
const v = new Vue({ el: "#app_container", data: { text: "abcdefg" } });
</script>
or add following code and remove the javascript file from #section Scripts part
<script src='~/Static/vue/assets/bundle.js'></script>
It works.
So how can I make my webpack bundle work with the #Scripts.Render in Razor page?
OK, now I found why the bundle not working:
Because the #RenderSection("Scripts", false) was written in the header of _Layout.cshtml. So the bundle JavaScript file will be referenced in the header. But when I switch to the raw reference (script tag), it will be after my div tag where it should be.
When I change the bundle part to:
#section ScriptBlock {
#Scripts.Render("~/Static/vue/assets/bundle.js")
}
It works.
The #RenderSection("ScriptBlock", false) was written in the bottom of the _Layout.cshtml right after the closing tag of body.
I use vuejs with asp.net with browserify rather than webpack.
And the packing should be an independent build step.
I setup a gulp task to take my vue code and bundle it up and place it in the scripts folder of asp.net.
I think you need to do something similar here.
I try to use Electon's webview tag inside my Angular2 app, but when I add the src attribute binded to an Angular2 variable, the following error occurs:
Can't bind to 'src' since it isn't a known native property
This is the index.html:
<head>
<!-- cut out stylings, metatags, etc. -->
<script src="../node_modules/zone.js/dist/zone.js"></script>
<script src="../node_modules/reflect-metadata/Reflect.js"></script>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
const electron = require('electron');
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<MainComponent>Loading...</MainComponent>
</body>
This is the systemjs.config.js:
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'angular',
'#angular': '../node_modules/#angular',
'angular2-in-memory-web-api': '../node_modules/angular2-in-memory-web-api',
'rxjs': '../node_modules/rxjs'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' }
};
var ngPackageNames = [
'common',
'compiler',
'core',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade'
];
// Add package entries for angular packages
ngPackageNames.forEach(function(pkgName) {
packages['#angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages
};
System.config(config);
})(this);
This is the Angular2 component template I (want to) use webview in:
<div class="stage-component component">
<webview *ngIf="iFrameUrl" src="{{iFrameUrl}}"></webview>
</div>
How can I introduce the webview element to Angular2?
If this appears, use "attr" before.
<webview *ngIf="iFrameUrl" attr.src="{{iFrameUrl}}"></webview>
That is strange. It sounds like you maybe have a version issue. You can try to use the loadUrl api instead and see if that helps.
<script>
onload = () => {
const webview = document.getElementById('foo');
webview.loadUrl('http://example.com')
</script>
I have a controller that looks like this:
using System.Collections.Generic;
using System.Web.Mvc;
using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
namespace KendoMvcApplication.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult GetData([DataSourceRequest] DataSourceRequest req)
{
var products = CreateProducts();
var result = products.ToDataSourceResult(req);
return Json(result);
}
private static IEnumerable<Product> CreateProducts()
{
for (int i = 1; i <= 20; i++)
{
yield return new Product
{
ProductId = i,
ProductName = "Product " + i,
ProductPrice = i * 2.5
};
}
}
}
public class Product
{
public int ProductId { get; set; }
public string ProductName { get; set; }
public double ProductPrice { get; set; }
}
}
And a view that looks like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="~/Content/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/kendo.default.min.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/require.js"></script>
</head>
<body>
<div id="grid"></div>
<script type="text/javascript">
require.config({
baseUrl : '#Url.Content("~/Scripts")',
paths: {
'jquery': 'jquery-2.0.3.min',
'kendo': 'kendo-ui'
},
shim: {
'jquery': {
exports: 'jQuery'
}
}
});
require(['jquery', 'kendo/kendo.grid.min'], function ($) {
$(document).ready(function () {
$('#grid').kendoGrid({
dataSource: {
schema: {
data: 'Data',
total: 'Total',
aggregates: 'AggregateResults',
model: {
id: "ProductId",
fields: {
ProductName: { type: "string" },
ProductPrice: { type: "number" }
}
}
},
transport: {
read: {
url: "#Url.Action("GetData", "Home")",
dataType: "json",
method: "post"
}
},
pageSize: 10,
serverPaging: true,
serverSorting: true,
type: "aspnetmvc-ajax"
},
sortable: {
mode: "single"
},
columns: ["ProductName", "ProductPrice"],
scrollable: false,
pageable: true
});
});
});
</script>
</body>
</html>
And my directory structure is:
Scripts/kendo-ui/* (all the kendo files, including the mvc one)
Scripts/require.js
Scripts/jquery-2.0.3.min.js
which nearly works except that server-side sorting doesn't get applied.
This is because the kendo.aspnet.mvc.min.js file is never downloaded (of course, as require JS doesn't know anything about it) so to remedy that I tried this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="~/Content/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/kendo.default.min.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/require.js"></script>
</head>
<body>
<div id="grid"></div>
<script type="text/javascript">
require.config({
baseUrl: '#Url.Content("~/Scripts")',
paths: {
'jquery': 'jquery-2.0.3.min',
'kendo': 'kendo-ui',
'kendo-mvc': 'kendo/kendo.aspnetmvc.min'
},
shim: {
'jquery': {
exports: 'jQuery'
}
}
});
require(['jquery', 'kendo-mvc', 'kendo/kendo.grid.min'], function ($) {
$(document).ready(function () {
$('#grid').kendoGrid({
dataSource: {
schema: {
data: 'Data',
total: 'Total',
aggregates: 'AggregateResults',
model: {
id: "ProductId",
fields: {
ProductName: { type: "string" },
ProductPrice: { type: "number" }
}
}
},
transport: {
read: {
url: "#Url.Action("GetData", "Home")",
dataType: "json",
method: "post"
}
},
pageSize: 10,
serverPaging: true,
serverSorting: true,
type: "aspnetmvc-ajax"
},
sortable: {
mode: "single"
},
columns: ["ProductName", "ProductPrice"],
scrollable: false,
pageable: true
});
});
});
</script>
</body>
</html>
But that produced this error:
And attempted to load the js files thus:
The red spots are 404 not found as it is looking for the js files in a folder called kendo under the scripts folder.
So then I thought I would try including the all version instead so I tried this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="~/Content/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/kendo.default.min.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/require.js"></script>
</head>
<body>
<div id="grid"></div>
<script type="text/javascript">
require.config({
baseUrl: '#Url.Content("~/Scripts")',
paths: {
'jquery': 'jquery-2.0.3.min',
'kendo': 'kendo-ui/kendo.all.min',
'kendo-mvc': 'kendo-ui/kendo.aspnetmvc.min'
},
shim: {
'jquery': {
exports: 'jQuery'
}
}
});
require(['jquery', 'kendo', 'kendo-mvc'], function ($) {
$(document).ready(function () {
$('#grid').kendoGrid({
dataSource: {
schema: {
data: 'Data',
total: 'Total',
aggregates: 'AggregateResults',
model: {
id: "ProductId",
fields: {
ProductName: { type: "string" },
ProductPrice: { type: "number" }
}
}
},
transport: {
read: {
url: "#Url.Action("GetData", "Home")",
dataType: "json",
method: "post"
}
},
pageSize: 10,
serverPaging: true,
serverSorting: true,
type: "aspnetmvc-ajax"
},
sortable: {
mode: "single"
},
columns: ["ProductName", "ProductPrice"],
scrollable: false,
pageable: true
});
});
});
</script>
</body>
</html>
But that produced these errors:
And attempted to load the js files thus:
In this case - the red spots are 404 not found as it is looking for the files directly under the Scripts folder.
So here is my question:
How can I include said file in a require JS type scenario?
Aside: I would like to be using the kendo.all.min file and not the separate ones as I want to use knockout-kendo in the future and that seems to not work with the separate file but if the only way to make this work is to use the separate file approach, that is fine.
It took me a while to get your code working but after having been fiddling around with it a little I managed to get the sorting to work with just a tiny little change in your original code.
The only thing I changes was on the require line where I added the mvc file as well. Then all the paths became correct and it all worked out fine.
['jquery', 'kendo/kendo.grid.min', 'kendo/kendo.aspnetmvc.min']
In my code I've used "Kendo UI for ASP.NET MVC Q2 2013" with the jQuery.min.js file that was included in that package. The complete View code then becomes:
<script type="text/javascript">
require.config({
baseUrl : '#Url.Content("~/Scripts")',
paths: {
'jquery': 'jquery-2.0.3.min',
'kendo': 'kendo-ui'
},
shim: {
'jquery': {
exports: 'jQuery'
}
}
});
require(['jquery', 'kendo/kendo.grid.min', 'kendo/kendo.aspnetmvc.min'], function ($) {
$(document).ready(function () {
$('#grid').kendoGrid({
dataSource: {
schema: {
data: 'Data',
total: 'Total',
aggregates: 'AggregateResults',
model: {
id: "ProductId",
fields: {
ProductName: { type: "string" },
ProductPrice: { type: "number" }
}
}
},
transport: {
read: {
url: "#Url.Action("GetData", "Home")",
dataType: "json",
method: "post"
}
},
pageSize: 10,
serverPaging: true,
serverSorting: true,
type: "aspnetmvc-ajax"
},
sortable: {
mode: "single"
},
columns: ["ProductName", "ProductPrice"],
scrollable: false,
pageable: true
});
});
});
</script>
I hope it'll work in your code as well.
Let's try building up from a minimal working version. You said you have the following in the directory:
Scripts/kendo-ui/* (all the kendo files, including the mvc one)
Scripts/require.js
Scripts/jquery-2.0.3.min.js
To get that to load all the dependencies, you might try something like this:
<html>
<body>
<script type="text/javascript" src="~/Scripts/require.js"></script>
<script type="text/javascript">
require.config({
baseUrl: '#Url.Content("~/Scripts")',
paths: {
'jquery': 'jquery-2.0.3.min',
'kendo': 'kendo-ui/kendo.all.min',
'kendo-mvc': 'kendo-ui/kendo.aspnetmvc.min'
},
shim: {
'jquery': {
exports: 'jQuery'
},
'kendo-mvc' : {
deps: ['kendo'] //kendo needs to be loaded before kendo-mvc?
}
}
});
require(['jquery', 'kendo', 'kendo-mvc'], function ($) {
});
</script>
</body>
</html>
I played around with putting it in a jsFiddle, but ran into a number of problems (Kendo actually requires jQuery 1.9.0, etc.) that you can probably resolve on your own.
The key seems to be that your last version is loading kendo.data, kendo.combobox, and a bunch of other files that aren't referenced anywhere. Figuring out where those requests came from would help solve this mystery.
Update:
Here's one possibility. If kendo-mvc is loading dependencies like this:
["./kendo.data.min","./kendo.combobox.min","./kendo.multiselect.min","./kendo.validator.min"]
Then it may fail because RequireJS looks for dependencies relative to the name of the module, which has been aliased as kendo-mvc. Let's try not renaming it (see below), and see if that works:
<script type="text/javascript">
require.config({
baseUrl: '#Url.Content("~/Scripts")',
paths: {
'jquery': 'jquery-2.0.3.min',
'kendo-ui/kendo': 'kendo-ui/kendo.all.min',
'kendo-ui/kendo-mvc': 'kendo-ui/kendo.aspnetmvc.min'
},
...
require(['jquery', 'kendo-ui/kendo', 'kendo-ui/kendo-mvc'], function ($) {
});