Setting current controller name to a knockout observable on page load using asp.net mvc - asp.net-mvc

Question

I have the following view model in a separate .JS file:
var vm = {
ControllerName:ko.observable(),
getData: function () {
$.ajax({
type: 'GET',
url: '/'+this.ControllerName+'/GetData',
contentType: "application/json; charset=utf-8",
dataType: "json",
data:jsonData,
success: function(data){
// code to bind the data
}
});
} }
$(function () {
ko.applyBindings(C1ViewModel);
C1ViewModel.getVisibleAndInvisibleColumns(); });
I have to set the ControllerName observable with the current asp.net mvc controller name and use this observable in the getData function so that the controller name is always dynamic. Since we cannot execute server side razor code in .JS files I would have to pass the current controller name from my markup file where I can get the current controller name by writing server side razor code.
My question is how can I pass a value from my html to my view model, set it in an observable and use it as a global value throughout my view model? Is there any other way to achieve what I am trying to do above?

Answer 1

You can use script tags in your markup to declare a JS variable that sets the controller name. You can then access this is your .JS file:
CSHTML
<script>
var urlForController = "#Url.RouteUrl("DefaultApi",
new { httproute = "",
controller = "ControllerNameHere",
action = "GetData" })";
</script>
You can add additional logic in this code if the controller name varies on some specific criteria.
AJAX Call in JS:
$.ajax({
type: 'GET',
url: urlForController,
contentType: "application/json; charset=utf-8",
dataType: "json",
data:jsonData,
success: function(data){
// code to bind the data
}
});