We Keep Coding

Use abp.services in JavaScript in ASP.NET Web Forms

I know this question was asked before, but my question is about using abp.services methods in JavaScript directly.
Suppose I have:
public interface ISecurityAppService : IApplicationService
{
List<PacsUser_C_Extented> GetAll();
}
public class SecurityAppService : ApplicationService, ISecurityAppService
{
public List<PacsUser_C_Extented> GetAll()
{
// ...
return allUsers;
}
}
All the boilerplate services will be registered nicely as:
public class Global : AbpWebApplication<ImmenseWebModule>
{
protected override void Application_Start(object sender, EventArgs e)
{
base.Application_Start(sender, e);
}
}
As the ASP.NET Boilerplate documentation said, to be able to use the auto-generated services, you should include needed scripts in your page like:
<script src="~/Abp/Framework/scripts/libs/angularjs/abp.ng.js"></script>
<script src="~/api/AbpServiceProxies/GetAll?type=angular"></script>
I know the second line says to use angular controller, but I change it to:
<script src="~/api/AbpServiceProxies/GetAll?v=#(Clock.Now.Ticks)">script>
...still nothing works.
When I want to use getAll in an ASP.NET Web Form's JavaScript code, it gives me:
abp.service is not defined
So how can I use getAll or another method in SecurityAppService in the script element <script>...</script> — not Angular?
Thanks in advance.
Update
When I use an Angular controller and MVC partial view like:
(function () {
var app = angular.module('app');
var controllerId = 'sts.views.security.list';
app.controller(controllerId, [
'$scope', 'abp.services.remotesystem.security',
function ($scope, securityService) {
var vm = this;
vm.localize = abp.localization.getSource('ImmenseSystem');
vm.users = [];
vm.refreshUserList = function () {
abp.ui.setBusy( // Set whole page busy until getTasks completes
null,
securityService.getAll().success(function (data) {
vm.users = data;
abp.notify.info(vm.localize('UserListLoaded'));
})
);
};
vm.refreshUserList();
}
]);
})();
I am able to use that function.
But I want to use that in JavaScript in ASP.NET Web Form pages.

Finally I resolved it by a simple way as the below steps...
1- Run project and use that boilerplate services by Angular and Partial view (MVC)
like Update section in question.
2- After running and redirecting to a view, I went to View page source and see the dependencies scripts .
3- I copied the below scripts source to a page:
<script src="Scripts/jquery-2.2.0.min.js"></script>
<script src="Scripts/jquery-ui-1.11.4.min.js"></script>
<script src="Scripts/jquery.validate.min.js"></script>
<script src="Scripts/modernizr-2.8.3.js"></script>
<script src="Abp/Framework/scripts/utils/ie10fix.js"></script>
<script src="Scripts/json2.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/moment-with-locales.min.js"></script>
<script src="Scripts/jquery.blockUI.js"></script>
<script src="Scripts/toastr.min.js"></script>
<script src="Scripts/sweetalert/sweet-alert.min.js"></script>
<script src="Scripts/others/spinjs/spin.js"></script>
<script src="Scripts/others/spinjs/jquery.spin.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-animate.min.js"></script>
<script src="Scripts/angular-sanitize.min.js"></script>
<script src="Scripts/angular-ui-router.min.js"></script>
<script src="Scripts/angular-ui/ui-bootstrap.min.js"></script>
<script src="Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
<script src="Scripts/angular-ui/ui-utils.min.js"></script>
<script src="Abp/Framework/scripts/abp.js"></script>
<script src="Abp/Framework/scripts/libs/abp.jquery.js"></script>
<script src="Abp/Framework/scripts/libs/abp.toastr.js"></script>
<script src="Abp/Framework/scripts/libs/abp.blockUI.js"></script>
<script src="Abp/Framework/scripts/libs/abp.spin.js"></script>
<script src="Abp/Framework/scripts/libs/abp.sweet-alert.js"></script>
<script src="Abp/Framework/scripts/libs/angularjs/abp.ng.js"></script>
<script src="Scripts/jquery.signalR-2.2.1.min.js"></script>
<script src="api/AbpServiceProxies/GetAll?v=636475780135774228"></script>
<script src="api/AbpServiceProxies/GetAll?type=angular&v=636475780135774228"></script>
<script src="AbpScripts/GetScripts?v=636475780135774228" type="text/javascript"></script>
and use getAll method like:
<script>
var securityService = abp.services.remotesystem.security;
securityService.getAll().done(function (data) {
for (var i in data)
console.log(data[i].username);
});
</script>
I think the important staff to use auto-generated services is :
<script src="api/AbpServiceProxies/GetAll?v=636475780135774228"></script>
<script src="api/AbpServiceProxies/GetAll?type=angular&v=636475780135774228"></script>
<script src="AbpScripts/GetScripts?v=636475780135774228" type="text/javascript"></script>
Thanks for your attention.

you are injecting abp.services.remotesystem.security.
so you can use this namespace to access the functions. open chrome console and write abp.services.remotesystem.security you will see the functions

