A simple question (I hope):
We have a set structure within our projects for Assets, that being /Assets/img/, /Assets/css/ and /Assets/js/
I've been reading Brad Wilson's excellent article on Unobtrusive AJAX, in which he mentions the files required, FTA:
In addition to setting the flag, you will also need to include two script files: jQuery (~/Scripts/jquery-1.4.1.js) and the MVC plugin for unobtrusive Ajax with jQuery (~/Scripts/jquery.unobtrusive-ajax.js).
Is anyone aware of a way of informing MVC to look in a folder other than /Scripts/ for these files - I don't want to add a whole folder in the root of the project just for these 2 files.
UPDATE
Oh dear, end of the day brain-rot obviously. Sorry all!
Many thanks
In your view, you can use whatever path you want to set up for your scripts:
<script src="#Url.Content("~/Scripts/jquery-1.4.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
I have mine pointed to the Scripts folder as that is what was set up by default, but you can change that to your specific path.
the way that I have seen it done is to create an extension method on the HtmlHelper class for including javascript.
public static string Script(this HtmlHelper helper, string filename)
{
if(!filename.EndsWith(".js")) filename += ".js";
var path = string.Format("<script src='/Assets/js/{0}' type="text/javascript"></script>", filename);
return path;
}
then in your master page you can add this block to the header
<%= Html.Script("jquery-1.4.1") %>
<%= Html.Script("jquery.unobtrusive-ajax.min") %>
Related
I have a Durandal 2 app based on ASP.NET MVC 5 and Web API, with the initial Index.cshtml (on HomeController) being served through the MVC router. From then on it's all regular html views being handled by the Durandal router.
Anyway, I'm trying to use gulp-useref to concatenate all css and js files. I've got everything working and gulp-useref drops the newly concatenated files and an index.cshtml with the updated script and stylesheet references in a dist folder.
Of course, for the application to work I need the updated index.cshtml back in Views/Home/. I have created a "copy" task with gulp that does just that; it overwrites the original index.cshtml and fixes the paths to the concatenated js and css files.
That works as well, but since useref removes the html comments that mark the spot where it should insert the references to the concatenated files, the process is not repeatable.
Let me illustrate with some code.
In my Index.cshtml I have:
<html>
<head></head>
<body>
<!-- build:js js/lib.js-->
<script src="/bower_components/numeral/languages.js"></script>
<script src="/scripts/bootstrap.js"></script>
<script src="/scripts/typeahead.js"></script>
<script src="/scripts/knockout-bootstrap.js"></script>
<script src="/scripts/knockout-extenders.js"></script>
<!-- endbuild -->
</body>
</html>
This is where gulp-useref will place the updated script reference so it will end up looking like this:
<html>
<head></head>
<body>
<script src="/js/lib.js"></script>
</body>
</html>
As you can see, useref removes the html comments so if I overwrite the original index.cshtml with this file, useref will not know where to place the updated script tag. And if I don't overwrite the original index.cshtml, the application will not be using the concatenated files.
I'm new to gulp so I might be going at this in the completely wrong way, but how can I make sure that my /Views/Home/index.cshtml uses the concatenated files in an automated manner?
Or, alternatively, is there a better approach for what I'm trying to do, namely, get everything ready for deployment?
Here are my relevant gulp tasks, for reference:
gulp.task("optimize-for-deployment", function () {
var assets = $.useref.assets({ searchPath: "./" });
var cssFilter = $.filter("**/*.css");
var jsFilter = $.filter("**/*.js");
return gulp
.src(config.index)
.pipe($.plumber())
.pipe(assets)
.pipe(cssFilter)
.pipe($.csso())
.pipe(cssFilter.restore())
.pipe(jsFilter)
.pipe($.uglify())
.pipe(jsFilter.restore())
.pipe(assets.restore())
.pipe($.useref())
.pipe(gulp.dest(config.appDist));
});
// copy the updated index.cshtml to Views/Home/
gulp.task("copy-for-deployment", ["optimize-for-deployment"], function () {
return gulp.src(config.appDist + "index.cshtml")
.pipe($.replacePath(/js\/lib.js/, "/app/dist/js/lib.js"))
.pipe($.replacePath(/style\/app.css/, "/app/dist/style/app.css"))
.pipe(gulp.dest(config.indexLocation));
});
Don't know if this is 'better' approach or the best solution but you could use something like a template for your index file. So you would have an Index-template.cshtml with al your html comments which you use to create your Index.cshtml every time in your gulp tasks.
This way you can overwrite your Index.cshtml and keep your template with al your html comments.
I am new to .net mvc and trying to do the exact thing Sergi. If you modified the default view location scheme to include your dist folder (How to change default view location scheme in ASP.NET MVC?), would .net know to include the dist folder and compile those .cshtml files?
I'm using CKEditor for the first time and trying to do something that I thought would be very simple to do but so far I've had no success.
Essentially I want to place the editor.js, config.js and styles.js in a scripts folder but want the "Skins" folder that contains the css and images to appear within a separate "Styles" folder.
The application consists of a simple view that displays the editor on load.
The code to display the editor is a follows:
angular.element(document).ready(function () {
CKEDITOR.config.contentsCss = '/Styles/CKEditor/';
CKEDITOR.replace('editor');
});
The HTML within my view is as follows:
#section scripts
{
<script src="~/Scripts/ckeditor.js" type="text/javascript"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/Main.js" type="text/javascript"></script>
}
<h2>Index</h2>
<textarea id="editor" name="editor"></textarea>
This is an MVC application and the scripts are rendered at the end of the body within the layout view.
The editor will not display in any browser. As I understand it setting the contentsCss property should do the trick.
If I place the skins beneath my script folder it works fine. I can see in the generated source that it is adding a link to the header pointing to /Scripts/Skins/moono..., but I want it to add a reference to /Styles/Skins/moono...
Is what I am trying to do feasable and if so what am I missing here? I was expecting this to be simple.
As a work around I could just add some routing rules that redirects the relevant request to a different location, but I'd rather get to the bottom of the issue before I do this.
Further information:
My application is an ASP.net 4.5/MVC 4 app.
I'm referencing angular because I'll be using that once I've sorted this issue. I have tried removing all references to angular but the problem still persists.
I've tried setting the contentsCss property in the following ways:
Directly using CKEDITOR.config.contentsCss
Within the config.js file. The sample assigns an anonymous function to CKEDITOR.editorConfig and in there you can manipulate congif entries.
Passing a config parameter when calling the "replace" method on the CKEditor object.
I've tried manipulating the contentsCss property both before and after the call to replace.
I'm using the latest version of CKEditor (4.2)
Thanks to #Richard Deeming, I've found the answer.
I'm using the default moono style, so I needed to set the CKEDITOR.config.skin property as follows:
CKEDITOR.config.skin = 'moono,/Styles/CKEditor/Skins/moono/'
My final code now looks like this:
angular.element(document).ready(function () {
CKEDITOR.config.skin = 'moono,/Styles/CKEditor/Skins/moono/';
CKEDITOR.replace('editor');
});
You have to set the url to the actual folder containing the skin itself (I thought CKEditor might append skins/mooono itself but it doesn't).
I also found that you must include the final '/' from the URL.
Looking at the documentation, you need to specify the path as part of the skin name:
CKEDITOR.skinName = 'CKeditor,/Styles/CKeditor/';
According to the answer provided by REMESQ on this question: Is it possible to use razor layouts with Orchard CMS and bypass the theming
I was able to have separate layout and pages for a module bypassing Orchard's themes and layouts. But having problem referencing the cs,js script files (located in different folders of the module). Getting 404 NotFound error.
I tried referancing in the following way:
#Script.Include("~/Scripts/jquery-1.9.1.js")
But cant get the correct reference path rendered attached picture
Your URL is wrong - it should be either:
jquery-1.9.1.js. Without leading tilde and Scripts/. Orchard will make sure the final URL will lead to /Scripts folder in your current module, or
~/Modules/Your.Module/Scripts/jquery-1.9.1.js
it works if written in this way:
<link href="~/Modules/ModuleName/Styles/site.css" rel="stylesheet" type="text/css" />
For the image tags in html we can write like this:
<img alt="" src="~/Modules/ModuleName/Styles/images/for-rent.jpg" />
I'm looking into RequireJS but I'm uncertain about some things.
I understand how I can load all my dependencies with main.js.
But do I need to add any logic to work with those dependencies in main.js?
To me, main.js seems like a document.ready state and you enter logic there when the document has loaded, right?
And for other pages and partial views, do I need to create multiple main.js or can I just reference loaded functions in dependencies from the views in a <script> for example?
Update -
I've added an example of using RequireJS with modular HTML components. Build tool example included - https://github.com/simonsmith/modular-html-requirejs
I have also written a blog article about this - http://simonsmith.io/modular-html-components-with-requirejs/
The approach of just using main.js for everything is probably more suited to a single page application.
The way I've handled this situation is to only include common site-wide JS in the main.js file:
On every page:
<script src="require.js" data-main="main"></script>
main.js
require.config({
// config options
});
require(['jquery', 'common/ajaxLoader', 'common/someOtherModule'], function($, ajax, otherModule) {
// Modules that do stuff on every page are instantiated here
});
page1.html
<script>
require(['scripts/page1']);
</script>
page1.js
require(['jquery', 'page1Module'], function($, module){
// page1 specific stuff here
});
The above example is just one of a couple of ways to handle it. Note the difference between loading a plain JavaScript file and a module.
A rule of thumb I follow is to keep all reusable modules (or Classes if it makes it easier to conceptualise) inside a define with their own dependencies etc and then use require to grab those modules, use their methods or interact with them in some way.
Using this pattern will almost certainly require use of the domReady module that is a separate plugin for RequireJS. Use this instead of a ready function in jQuery for example, as it allows modules to begin downloading before the DOM is ready which reduces the wait for your code to execute.
Edit You may wish to see another example of multi-page application in the RequireJS repo
I have recently gone through the exercise of setting up RequrieJS with automatic build optimization in an ASP.NET MVC application. There are a lot of helpful blog articles such as Simon's that are a great reference. From an ASP.NET perspective one of the most useful I found in terms of configuring the RequireJS optimizer for multi-page ASP.NET applications was Making RequireJS play nice with ASP.NET MVC.
Using the great information already out there I have put up my own ASP.NET MVC RequireJS example on GitHub. Much of what is included is similar to examples already out there, however to address the issue of partial views, and multi-page require dependencies I have taken a slightly different approach.
_Layout.cshtml
The most notable difference from existing examples is the creation of a custom RequireViewPage that exposes methods to pass configuration data to RequrieJS as well as reference page specific require dependencies.
So your _Layout.cshtml will look much like what you'd expect with:
<head>
...
#RenderModuleConfig()
<script type="text/javascript" src="#Url.Script("vendor/require.js")" data-main="main"></script>
</head>
<body>
...
Views & Partials
To wire up views (and in my case knockout view models), an additional script fragment has been added to the bottom of _Layout.cshtml as follows
...
#RenderSection("scripts", required: false)
<script type="text/javascript">require(['main'], function () { require(['lib/knockout/knockout.require']); });</script>
</body>
This will ensure that for any view dependency, the main module has been loaded (assuming dependencies for main have being defined in main.js and then allows for view specific dependencies to be wired up via data attributes.
<div data-require="#MainModule"> ... </div>
<div data-require="#Module("address")"> ... </div>
<div data-require="view\home\index\model"> ... </div>
For a full explaination of the design and choices, see the README on GitHub
I have one MVC view page in which I show different links and I am using ThickBox to show a different page when ever one of these links is clicked. In these pages, I am using jQuery functions to do some changes, but I am not able to resolve the jquery file path on the view pages. I need to give absolute path something like "http://test.com/js/jquery.js". But is there any way to make it relative?
I also tried getting the host url and using <%=%> and <%# %> but none is working.
Any help?
Thanks
Ashwani
This is when you run the MVC app from visual studio? If so set you're MVC application's virtual path to start at "/" instead of the default that is probably your project name.
This can be done by right-clicking on the MVC project in the solution explorer > Click Properties > Click the Web tab > Type "/" (without the quotes) in the Virtual path textbox. Then use Andrew Florko's suggestion of leading it with a slash <script src="/js/jquery.js"> </script>
alt text http://img707.imageshack.us/img707/3765/virtualpath.jpg
What about trying something like:
<script src="<%=Url.Content("~/js/jquery.js")%>" type="text/javascript"></script>
Maybe you should try
<script src="/js/jquery.js" ...
instead of intellisence-generated path with ".."
<script src="../../js/jquery.js" ...