nuget bootstrao and jquery package loading - asp.net

i am loading the bootstrap and jquery packages from nuget:
but i get an error message in chrome console saying that
$ sign is not defined
do i need to referense the jquery lib file, from the aspx page?
if do so, what happen when jquery gets updated, his file name will update too?

In short, yes. You will need to reference the jquery file in every page you use it in. Alternatively, if you are using a _Layout page, you only need to do so once. In terms of the updating issue, your jquery file should not update automatically so you should be fine.
You could also make sure you have jquery migrate installed so that you never have deprecated or code breaking errors in your program. jQuery Migrate
Also consider using jQuery CDN rather than having the files stored locally as this can make updating and upgrading far easier

Related

ASP.Net cannot render the page when compilation debug is false

I have an ASP.Net project framework 4.5.2. When I set the compilation debug="true" in web.config, the page is working fine. When I set the debug="false", the page cannot be rendered. It shows special character as below:
Please give me the solution to fix the issue.
My best guess?
When you set debug= false?
That forces the project to use the min (minimized) version of your JavaScript libraries.
For example I modified some of the JavaScript routines in the ajaxtoolkit library. Debug=false never worked or saw my JavaScript changes.
So I installed a JS minimizer package. Now when I modify the JavaScript. I at that point in time also run the minimizer against that js routine and thus when you use debug=false, then your project will now be using the js.min versions of your JavaScript libraries.
Minimization is a huge topic - way way beyond a simple post and answer on SO.
However flipping debug= false does mean your now using the min version of those JavaScript libraries - and thus they must exist - so I would look and check what JavaScript libraries that page uses. You can compile the application as release, but setting debug=false also means JavaScript.min libraries will be used.
So check above in regards to what JavaScript libraries that page uses (and ensure the min versions of those libraries exist before you attempt a publish)
Edit --
Also,try clearing the browser cache - all of it.
For my case, the problem was caused by WebMarkupMin package. The page implements WebMarkupMin's MinifiedAndCompressedHtmlPage class.

Meteor AngularJS adding external js libraries

I am a little new to angular-meteor and want to add an external js library to my project.
The library is Fusioncharts.js http://www.fusioncharts.com/angularjs-charts/#/demos/ex1 and it cannot be installed using any of these options
1) bower install
2) npm install
3) meteor add (from atmosphere)
So what i did is, I followed these steps How can I add third-party JavaScript libraries to a Meteor application?
and added the libraries manually under public/js directory
Created a main.js file and added all the scripts using $.getScript
Strange thing is when I add the dependency of the 'ng-fusioncharts' module in my angular.module it throws an error
" Module 'ng-fusioncharts' is not available! You either misspelled the module name or forgot to load it."
Please let me know what could be going wrong here.
P.S : When I type in FusionCharts in the console.log I do see that object.
So it means the Fusioncharts libraries were imported properly but not added to the angular dependency
Thanks in advance
Please note that $.getScript is asynchronous, so you would need a little timeout to wait for the module to be available to the rest of your code.
Another possibility to try out would be to include your script rather in client/compatibility special folder. It will be included in your JS and execute before the rest of your client JS code.

Latest version of Ajax Control toolkit loading 150 .axd files

I have installed the latest version of Ajax Control Toolkit, it is loading 150 ScriptResource.axd files approx. which is taking long time to load which in turn is making my website very slow, please suggest how to overcome this issue?
The latest version of Ajax Control toolkit is loading all the scripts by default, you have to code manually so that you can load only the required scripts for the used controls on the page. For Achieving this functionality, you have to create AjaxControlToolkit.config to define the bundles which in turn can be used by the individual pages. Please follow the below links it explains all the functionality that is required by you:
http://stephenwalther.com/archive/2013/07/25/july-2013-release-of-the-ajax-control-toolkit
https://ajaxcontroltoolkit.codeplex.com/SourceControl/latest#SampleWebSites/AjaxControlToolkitSampleSite/AjaxControlToolkit.config

How can I manually update jQuery UI installed via NuGet package?

