I am trying to include angularjs framework into a existing web forms application. But I am not able to access the angular directives from the aspx pages. I am sure there is some part of settings that I am missing. I added the angularjs package using the nuget installer. It created a directory "Scripts" and dumped all the angularjs related files. Can any body help me in putting up the settings correct so that I can make use of angularjs directives on the apsx pages.
Thanks in advance for the help and suggestions.
Include the script:
<script src="angular.js" type="text/javascript"></script>
Add ngApp to the body tag:
<body ng-app="app">
...
</body>
In your script define your module:
<script>
var app = angular.module('app',[]);
</script>
Related
I am working on ASP.NET core 3.1. I want to do a simple application. I have a very basic problem but I cannot find a good way to solve it.
I have the menu of the application in a Shared view _Layout.cshtml. In this view i am loading .js and .css libs with:
<script src="assets/libs/jquery/dist/jquery.min.js"></script>
Everything is working fine, the menu is correctly displayed, and I can display my Index.cshtml with the #RenderBody().
The problem is that when I want to go to another page using:
<a asp-area="" asp-controller="Home" asp-action="Privacy" aria-expanded="false"><span>Privacy</span></a>
or
<span>Privacy</span>
the page will be loaded trying to fetch the libs from :
<script src="Home/assets/libs/jquery/dist/jquery.min.js"></script>
And it won't find them.
I would like to know what is the best practice to avoid this issue.
Thank you for your help.
In asp .net core static files should be placed inside wwwroot folder. Thats why put static files inside wwwroot folder and give reference to _Layout.cshtml like this,
<script src="~/JavaScript/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="~/CSS/styles.css"/>
I am trying to integrate ckfinder with ckeditor in MVC Project.
Both CKfinder and CkEditor Unzip folders copied into Solution Root.
CkEditor works fine. but CkFinder connector gives error when try to click on Browse Server button.
Urls script like this
<script type="text/javascript">
var editor = CKEDITOR.replace('editor1', {
filebrowserBrowseUrl: '/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl: '/ckfinder/ckfinder.html?type=Images',
filebrowserFlashBrowseUrl: '/ckfinder/ckfinder.html?type=Flash',
filebrowserUploadUrl: '/ckfinder/connector?command=QuickUpload&type=Files',
filebrowserImageUploadUrl: '/ckfinder/connector?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl: '/ckfinder/connector?command=QuickUpload&type=Flash'
});
CKFinder.setupCKEditor(editor, '/ckfinder/');
</script>
Can anybody share an easy integration method of ckfinder in MVC?
I also tried to follow all such tutorials
https://ckeditor.com/docs/ckfinder/ckfinder3-net/integration.html
but have no luck
In my ASP.NET app, I have several pages/scripts that I can't bundle - PDF.js viewer page or MediaElement video loader.
But sometimes I do minor amendments to those scripts; I need to version/cache-bust the respective script files, so these are auto-reloaded for users. In PDF.js viewer.html, for example:
<script src="viewer.js?v=1.1"></script>
The gotcha is: how to make ASP.NET/IIS auto-inject the version info into the static HTML files that it serves? Any solutions?
Thank you in advance.
Do you use any type of task runner?
I use Gulp, and whenever I build, I have a task to replace my version number with something unique to ensure the latest version is always requested.
So in my Index.cshtml:
<script type="text/javascript" src="~/bundle.js?v=$$VERSION" charset="utf-8"></script>
And in my gulpfile.js:
gulp.task('version', function () {
return gulp.src('index.html')
.pipe(replace('$$VERSION', Date.now()))
.pipe(gulp.dest('dist'));
});
I am working on an aspnet MVC 3 project under visual 2012. I hava an Home/Index.aspx file which is referencing a remote javascripts ressource and css ressource like this:
<link rel="stylesheet" href="http://mottie.github.io/tablesorter/css/theme.bootstrap.css"/>
This is working without problem.
Now in order to boot my application pages loading, a have made a copy of those files in a local folder (Home/tablesorter) but when I reference them again it's not working:
<script type='text/javascript' src="tablesorter/js/jquery.tablesorter.js"></script>
I have tried this :
<script type='text/javascript' src="<%= Url.Content("tablesorter/js/jquery.tablesorter.js") %>"></script>
but without success.
Could you please tell me what's wrong with my code.
Thank you in advance (I am newer in .net)
Drag the JS or CSS file from folder and drop on aspx page it will automatically add the correct path.
Maybe the solution of my problem is contained in the question, but basically
I'm new to ExtJs 4 MVC and am having some difficulty where to place my JSPs.
I'm using Spring MVC using the Request Mapping annotation.
I'm having relative path problems with ExtJs App.JS finding my controller.
I usually put my JSPs under WEB-INF/views and my ExtJs 4 App is in WebContent/app.
I am trying to set up the example as shown on:
http://docs.sencha.com/ext-js/4-0/#/guide/application_architecture
and in the example the index.html is contained in the app package.
So I have a view called WEB-INF/views/sample-view.jsp and this includes the app.js script, which works fine.
My app has a controller like the example, and this is the problem, because it seems to try to find that internally in ExtJs using the appFolder, and controllers.
This resource can't be found, because my view is in another package all together. Does this make sense ?
Should I just move my view out of WEB-INF ? And if so will Spring MVC complain?
Thanks,
Lisa
For the first attempt at getting this running it is easiest to use all static files just to keep things simple. Once the app is running from static html and js files, migration can then be made to use the spring mvc and jsp pages.
To start be sure there is a folder named resources under the webapp folder, assuming webapp is the parent of your existing WEB-INF folder.
The basic starting folder structure for using a static html page will be:
webapp
- resources
-- app
-- css
--- ext-all.css
-- sass
-- themes
- WEB-INF
-- spring
-- classes
-- views
index.html
app.js
ext-all-debug.js
In WEB-INF there is likely a spring folder with an mvc-config.xml file or similar. In that config file the resources folder needs to be designated for serving static content by using the resources tag. Likely, the first mvc:annotation-driven tag is alrleady in the config file as in this snipped below. Add the resources tag noted below into the config file.
<!-- Configures support for #Controllers -->
<mvc:annotation-driven />
<!-- Handles HTTP GET requests for /resources/** by efficiently serving up static resources in the ${webappRoot}/resources directory -->
<resources mapping="/resources/**" location="/resources/" />
With this in place the resources folder can serve the index.html file much like setup of the Sencha example.
All of this is setting you up to be able to build the first example from a url like:
http://localhost:8080/resources/index.html
When downloaded and extracted, the Ext JS zip, contains a resources folder. Copy the subfolders of that folder into the webapp/resources folder. Also copy ext-all.debug.js to the webapp/resources folder.
Then create index.html in webapp/resources with this content similar to the Sencha tutorial:
<html>
<head>
<title>Static Account Manager</title>
<link rel="stylesheet" type="text/css" href="./css/ext-all.css">
<script type="text/javascript" src="./ext-all-debug.js"></script>
<script type="text/javascript" src="./app.js"></script>
</head>
<body></body>
</html>
Create app.js in the webapp/resources folder as the following snippet and enough is in place to be up and running with the single panel configured in app.js. From this point the tutorial is easy enough to port over to this setup.
Ext.application({
name: 'AM',
appFolder: 'app',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'panel',
title: 'Users',
html : 'List of users will go here'
}
]
});
}
});
After that static html file is running correctly, a jsp can be used from the view folder and will have content like this:
<html>
<head>
<title>JSP Account Manager</title>
<link rel="stylesheet" type="text/css" href="./resoures/css/ext-all.css">
<script type="text/javascript" src="./resoures/ext-all-debug.js"></script>
<script type="text/javascript" src="./resoures/app.js"></script>
</head>
<body></body>
</html>
a bit off topic, but if you are going to use Spring MVC might as well use Grails - you will save yourself a lot of typing and figuring out bunches of config files.