AssetApplicationService must be implemented by IApplicationService and then check your module load correctly and add correct dependencies in other modules like this.
Check this link. It's worked for me.

How could I pack all js files, CSS , embedded scripts into a js plugin

I wrote a JS plugin to client's website can load comments from our database via CORS method.
My goal is to wrapper my whole code into an easily embeddable plugin.
Just like the facebook js plugin, Google Analytics plugin. They are easy to install on a website.
My plugin depends on other libraries, such as jquery, underscore, backbone, handlebars, and also my scripts and CSS.
I studied Require.js it seems suitable to do this job for me.
I need to generate an all-in-one javascript plugin, e.g.,. "awesome-comments.min.js".
Some articles suggest me to put all the dependent js files with require.config.
But I'm having no idea how could I do other stuff such as my js scripts with require.js.
Is there any similar application or tutorial has the same function. Thanks.
sample_with_requireJS.html
<html>
<head>
<script src="js/require.js" data-main="js/main"></script>
</head>
<body>
<div id="load_awesome_comments"></div>
</body>
</html>
js/main.js
　　require.config({
　　　　baseUrl: "http://mywebsite/assets/",
　　　　paths: {
　　　　　　"jquery": "jquery-9e7b5a8e0157d7776b987d8963c9c786.js?body=1",
　　　　　　"underscor": "~~~",
...
　　　　}
　　});
sample-without-requireJS.html (This is my current workable html sample, mixed with js, css and html DOM)
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"/>
<script src="http://localhost:3001/assets/jquery-9e7b5a8e0157d7776b987d8963c9c786.js?body=1" data-turbolinks-track="true"></script>
<style>
body {
/*background-color: linen;*/
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(document).on('click','.show-more',function () {
var $this = $(this);
....
});
});
window.onload = function(){
.....
}
Handlebars.registerHelper('if_even', function(conditional, options) {
....
});
</script>
<!-- Setup our templates -->
</head>
<body>
<div id="load_awesome_comments"></div>
<script type="text/javascript">
$(document).ready(function() {
function hideFurtherComments(){
.....
}
var Comment = Backbone.Model.extend({
....
});
var Comments = Backbone.Collection.extend({
model: Comment,
url: fetch_comments_url,
initialize: function() {
....
},
deferred: Function.constructor.prototype,
fetchSuccess: function(collection, response) {
collection.deferred.resolve();
},
});
var comments = new Comments();
var CommentView = Backbone.View.extend({
el: $("#comments_section"),
render: function() {
....
},
});
var EmptyCommentView = Backbone.View.extend({
el: $("#empty_comments_list"),
render: function() {
....
},
});
var commentView = new CommentView({
collection: comments
});
var emptyCommentView = new EmptyCommentView({
collection: comments
});
comments.deferred.done(function() {
....
});
});
var og_url = $("meta[property='og:url']").attr("content");
$("#original_news_article_link").attr("href", og_url)
</script>
<script src="js/require.js" defer async="true" ></script>
</body>
</html>

Give a look at https://webpack.github.io and http://browserify.org/. Their purpose is to do exactly what you need. You pack all of your Javascript code, Javascript dependencies and CSS in one sole JavaScript file.
The advantage of this method is that users can make use of your module just by including a single JavaScript file; no need to worry about dependencies.
The drawback is that, given that the dependencies are all included in the single file, if in a page you have three modules packed this way that use jQuery, for example, the jQuery code will be downloaded three times.

How do I pass this JSON data to an autocomplete

Special thanks to Raúl Monge for posting a fully working code for me.
My problem was getting JSON data from a file.json and using this data to autocomplete search on it with JavaScript. The code that finaly got it working for me is the following:
<script>
$(document).ready(function(){
var arrayAutocomplete = new Array();
$.getJSON('json/telefoonnummers.json', function(json) {
$.each(json.personen.persoon,function(index, value){
arrayAutocomplete[index] = new Array();
arrayAutocomplete[index]['label'] = value.naam+" - "+value.telefoonnummer;
});
$( "#search" ).autocomplete({source: arrayAutocomplete});
});
});
This is the html:
<body>
<div id="content">
<input type="text" id="search" />
</div>
And this has to be included in the head:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Thanks stackoverflow!

NEW EDIT CODE WORKING:
<script>
$(document).ready(function(){
var arrayAutocomplete = new Array();
$.getJSON('data.json', function(json) {
$.each(json.persons.person,function(index, value){
arrayAutocomplete[index] = new Array();
arrayAutocomplete[index]['label'] = value.name;
arrayAutocomplete[index]['value'] = value.phoneno;
});
$( "#search" ).autocomplete({source: arrayAutocomplete});
});
});
</script>
Add this in head
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
This is the html
<body>
<div id="content">
<input type="text" id="search" />
</div>
</body>

why not use
var data = [
"Aragorn",
"Arwen",
....
];
since all of those data are labels?

There you go
A working example with the data structure you have.
Just initialize the autocomplete once the JSON is loaded & the data is formatted.
$( "#search" ).autocomplete({source: availableTags});

