I am using asp.net mvc3. I have two script files on my web site like these:
<script type="text/jscript" src="/SiteName/lib/jquery/menus.js"></script>
<script type="text/jscript" src="/SiteName/lib/jquery/dialogs.js"></script>
These are real paths for these two .js files where the SiteName directory is on the root of my website.
Now when the site rendered, i want to be these pathes like:
<script type="text/jscript" src="/lib/jquery/menus.js"></script>
<script type="text/jscript" src="/lib/jquery/dialogs.js"></script>
As a result, the "SiteName" portion is deleted from the path! but really it is available!
Yet the browser must be able to load these scripts.
I think this must be done by routes.MapRoute or like these!
You can use BundleConfig to achieve this. You can create styles and script bundles that have a virtual path with the added benefit of minification. If you add multiple scripts into one bundle, it'll join and minify both into one virtual script. e.g.:
bundles.Add(new ScriptBundle("~/lib/jquery").Include(
"~/SiteName/lib/jquery/menus.js",
"~/SiteName/lib/jquery/dialogs.js"));
On page render, it'll show up as:
<script type="text/javascript" src="~/lib/jquery"></script>
From memory this wasn't there by default in MVC3, but it looks pretty easy to implement if you refer to this answer: https://stackoverflow.com/a/12754108/769083
Related
I would like to evaluate the features of pivot grid using simple test html without cmd.
I've read the information from those links but I still couldn't install a working environment
https://docs.sencha.com/extjs/6.0/co...ivot_grid.html
https://www.sencha.com/forum/showthr...out-Sencha-Cmd
http://se.sencha.com/setup-guide/
I've downloaded the core framework ('ext-6.0.1-trial.zip')
and pivot addon ('ext-addons-6.0.1-trial.zip') from sencha site
and unpacked them on my test web server:
www.mydummy.server.org/lib/extjs/ext-6.0.0/ <- framework
www.mydummy.server.org/lib/extjs/package/ <- addon
and tested it calling the pivots in kitchensink example with:
www.mydummy.server.org/lib/extjs/ext-6.0.0/examples/kitchensink/index.html
in such setup they start without errors.
The target location of the addon is a bit strange for me,
I was sure I should unpack addon to the package directory of the framework
www.mydummy.server.org/lib/extjs/ext-6.0.0/package/
but then the kitchensink example doesn't work
(kitchensink calls pivot with ../../../package/pivot )
Now I wonder how should I include framework and addon in own html example,
I've tried something like:
<link href="www.mydummy.server.org/lib/extjs/ext-6.0.0/build/classic/theme-neptune/resources/theme-neptune-all.css">
<script src="www.mydummy.server.org/lib/extjs/ext-6.0.0/build/ext-all.js"></script>
<link href="www.mydummy.server.org/lib/extjs/packages/pivot/build/neptune/resources/pivot-all.css">
<script src="www.mydummy.server.org/lib/extjs/packages/pivot/build/pivot.js"'></script>
<script src="www.mydummy.server.org/lib/extjs/packages/exporter/build/exporter.js"'></script>
The links are ok (no http error) but the simple pivot is not rendered
and framework couldn't load further classes:
[Ext.Loader] Some requested files failed to load.
What is the correct setup of extjs and pivot without cmd?
Thank you,
Annie
Couple things here.
For the KitchenSink, if you open up www.mydummy.server.org/lib/extjs/ext-6.0.0/ in your browser you will be shown an index.html. There will be a green button to show the examples which will point to www.mydummy.server.org/lib/extjs/ext-6.0.0/build/examples/index.html (notice the build dir in there). Then if you click on the KitchenSink it will load from www.mydummy.server.org/lib/extjs/ext-6.0.0/build/examples/kitchensink/ (once again, notice the build dir). This is due to the KitchenSink being a Cmd app which will build to that build dir. The examples dir outside the build dir is the development version of the app which is why we still provide it for the source.
Next, about how to use the pivot grid's Cmd package outside of the Cmd package. we build the Cmd package so if you look in the package's build dir you should see a built JavaScript and CSS file that you can load via <script> and <link> in your HTML.
<html>
<head>
<title>Pivot Grid Test</title>
<link href="http://releases/ext/6.0.1.250/build/classic/theme-neptune/resources/theme-neptune-all.css">
<script src="http://releases/ext/6.0.1.250/build/ext-all.js"></script>
<link href="http://localhost/ext-addons-6.0.1/packages/pivot/build/neptune/resources/pivot-all.css">
<script src="http://localhost/ext-addons-6.0.1/packages/exporter/build/exporter.js"></script>
<script src="http://localhost/ext-addons-6.0.1/packages/pivot/build/pivot.js"></script>
</head>
<body></body>
</html>
Notice I have the exporter.js loading before pivot.js and this mostly works except that I do see something that I'd call a bug for us. In pivot.js, we define Ext.ux.ajax.PivotSimlet which extends Ext.ux.ajax.JsonSimlet (which is in the framework's ux package). This is fine to extend like this but PivotSimlet would only be needed if you want to have simulated data in your application (which most wouldn't unless in dev). Two ways you can fix this, remove that class from pivot.js or include the ux's JavaScript/CSS (however that package contains a lot of code that you may not need).
Thanks a lot for your explanation.
I've added these classes to get an working example:
<script src="http://releases/ext/6.0.1.250/packages/ux/src/ajax/Simlet.js"</script>
<script src="http://releases/ext/6.0.1.250/packages/ux/src/ajax/DataSimlet.js"</script>
<script src="http://releases/ext/6.0.1.250/packages/ux/src/ajax/JsonSimlet.js"</script>
I have developed an Asp.Net MVC application in Visual Studio 2010. So far so good. In terms of path resolution for images and script execution, everything runs perfect within Visual Studio. As I am using the default template of MVC I am using "../../Script/*.js" kind of path. After I build the package for deployment and deploy in IIS, the images and the script references stop working. I think it might be a path resolution issue. I tried with "~/Script/.js" but it does not work either. Could somebody suggest why this is happening?
Consider using two things in any of your asp.net MVC projects.
1) Using a Layout for common site elements using _Layout.cshtml and include all your javascript and css files inside that and do not put it on the any other .cshtml pages unless necessary required. see here how to use _Layout.cshtml
2) Second thing always use #Url.Content() directive to define your paths e.g
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<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>
This two way always helps you and never have problem even if you deploy package.
Hope above helps.
This type of problem we get in asp.net when we use URL Rewriting and asp.net mvc have a URL Rewriting by default.
so when you use script or urls and js then you set your path like this .
#Url.Content("~/Your Url or Your script or Your js File ") ;
i think this will help you.
MVC has built in functions that generates url's, so use those instead of hard code url
#Url.Content("~/yourpath")
When you deploy your webapp onto IIS, your site is set to run as Virtual Directory so the website root is no longer the same as the application root, MVC has
ActionLinks,Url.Contents to resolve Url's.
MSDN help
I want to cache 3-4 scripts which is called in master page , how can i do that , any suggestions or tutorial will be help full.
Thanks
Regards
Static files such as javascripts and CSS are already cached by clients browsers. So no need to do anything special. Simply reference them as usual: <script type="text/javascript" src="..."></script>.
I have a question about the <img> tag src attribute.
Is it possible to hide the <img> tag src attribute when viewing the source in a browser?
If it is possible, how? Please tel me if you have any reliable sources.
No, it's not possible.
You can set them dynamically with JS, but you can't hide them. You can store them as base64 encoded strings, and then decode them on the fly which will "hide" them from your page's source.
However, this is still utterly pointless as in the end, the browser still makes an HTTP request to fetch the image.
Simply spoken: This is impossible.
You might try to obfuscate your image src attributes (JS, Base64, etc), but for the browser to be able to show an image, you'll always end up exposing the image URI.
Which, in turn, means that everyone who knows their firebug will be able to see where your cute kitteh image comes from.
Alternative:
Generate One-Time URIs for your images (quite expensive).
Another good feature is to hide the location paths of your important scripts. I found a great npm plugin for this https://www.npmjs.com/package/location-hide
This works also for php href, src, content it will use everything inside src=""
You need only node.js for creating the exported files. It´s easy to use even if you don´t know node.js
It turns
<script src="test/folder/sample.js" type="text/javascript"></script>
<link href="test/stylesheet/perfect-scrollbar.css" rel="stylesheet">
into
<script src="TNANIuTOLZfmLYwaPDIYhcZDVOWKodqYhysaTeQHFPDhYlDLCOtxZqYmkKAhaSwSgbsYOWlpBzVSBtMZKSfwRqvPSqWVlBBuzHR" type="text/javascript"></script>
<link href="gyXeFnOEvZbgTjLvdZRnsyrfhaXqffkDjcdATTouqpIenCalLRXKamuXEtiKbPGCsNrdQIaqTMTNWsLyLFuxygKytaruWzSjKYMq" rel="stylesheet">
And it generate new jquery include codes like this to include your scripts with javascript in a external file
$('[src=\'TNANIuTOLZfmLYwaPDIYhcZDVOWKodqYhysaTeQHFPDhYlDLCOtxZqYmkKAhaSwSgbsYOWlpBzVSBtMZKSfwRqvPSqWVlBBuzHR\']').attr("src", "test/folder/sample.js")
$('[href=\'gyXeFnOEvZbgTjLvdZRnsyrfhaXqffkDjcdATTouqpIenCalLRXKamuXEtiKbPGCsNrdQIaqTMTNWsLyLFuxygKytaruWzSjKYMq\']').attr("src", "test/stylesheet/perfect-scrollbar.css")
Also I would suggest you that you include all of your external javascript codes in 1 single js file. This file you place in the root of your index file that you can make this
<script src="./allinone_external_file.js" type="text/javascript"></script>
Then make right htaccess that nobody can acces this file. You can also make a fake import script for the source code that every body can see. But this file is only a redirect for the real external js file. you make this multiple times as example + use other obfuscation tools. This will protect you from people searching exploits with your javascript codes. I know its no big deal and maybe you can see the jquery include codes if you know how. But anyway its a great protection.
I've setup an Admin area within MVC 3 application and while everything is working when I reference files from the root Scripts, Styles and Images folder, it doesn't work when I created those folders under /Areas/admin/ and referenced them like this:
#Script.Include("~/admin/Scripts/superfish-1.4.8/js/superfish.js")
Please note that this Script.Include helper is something that I have that essentially spits out this:
<script type="text/javascript" src="/admin/Scripts/superfish-1.4.8/js/superfish.js"></script>
So the helper is working and everything is fine when I reference like this
#Script.Include("~/Scripts/superfish-1.4.8/js/superfish.js")
but not when I introduce the area name in there. It results in a 404 Error.
That's because the actual path to your script is the following:
#Script.Include("~/areas/admin/Scripts/superfish-1.4.8/js/superfish.js")
which should render:
<script type="text/javascript" src="/areas/admin/Scripts/superfish-1.4.8/js/superfish.js"></script>
Notice the Areas prefix that I added.