I have an angular2 app running on top of .NET project. We access the app at http://example.com/index/app.
But immediately after the angular2 app starts running and appearing, our URL is rewrited in the browser as: http://example.com/#/dashboard for example.
Trying to go directly to http://example.com/index/app/#/dashboard redirects or more precisely rewrite our url to http://example.com/#/dashboard an displays the app.
How can I prevent this behavior to constantly have the full URI? http://example.com/index/app/#/dashboard Angular2 part being only the after # one.
Your base path is wrong. You have to add
<base href="~/index/app" />
to your html (index.html, index.cshtml, or _Layout.cshtml, depending on the way you have done it) document. Remove the ~ if you are not using Razor views.
Update based on comments
You'll have to define a section within your _Layout.cshtml which will render it on a per view basis.
in _Layout.cshtml:
<head>
...
#RenderSection("base", required: false)
</head>
in your Views/Index/App.cshtml:
#section base {
<base href="~/index/app"/>
}
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 building a simple web site in Dart Web UI. Each page has a header (with site navigation) and a footer. I've used components for the header and footer, and each page looks something like this:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="import" href="header.html">
<link rel="import" href="footer.html">
</head>
<body>
<header-component></header-component>
Page content...
<footer-component></footer-component>
</body>
</html>
This works well, but the components aren't inserted to the HTML itself but loaded dynamically from Dart (or JavaScript) code. Is there some way to have the Web UI compiler insert the header and footer to the HTML file itself so that they would be visible to search engines and to users who have JavaScript disabled?
There isn't a direct way to do this.
This is typically a server-side task: the server takes care to generate the required HTML.
Web components are all about client side, so they work on what's already delivered to the browser.
However, build.dart scripts is executed each time a file in your project changes so you can extend the script to get what you want. I don't think this is a good approach, but it solves your problem.
First add the following placeholder to the target html file (in my case web/webuitest.html):
<header></header>
Now add a header.html file to your project with some content:
THIS IS A HEADER
Now extend the build.dart script so it will check if the header.html was modified, and if it was, it will update webuitest.html:
// if build.dart arguments contain header.html in the list of changed files
if (new Options().arguments.contains('--changed=web/header.html')) {
// read the target file
var content = new File('web/webuitest.html').readAsStringSync();
// read the header
var hdr = new File('web/header.html').readAsStringSync();
// now replace the placeholder with the header
// NOTE: use (.|[\r\n])* to match the newline, as multiLine switch doesn't work as I expect
content = content.replaceAll(
new RegExp("<header>(.|[\r\n])*</header>", multiLine:true),
'<header>${hdr}</header>');
// rewrite the target file with modified content
new File('web/webuitest.html').writeAsStringSync(content);
}
One consequence of this approach is that rewriting the target will trigger build.dart once again, so output files will be built twice, but that's not a big issue.
Of course, this can be made much better, and someone could even wrap it into a library.
Currently, no, it's not possible. What you want is server-side rendering of those templates so that you can serve them directly to the client when they request your pages (including search spiders).
You might want to keep track of this issue however: https://github.com/dart-lang/web-ui/issues/107?source=c
When it's finished things are looking better.
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" ...