Thursday, June 6, 2024
Homepage · c#
 Popular · Latest · Hot · Upcoming
58
rated 0 times [  64] [ 6]  / answers: 1 / hits: 20173  / 13 Years ago, fri, march 16, 2012, 12:00:00

I'm having trouble getting C# and JavaScript/jQuery to play nice here.



I have a knockout view model, plain old javascript object... one of its property/methods fires off an .ajax() call, and the url parameter is built using some of its other property values (javascript variables).



This works fine when completely contained in JavaScript, but when deployed as an app to IIS, the relative pathing is hosed.



In MVC3 normally I would use something like @Url.Action and let the server side build the address... but again, the trick is C# is unaware of the changing javascript values.



Code:



var viewModel = {
vendors: ko.observableArray([]),
count: ko.observable(10),
page: ko.observable(1),
filterText: ko.observable(),
submit: function () {
$.ajax({
// works fine, until deploy when it is no longer a site relative URL
url: 'vendors/' + viewModel.count() + '/' + viewModel.filterText(),

// does not work, because C# is unaware of the javascript variables.
//url: @Url.Action(Vendors, Home, new { count = viewModel.count(), filter = viewModel.filterText() })

dataType: 'json',
success: function (data) {
viewModel.vendors(data);
}
});
}
// next: // load sequence starting with (page+1 * count)
// previous: // load sequence starting with (page-1 * count)
};
ko.applyBindings(viewModel);





Question:



My question then is, how can I build the url for the ajax call using the javascript variable values (ex. count, filterText) and still map from the relative root of the application?


More From » c#

 Answers
49

One possibility is to send those javascript values as request parameters:



$.ajax({
url: '@Url.Action(vendors)',
data: { count: viewModel.count(), filter: viewModel.filterText() },
dataType: 'json',
success: function (data) {
viewModel.vendors(data);
}
});


Of course this implies that you are using default routes and the parameters will simply be sent to the server either as query string parameters (if you are using GET) or as part of the POST request body. In both cases you will fetch them on the server the same way:



public ActionResult Vendors(int count, string filter)
{
...
}


Another possibility, if you absolutely insist on having some custom routes for your AJAX requests, would be to use a simple string replace:



var url = '@Url.Action(vendors, new { count = __count__, filter = __filterText__ })';
url = url.replace('__count__', viewModel.count())
.replace('__filter__', viewModel.filterText());
$.ajax({
url: url,
dataType: 'json',
success: function (data) {
viewModel.vendors(data);
}
});

[#86791] Thursday, March 15, 2012, 13 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
gabriel

Total Points: 323
Total Questions: 107
Total Answers: 108

Location: Federated States of Micronesia
Member since Sun, May 16, 2021
3 Years ago
gabriel questions
Sun, Feb 14, 21, 00:00, 3 Years ago
Tue, Dec 8, 20, 00:00, 4 Years ago
Mon, Jun 8, 20, 00:00, 4 Years ago
Tue, May 19, 20, 00:00, 4 Years ago
;