I have a simple problem which I am unable to solve.
I just started my new .NET MVC5 project in Visual Studio 2015 and I wish to use jquery DataTables.
I used NuGet to install jquery.datatables by Allan Jardine.
Now that I did that, i see those datatables in references, but not in wwwroot folder.
In my wwwroot folder I have bootstrap which works fine.
I used the same thing in MVC4, but there are Script folders and Bundles, which don't exist in MVC5.
How can I use my installed DataTables?
References picture
wwwroot picture
My script.js is like this:
alert('a');
$('#prvi').DataTable();
And alert is triggered, but on console view in Chrome, .DataTable() is shown as invalid.
In my _Layout.cshtml I'm referencing to:
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
I am completely new to MVC5 so I guess this is really trivial issue.
Still, I'd really appreciate your help.
While you don't give any further details about your code, perhaps it's a simple typo. the DataTables initializer is actually camelCase. so try:
$('#prvi').dataTable();
Lowercase "d"
Related
i'm working on a project which it uses styles and scripts bundles, but when I run it locally, everything works perfectly but when I deploy it, non of style bundles render.
here is my bundle :
bundles.Add(new StyleBundle("~/assets/bootstrap").Include(
"~/Assets/css/bootstrap.css"
));
I'm wondering why is this happening after deploy?
before deploy (even in release mode) :
<link href="/assets/bootstrap?v=hU1wN6BEpBTuIe8JohSVK3KT4N99k1wLPo3p56yO0I81" rel="stylesheet">
after deploy (even in debug mode) :
<link href="/assets/bootstrap-rtl?v=" rel="stylesheet">
Update: according to answer I changed the bundle like so :
bundles.Add(new StyleBundle("~/abcdefg").Include(
"~/Assets/css/bootstrap.css"
));
which I don't have a real folder named abcdefg , but it didn't make any change and still the problem persists :
<link href="/abcdefg?v=" rel="stylesheet">
so if anybody knows where's the problem or what I am doing wrong, I'll be grateful to get your helps
I believe someone already got a similar problem.
Style bundling not working after IIS deployment (MVC 4)
Make sure you have no name collision
Finally I find out that the problem was because that I've forgotten to include the style files in the project before I publish it.
so I've included them and now it works like a charm.
I have an ASP.NET Core project in which I want to use the environment tag helpers with two sections being defined. I know about the ASPNETCORE_ENVIRONMENT variable. I can change that and I can see different code running in Startup.cs as a result.
However, it's not working in the environment tags. I have this set up.
<environment names="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/vuejs/vue.js"></script>
</environment>
<environment names="Staging,Production">
<script src="~/lib/standard.min.js"></script>
</environment>
When I debug in Chrome, its showing me the source from all sections is being loaded, regardless of my ASPNETCORE_DEVELOPMENT setting. The 'elements' tab in Chrome debugger shows me that the two environment sections are being output in the html. I thought the intent was that only the relevant section would be output by ASP.NET Core in the view? How come I am getting both being output?
You have to add #addTagHelper "*, Microsoft.AspNetCore.Mvc.TagHelpers" to the file containing the html, or if you follow the setup of a default project add it to _ViewImports.cshtml.
I think my problem is that I don't have Angular JS properly configured on my machine or Visual Studio 2015, but I'm not sure. All I know is that my app is showing a blank page and that Visual Studio 2015 is not recognizing Angular tags. Can someone explain what I'm missing and how to add it?
I have been given a Visual Studio solution from a client and need to get it running. I know it uses some kind of Angular JS and seems to be using C# 6.0 and needs Visual Studio 2015 to compile. I have never used VS2015, C#6.0, or Angular before. I usually develop asp.net/C# apps in VS2013.
The project compiles (I can clean and rebuild it), but the initial screen is blank. The page source of that page seems to be the code I want however. In VS, I can see it doesn't recognize certain tags. I thought that I needed to include a reference or download something related to Angular. I re-downloaded the Angular files from https://angularjs.org/. I also tried explicitly reference the angular.js file in the head of the aspx page as shown here: https://www.npmjs.com/package/angular-material. I also tried adding the angular to intellisense as described here: AngularJS intellisense not working on Visual Studio 2015. None of these are working.
In VS, I'm getting warnings on lines like these:
<body ng-cloak ng-controller="litm.xyz.recipes.IndexController">
<div layout="column" layout-fill>
<md-toolbar>
<md-button class="md-icon-button" aria-label="Settings" style="padding: 0">
The errors say that the attributes aren't part of the tag or that the tag is not supported:
I thought this was just intellisense not working, so I tried to run the solution. It compiled and shows me a blank screen. If I look at the page source of the screen, I can see that my code is there, but nothing is displaying:
If I remove the Angular tags, I can get the page to show up. So if I replace the initial body and div tags with this:
<body>
<div>Text
I can see part of the page:
This seems to indicate the problem is with the Angular tags. So how do I get them to work?
Edit 1:
I added these references to angular:
<script src="/lib/angular/angular.js"></script>
<script src="/scripts/angular-aria/angular-aria.js"></script>
<script src="/scripts/angular-animate/angular-animate.js"></script>
<script src="/scripts/angular-material/angular-material.js"></script>
The only place I could find angular in the code is in package.json:
"browser": {
"angular": "../lib/angular.js",
"angular-animate": "../node_modules/angular-animate/angular-animate.js",
"angular-aria": "../node_modules/angular-aria/angular-aria.js",
"angular-cookies": "../node_modules/angular-cookies/angular-cookies.js",
"angular-hammer": "../node_modules/angular-hammer/angular.hammer.js",
"angular-data-table": "../node_modules/angular-data-table/release/dataTable.helpers.js",
"angular-material": "../node_modules/angular-material/angular-material.js",
"angular-messages": "../node_modules/angular-messages/angular-messages.js",
"angular-sanitize": "../node_modules/angular-sanitize/angular-sanitize.js",
"angular-ui-grid": "../node_modules/angular-ui-grid/ui-grid.js",
"angular-ui-router": "../node_modules/angular-ui-router/release/angular-ui-router.js",
The angular js files are in the lib and Script folders:
In my shell page "index.html", I need to include all the necessary files (js, css, etc).
Sample :
<!-- 3rd party libraries -->
<script type="text/javascript" src="scripts/angular.min.js"></script>
<script type="text/javascript" src="scripts/angular-route.min.js"></script>
<script type="text/javascript" src="scripts/angular-resource.min.js"></script>
<script type="text/javascript" src="scripts/angular-animate.min.js"></script>
<script type="text/javascript" src="scripts/angular-ui/ui-bootstrap.min.js"></script>
<script type="text/javascript" src="scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
In existing MVC with razor project, I can bundle this files like this :
bundles.Add(new StyleBundle("~/app/controller").Include(
"~/app/controllers/placesExplorerController.js",
"~/app/controllers/usersController.js"));
In addition, what are techniques can I use to load only the needed files. Not to load all (In SPA). Lazy load artifacts
Update:
Just saw you edit the question that you want specifically lazy loading. Then go for ocLazyLoad.
ocLazyLoad is awesome in a sense that you can inject the $ocLazyLoad at almost anywhere you want.
myApp.controller("MyCtrl", function($ocLazyLoad) {
$ocLazyLoad.load('mySciprt.js');
//if you want to load more than 1 file, pass in an array:
//$ocLazyLoad.load(['myScript.js', 'myStyle.css'])
});
You can also use a directive:
<div oc-lazy-load="{['js/testModule.js', partials/lazyLoadTemplate.html']}">
<!-- Use a directive from TestModule -->
<test-directive></test-directive>
</div>
And you can couple it with your ui.router too, if you are using it:
$stateProvider.state('index', {
url: "/", // root route
views: {
"lazyLoadView": {
controller: 'AppCtrl', // This view will use AppCtrl loaded below in the resolve
templateUrl: 'partials/main.html'
}
},
resolve: { // Any property in resolve should return a promise and is executed before the view is loaded
loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
// you can lazy load files for an existing module
return $ocLazyLoad.load('js/AppCtrl.js');
}]
}
});
oclazyLoad Docs
I am assuming you want a more performant AngularJs app, and that you are using a .NET environment (MVC projects, IIS servers, etc). Allow me to provide you some options:
Option 1 - Stick to Razor's Bundle
Razor's Script bundle actually allows you to minify your Javascripts and your CSS files. Just add in BundleTable.EnableOptimizations = true; and you will have your JS and CS files minified on built. Depending on your project, this might serve as a good solution. Usually an .NET's MVC4/5 project is most suitable to use this method, as they by default use cshtml and Razor syntax's too. I won't recommend this for an rich Angular app though.
Option 2 - Use Gulp or Grunt In conjunction with MVC project
If you do not know it, Visual Studio can now run a NodeJs application. There are even Task Runners that allows you to use grunt/gulp in VS. This is just perfect as now you can use your favourite IDE to build front end apps.
For me, I will create an empty MVC web project, organize my own folder structures, let the IIS hit my index.html and let angular handle the rest. The MVC project itself does nothing but just provide me a web.config so that I can host it in IIS. I run my gulp and grunt, do the minification and build tasks, and dump them into release folder, configure my web.config to let my IIS listen to my sub directory, and voila - I just seperated out development codes and production code.
This option is a good choice because I get the best of both worlds. I can run gulp and grunt - which gives me the freedom to write my own build tasks. You can use bower-install or npm-install too, but just remember to include the files in your project. On the other hand, I can still use VS as my IDE, and by default this is still an .NET project. A .NET project will comes in handy when you want to deploy to Azure (biased opinion though).
Option 3 - use ocLazyLoad
If you are really talking about serve the files only when they are needed, then it's lazy loading. For this, if you do not want to use require.js, look into ocLazyLoad module. One of the best project ever. This allows you to load your html, js and css files lazily, and you got the freedom to choose when to load them.
Hopes this helps.
To bundle, you would typically use a tool like Grunt or Gulp to concatenate the files into bundle-like structures.
To load only the needed files, a popular tool is RequireJS which lazy loads modules based on routing.
Problem:
In the HTML5 offline app being done in ASP.NET MVC 4.5, we are bundling and minifying the styles and scripts using the framework's built-in feature. Everything working well with the pages themselves, but for writing into the Cache Manifest, where (because of the we we are writing it) it is always only emitting the bundled URL.
And so, we are not able to debug JavaScript in the offline mode, as the individual debug js files are not getting into the application cache.
Code:
RegisterBundles
This is how our BundleConfig.RegisterBundles look:
// For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/Scripts").Include(
"~/Scripts/*.js"
));
}
HTML Markup
And we include it in our _Layout.cshtml for the pages itself like this:
#System.Web.Optimization.Scripts.Render("~/bundles/Scripts")
This works well for the pages, by emitting the individual js files when debug is true, and one bundled file when debug is false.
Output in debug=true
<script src="/Scripts/ScriptOne.js"></script>
<script src="/Scripts/ScriptTwo.js"></script>
<script src="/Scripts/ScriptThree.js"></script>
Output in debug=false
<script src="/bundles/Scripts?v=B0_RvAM_5ifnREcGnNQ3FO8qQp4vyLOdtCUJ-2mXSuA1"></script>
Cache-Manifest
And this is how we include the scripts into our CacheManifest
#System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/bundles/Scripts")
Output in debug=true and debug=false
/bundles/Scripts?v=B0_RvAM_5ifnREcGnNQ3FO8qQp4vyLOdtCUJ-2mXSuA1
What we want?
We would like to know if there is a way we could get the Cache-Manifest to be output like this:
Output in debug=true
/Scripts/ScriptOne.js
/Scripts/ScriptTwo.js
/Scripts/ScriptThree.js
Output in debug=false
/bundles/Scripts?v=B0_RvAM_5ifnREcGnNQ3FO8qQp4vyLOdtCUJ-2mXSuA1
The MSDN documentation talks about a certain Scripts.RenderFormat method, which looked like a good candidate for doing what we want. But intellisense was complaining this RenderFormat method is not present in the version of System.Web.Optimization currently referenced.
But, thanks (once again) to Google, this answer here on SO was explaining that this RenderFormat method is in fact, included in the next version's alpha release. And the comment on that answer linked to the page that explains how we could install it:
PM> Install-Package Microsoft.AspNet.Web.Optimization -Pre
With this version, the Cache-Manifest could be changed to:
#System.Web.Optimization.Scripts.RenderFormat("{0}","~/bundles/Scripts")
And we now have the cache manifest emit the individual files while debug=true.
Apparently, the MSDN documentation is not in sync with the current stable release !