Situation
I am working on an ASP.NET Web Forms project that was generated using the default Visual Studio 2012 project template. I have since then used NuGet to install jQuery UI version 1.10.0.
I need to update to jQuery UI 1.10.1 because there is a bug fix I need. According to the website, 1.10.1 is the current stable version. However, there is not a NuGet package available for this version!
I don't know why the NuGet package would lag behind the latest available stable release from the jQuery UI team on their website. (Yes, I realize there is probably a different team managing the nuget package itself... but it still seems like this needs to be kept up to date.... or the value of installing jQuery via NuGet is very limited.)
Question
How do I update jQuery UI (installed as a NuGet package) manually to 1.10.1 on my project?
I have already downloaded the latest 1.10.1 javascript files. Now.... when I look inside my ASP.NET Web Forms project, I see in the following files in the Scripts folder:
So what should I do here... delete the following two files?
jquery-ui-1.10.0.js
jquery-ui-1.10.0.min.js
...and replace with these new files?
jquery-ui-1.10.1.js
jquery-ui-1.10.1.min.js
This doesn't seem like it would work.
The way jQuery is being include in my masterpage (from the default template generated by Visual Studio 2012) is like this:
That JS bundle you see above, called "jquery.ui.combined" is auto-magically generated by some kind of hidden code. Go ahead and look through your project... you won't find anywhere obvious this bundle is defined. So if I add the latest JS files... it seems I have no way to define that they get used or bundled at all. They aren't the version that the NuGet package logic/code would be expecting!!!
Any ideas?
Another potential problem
When I downloaded jQuery UI 1.10.1, it also came with jQuery Core 1.9.1. As you will see above in my Scripts folder, it appears as if jQuery UI 1.10.0 goes hand-in-hand with jQuery Core 1.9.0. If I update jQuery UI..... do I also need to update to the matching jQuery Core as well? (These are separate NuGet packages)
Please answer this specifically
I would like for the answer to explain how to manually update the version of jQuery UI installed from NuGet package.... on an ASP.NET Web Forms project.
I think this would be useful so that in the future a developer can pull down the latest bug fixes as soon as they are included in a stable release on the jQuery UI website.... without needing to wait for the package to show up on the NuGet feed.
The jQuery UI team hasn't uploaded the version 1.10.1 for their package. I'm afraid you just have to wait until they release it.
If you can't wait, you can uninstall the current version of jQuery UI first, and then manually add the script files of version 1.10.1 into your project.
Work-around... although it seems like a bad approach....
I just opened up these files....
jquery-ui-1.10.0.js
jquery-ui-1.10.0.min.js
...and replaced the contents with the contents from these files:
jquery-ui-1.10.1.js
jquery-ui-1.10.1.min.js
I left the file names the same as they were. So even though the JavaScript files are named as version "1.10.0".... they are actually holding the code for version "1.10.1".
One of the reasons I think this might be a terrible idea
What happens if some other developer attempts to pull down my code from source control... and they use NuGet Package Manager to restore the packages they did not have yet. Wouldn't it pull jQuery UI nuget package and replace the JavaScript files I have modified with the ones from the nuget package? Then the page would start exhibiting the buggy behavior again, and no one would know why.
At the very least.... for now I can continue development with the bug fixed! It was very annoying... the overlay was appearing on top of the dialog and I couldn't interact with the page. Here is the bug that was fixed: http://bugs.jqueryui.com/ticket/8984
Go To : Visual Studio -> Tools => Library Package => And Package Manager Setting
Window opens Having Options as in Screenshot
Click On Add (+) Button At Right Top And Inside Source Browser To Your Folder Location of Whatever Package of Nuget You HAve. Name is Whatever You Want And Press Ok
You Can See Now Your Package Into Extensions And Updates Window
To Install In Current Project
use Package Manager console : Install-Package ANd your package name

VS2010 Automatically rebuild minified .js/.css files

Problem:
I have been trying to integrate minification of javascript and css files in our VS2010 (.net 4.) projects. From what I hear, .net 4.5 and VS2012 will have minification build into the editor, so it will be as easy as setting a flag it will work. Unfortunately we are sill on VS2010 (.net 4.0).
Let me explain what I want to do and what I dont want to do.
I dont want to do big setups with classes/config file(s)/etc just to minify because all that stuff will have to be loaded on our build machine and even the build xml files might have to be modifies to make it work. Also, once we go to vs2012 and .net 4.5 all these configs/classes/etc will have to be discarded because vs2012 will have the build in functionality.
Here is what I think might be the best option. Since I am using the ScriptManager and it can already pull either a .debug.js (non-minified) or a .js (minified) script based on the build type, it seems all i need to do is to have some sort of (pre?) build event that will re-build a non-minified .js file into a minified one. Obviously the build event will have to call a minication module which would have to be installed on local computer (the YUI Compressor seems very nice). The module would update the minified .js file.
I have been reading about this, but I am getting a little bit lost. There are a lot of third party tools with bunch of setup and classes which I do not want to add.
Did anyone do something similar as I explained about?
If not what is the next best simple solution?
(By the way, if you are going to say move to VS2012/4.5, thats not a solution for us at this point)
Solution:
Thank you Parv Sharma for your answer.
I would just like to explain what I did so that it may help someone in the future.
I installed the Microsoft Ajax Minifier
Created a batch file to add minifer to ENVIRONMENT PATH variables: setx path /m "%PATH%;C:\Program Files\Microsoft\Microsoft Ajax Minifier"
Added the following pre-build events into my project:
ajaxmin $(ProjectDir)Script.js -out $(ProjectDir)Script.min.js -clobber
If Script.min.js does not exist, it will be created by the build event, but it will not be added to the project (not sure how to do that through the events).
When you add a new script file, mynewscript.js, just create a second blank file called mynewscript.min.js and add an pre-build event for it.
Using this approach the only thing you have to do to the build machine is run the Microsoft Ajax Minifier setup package and the batch file. Thats it everything else will be part of your pre-build events.
what you are looking for is probably this
http://ajaxmin.codeplex.com/documentation
by using this you would be able to use this third party tool as the minifier
after downloading the tool you have 2 options
1. edit the MSBUILD file to include building the js as per build event
OR 2. to attach this tool to VS and assign a key compbination to it.. this way you would be able to minify whenever you want just like we do F5 OR Cntrl-Shift-B
Attaching to VS is easy just to to external tools and in the Tools menu and add this tool with the required params

Resources