Your document ready is within your function.
Try to write your function outside of your document ready.
Then write your document ready to call your function.
Some something like this:
function loadJson() {
//alert("Whoohoo, you called the loadJson function!"); //uncomment for testing
var mycontainer = [];
$.getJSON( "data.json" , function(data) {
//alert(data) //uncomment for testing
$.each( data, function( key, val ) {
//alert("key: "+key+" | val: "+val); //uncomment for testing
array.push([key , val]);
});
});
return mycontainer;
}
$(document).ready(function(){
//alert("Boojah! jQuery library loaded!"); //uncomment for testing
var content = loadJson();
dosomethingwitharray(content);
});
Hope this helps!
Also make sure you have jQuery included in your head ( <head> </head> ):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
And add your javascript at the end of your body ( <body> </body> ).
To test if jquery does it's job try this:
<html>
<head>
<title>getting started with jquery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>
<body>
<h1>my page</h1>
<p>this paragraph contains some text.</p>
<!-- javascript at end -->
<script>
$(document).ready(function(){
//show a dialog, confirming when the document is loaded and jquery is used.
alert("boojah, jquery called the document ready function");
//do something with jquery, for example, modify the dom
$("p").append('<br /> i am able to modify the dom with the help of jquery and added this line, i am awesome.');
});
</script>
</body>
</html>
PS. Uncomment alerts for testing stuff, so you can test what happens. If you have space in your document i suggest using $.append to an div that log's all action's so you can see exactly what's going on because alert's in a loop like the .each are quite annoying! more about append: http://api.jquery.com/append/

Node,express,jade rendered pages doesn't data-bind with knockout.js

I'm running a Node server with express which renders jade. I'm trying to make my client side use knockout.js but the view never updates... I don't get any errors in the console and I just can't figure out what is wrong.
Page:
extends layout
block content
script(src='knockout/knockout-2.2.1.debug.js', type='text/javascript')
script(src='js/app.js', type='text/javascript')
p Hi,
strong(data-bind="text: firstName")
rendered html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
<script src="knockout/knockout-2.2.1.debug.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
<p>Hi,<strong data-bind="text: firstName"></strong></p>
</body>
</html>
app.js:
function AppViewModel() {
this.firstName = ko.observable("Bert");
this.lastName = ko.observable("Bertington");
}
ko.applyBindings(new AppViewModel());
is there something I'm missing here or is it just not possible to make this happen with Node.js and express?

You need to make sure you call ko.applyBindings() after the DOM has already been loaded.
Either wrap the code in app.js in window.onload, in jQuery's ready() function, or move your script tag to be below <p>Hi,<strong data-bind="text: firstName"></strong></p>.

// this is my js file
(function () {
//START THE APP WHEN DOCUMENT IS READY
$(function () {
function AppViewModel() {
var self = this;
self.firstName = "Hamza";
// self.lastName = ko.observable("Bertington");
}
ko.applyBindings(new AppViewModel());
});
})();

simple dijit widget fail to initiliaze with AMD programming

I am trying to accomplish simple tasks with dojo's new AMD feature, and I don't get an error on the screen neither the result is being displayed....
I wanted to rewrite the first programmatic example dijit.Tree mentioned in the dojo reference guide:
<script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.Tree");
dojo.ready(function(){
var store = new dojo.data.ItemFileReadStore({
url: "{{dataUrl}}/dijit/tests/_data/countries.json"
});
var treeModel = new dijit.tree.ForestStoreModel({
store: store,
query: {"type": "continent"},
rootId: "root",
rootLabel: "Continents",
childrenAttrs: ["children"]
});
new dijit.Tree({
model: treeModel
}, "treeOne");
});
</script>
to the AMD version:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet" href="js/dojo/dijit/themes/claro/claro.css" />
<script src="js/dojo/dojo/dojo.js" data-dojo-config="async: true"></script>
<script language="JavaScript">
var param = new Array(null,["dojo/dom","dijit/tree","dojo/data/ItemFileReadStore","dijit/tree/ForestStoreModel","dojo/domReady!"]);
require(param[1],function(dom,dtree,ifrs,fsm)
{
var store = new ifrs({url: "js/countries.json"});
var treeModel = new fsm({store: store,query: {"type": "continent"},rootId: "root",rootLabel: "Continents",childrenAttrs: ["children"]});
new dtree({model:treeModel},"treeOne");
});
</script>
</head>
<body class="claro">
<div id="treeOne">
</div>
</body>
</html>
Firebug doesn't whow me an runtime error, or doesn't tell me that something is missing. The page just stays empty. What did I make wrong?!

The main problem is how you build the param array and only use the first value in the array.
Also, dojo.ready is not the same as dojo/domReady!
require(["dojo/dom", "dijit/tree", "dojo/data/ItemFileReadStore",
"dijit/tree/ForestStoreModel", "dojo/ready"],
function(dom, dtree, ifrs, fsm, ready) {
ready(function() {
...
});
});