I have two modules that I want to connect by navigating from one to the other. Since there are going several parameters to be passed, I want to use query string. Is there a way to use the built-in router to navigate to a module and have my object arguments being passed like
var params = {
param1: "parameter",
param2: "anotherparameter"
}
router.navigate("theothermodule", params);
or do I have to manually parametrize the object into the url string and pass it to router.navigate like
router.navigate("theothermodule?" + $.param(params));
Another solution would be :
var params = {
param1: "parameter",
param2: "anotherparameter"
}
//notes : this object can contain arrays like knockout observable()
//or observableArray();
1.- create the object (params) in shell.js and map it to your route definition like
bellow :
{ route: 'routestr/:id', moduleId: 'viewmodels/adir/mymodul', title: 'je suis',
hash: '#routestr', nav:3, routobj: params }
2.- you could update, even add new members to your object from anywhere before calling this route, by hacking the object from the route.
var myrouteconfig = router.activeInstruction().config;
myrouteconfig.param2 = newvalue;
myrouteconfig.newdlyParam = value;
router.navigate("#routestr/" + id);
3.- Then, in the receipt module :
var activate = function (id) {
//var myid = parseInt(id); //noelem rubriq
var myrouteconfig = router.activeInstruction().config;
var mycallobject = myrouteconfig.params; //your object params
var valparam2 = mycallobject.param2; // your param2 last value
......
}
You have to manually parametrize the object into the url string and map in router.activate (http://durandaljs.com/documentation/Using-The-Router/).
However you can share data with Events(http://durandaljs.com/documentation/Leveraging-Publish-Subscribe/) or Activation Data property in Composition binding(http://durandaljs.com/documentation/Using-Composition/).
Related
Javascript
I have a method as follows,
function OpenRecord(id ,module ,screen) {
var url = '#Url.Action("OpenRecord", "Management", new { id = "_id", module = "_module",screen = "_screen" })';
url = url.replace("_id", encodeURIComponent(id));
url = url.replace("_module", encodeURIComponent(module));
url = url.replace("_screen", encodeURIComponent(screen));
window.location.href = url;
}
Controller
public ActionResult OpenRecord(string id, string module, string screen)
{
Int64 someID = Convert.ToInt64(id);
/*some act**/
return RedirectToAction(screen, module, new { id = someId});
}
When I run this i get id and module but screen param is passed null. When i inspect client side on chrome dev tools, i see all the parameters on javascript method are filled and the final url in url variable as follows;
/Management/OpenRecord/112?module=Customer&screen=MUSTRTANML
I guess that amp&; entity spoils my controller to get the last param but i am not sure and i don't know how to solve this.
Thanks in advance.
Simply wrap your Url.Action in Html.Raw(). Or you can go with replacement approach further - url = url.replace("&", "&"). Whatever you like, personally I would proceed with Html.Raw
you need to construct your url string with values
var url = '#Url.Action("OpenRecord", "Management", new { id = "_id", module = "_module",screen = "_screen" })';
this is wrong, it should be
var url = '/Management/OpenRecord?id=' + _id + '&module='+ _module + '&screen='+ _screen;
the above will pass the values of the variables rather than names , you cannot execute Url.Action as part of JavaScript this is Razor code
So I have a Resource defined as follows:
angular.module('questionService', ['ngResource'])
.factory('QuestionService', function($http, $resource) {
var QuestionService = $resource('/api/questions/:key', {}, {
query: {
method:'GET',
isArray:true,
},
save: {
method: 'POST',
}
});
return QuestionService
});
And later on I take some form input and do the following
var newQ = {
txt: $scope.addTxt
};
QuestionService.save(newQ)
The server responds to the POST request both by reissuing the JSON for the object and setting the location header with the new unique ID. The problem is that Angular is not saving that returned JSON or the location header into the object and it is not getting set with the ID from the server for future operations. I've tried a number of things such as:
transformResponse: function(data, headersGetter) {
locationHeader = headersGetter().location;
key = locationHeader.split('/').slice(-1)[0];
data.key = key;
return data;
}
However the returned data item doesn't seem to be getting used. Am I missing something? This seems like a pretty common use case for interacting with a REST api.
Thanks!
You need to have a success handler to assign the new id to newQ manually:
QuestionService.save(newQ, function(data) {
newQ.id = data.id;
});
But there is a better to achieve the same. Because your QuestionService is a resource class object, you can instantiate your newQ like this:
var newQ = new QuestionService({text: $scope.addTxt});
Then, call $save() of newQ:
newQ.$save();
Now newQ should have the new id returned by the server.
I have Asp.Net server with WebApi2 running, i use Ok(number) to return content, and it return for example '6' as result. once it return, the angular show an object containing promise and state, and prototypes and a deep repeated hierarchy, but no value, no '6'.
So i went to see where the data goes, for seeing where the data is i define a transform, and i see awo the data, but it's not a json...
later i change it to following, and now i have a obj in my success function, which has sub property called 'returnValue' (as i defined), and this object hold my value.
transformResponse: function(data, header){
var obj={};
obj.returnValue=angular.fromJson(data);
return obj;
},
I have a javascript function with remotefunction,,, in that remotefunction i want to pass map has parameter and i want to use that map variable in controller action,, i don't know how to pass that in params of ramotefunction and to use it in that particular controller action...
jQuery(document).ready(function(){
alert("checking for checkbox");
var countryId = document.getElementById("countryId").value;
jQuery('#groupdelete').on('click', function(){
var names = {};
alert("*********");
jQuery('input:checked').each(function() {
alert(jQuery(this).attr("id"));
if(jQuery(this).attr("id")) {
var id=jQuery(this).attr("id")
var costId = "c"+id
var ntb = document.getElementById(costId).value;
alert(ntb);
names[id] = ntb;
}
});
alert(names[1]);
})
${remoteFunction(action:'addLabServiceToCountry', controller:'country', params:'\'names=\'+names')}
})
params:'\'names=\'+names' which is not working properly, how to pass map variable in params of remotefunction and in contoller action how to access that.
Try this:
${remoteFunction({action: "addLabServiceToCountry", controller: "country", params: names});
Then in remoteFunction() you need to iterate through params to get all mapped names.
Or you can convert names to a string:
var namesStr = names.join(',');
and then pass the string:
${remoteFunction({... , params: namesStr});
Here is the code that I am using to set the api url:
var clientUrl = '#Url.RouteUrl("ApiControllerAction", new { httproute="", controller = "Client"})';
In my route.config the route looks like this:
routes.MapHttpRoute(
name: "ApiControllerAction",
routeTemplate: "api/{controller}/{action}/{id}"
);
And the action on my controller that I am trying to hit is this:
[ActionName("clients")]
public IQueryable<Client> GetClients(int id)
{
return Uow.Clients.GetClients(id);
}
I have a function in javascript that is trying to hit this api, but I am getting a 404:
var getClients = function (id) {
return $.ajax(clientUrl + "/clients/" + id)
};
When I call getClients(1) the url is trying to hit is this:
localhost:12345/clients/1
Rather than my expected url of this:
localhost:12345/api/client/clients/1
Any idea where this is going wrong? I had this working in another project and can't remember if there is something else I am supposed to do. If I inspect the javascript the clientUrl = ''.
I came across this answer How to create ASP.NET Web API Url? which helped.
Example code for my answer here on GitHub
You can alter your #Url.RouteUrl code to include both the action name and the "ID" which currently appears not to be optional for your action route... this is probably why it is failing to find a match and returning an empty string. So try:
var clientUrl = '#Url.RouteUrl("ApiControllerAction", new { httproute="", controller = "Client", action = "clients" id=#... })';
NB. id=#... })'; at the end ... being what ever the id is going to be var or property on a model etc...
Or
You could of course just make ID optional which will also work:
config.Routes.MapHttpRoute(
name: "ApiControllerAction",
routeTemplate: "api/{controller}/{action}/{id}",
defaults: new { id = RouteParameter.Optional }
Or
You may find it cleaner to avoid using an action... clients could live in its own controller ClientsController and you can use the routes and defaults to route to it:
routes.MapHttpRoute(
name: "ApiControllerAction",
routeTemplate: "api/client/clients/{id}",
defaults: new { controller="Clients" }
);
Then this should give you the required response:
var clientUrl = '#Url.RouteUrl("ApiControllerAction", new { httproute="", controller = "Clients" })';
//api/client/clients/
and...
var clientUrl = '#Url.RouteUrl("ApiControllerAction", new { httproute="", controller = "Clients", id=#... })';
//api/client/clients/x
Try to set the clientUrl like this:
var clientUrl = '#Url.RouteUrl("ApiControllerAction", new { httproute="", controller = "Client", action = "clients"})';
And then in change getClients to this:
var getClients = function (id) {
return $.ajax(clientUrl + "/" + id)
};
I have a Clock model in Backbone:
var Clock = Backbone.Model.extend({});
I'm trying to get an instance of that that has the latest information from /clocks/123. Some things I've tried:
a "class"-level method
Clock.fetch(123)
// TypeError: Object function (){ ... } has no method 'fetch'
creating an instance and then calling fetch on it:
c = new Clock({id: 123})
c.fetch()
// Error: A 'url' property or function must be specified
a collection
I tried creating an AllClocks collection resource (even though I have no use for such a thing on the page):
var AllClocks = Backbone.Collection.extend({
model: Clock,
url: '/clocks/'
});
var allClocks = new AllClocks();
allClocks.fetch(123);
// returns everything from /clocks/
How do I just get one API-backed Clock?
Try specifying urlRoot in the model:
From the docs:
var Book = Backbone.Model.extend({urlRoot : '/books'});
var solaris = new Book({id: "1083-lem-solaris"});
solaris.fetch();
Your second approach is the approach I have used. Try adding the following to your Clock model:
url : function() {
var base = 'clocks';
if (this.isNew()) return base;
return base + (base.charAt(base.length - 1) == '/' ? '' : '/') + this.id;
},
This approach assumes that you have implemented controllers with the hashbang in your URL like so, http://www.mydomain.com/#clocks/123 , but it should work even if you haven't yet.
I personally recommend, following the Model#url method documentation
model = new Model(id: 1)
view = new View(model: model)
collection = new Collection([model])
model.fetch()
in your collection remember to add the collection url:
url: "/models"
and in your View's initialize function do:
this.model.bind("change", this.render)
this way backbone will do an ajax request using this url:
"/models/1"
your model will be updated and the view rendered, without modifying Collection#url or Model#urlRoot
note:
sorry this example came out in coffee script, but you can easily translate it to js adding var statements
var Person = Backbone.Model.extend({urlRoot : '/person/details'});
var myName = new Person({id: "12345"});
myName.fetch();
As a result you make a Ajax request on the
URL http://[domainName]/person/details/id
and you have the JSON response back.
Enjoiiii !!!
...and do this if you don't want the trailing slash on the model urlRoot:
url : function() {
return this.urlRoot + this.id;
},
You probably should be accessing the object trough a collection and keeping it in the collection all the time. This is how to do it:
var AllClocks = Backbone.Collection.extend({
model: Clock,
url: '/clocks/'
});
var allClocks = new AllClocks();
my_clock = allClocks.add({id: 123});
my_clock.fetch()
I want to use RESTful url,but I couldn't understand why 'postId' can't be added to base url.
var PostModel = Backbone.Model.extend({
urlRoot: 'getBlogPost',
defaults: {
postTitle: "defaultTitle",
postTime: "1970-01-01",
postContent: "defaultContent",
postAuthor: "anonymous"
}
});
var post = new PostModel({
postId: 1
});
alert(post.url());
Then I know only after I set 'idAttribute' as 'postId' in Model can I get the right url.
like this:
var PostModel = Backbone.Model.extend({
idAttribute: 'postId',
urlRoot: 'getBlogPost',
defaults: {
postTitle: "defaultTitle",
postTime: "1970-01-01",
postContent: "defaultContent",
postAuthor: "anonymous"
}
});