How to get a value of a function from a javascript file to an ASP.NET MVC view?

Question

i am trying to separate my view from java script,in my view im calling a function in js file to create a chart,

Here is my js file and the function:

 function pieChartForInterventions(chartID,pieChartData) {

chartID.kendoChart({
    dataSource: {
        data: pieChartData
    },
    series: [{
        type: "pie",
        field: "list",
        categoryField: "mm",
        padding: 0,
        labels: {
            visible: true,
        }
    }],
    seriesClick:onDb,
    tooltip: {
        visible: true,
        template: "${ category }"
    }
    ,
    legend: {
        position: "bottom"
    }
});

}

 function onDb(e) {    
 var _clicked = e.category;

  }

here is my view:

  pieChartForInterventions($("#pieChart"), result);    

now the problem is,as you see in my function i have a onDb() function whick invokes when i click on my chart to get the value of what i clicked,i need this value to send it back with a Ajax call via my view,how should i have this value in my view?

Answer 1

Please elaborate a bit more, where exactly in your view do you require this value? OR what do you want to do with this value after receiving it in the view?

If you have something available in javascript, it means you already have it in your “View”, since the only place your javascript logic is executing is in your view.

From your onDb(e) function, you can:

1) Return the value and use it anywhere you need within the view via javascript logic.

In your sepearated js file you may have a function like:

function onDb(e) {    
   var _clicked = e.category;
   return _clicked;
}

Somewhere in your view (.cshtml) you may do something like:

<script type="text/javascript"> // Get 'e' from wherever you need var requiredValue = onDb(e); // Any Javascript / JQuery / Ajax logic ... </script>

2) If the returned value is required at the server side, you can send an AJAX request etc. See the following on how to send an AJAX request (MVC jquery ajax call with input parameter)

==== UPDATE AFTER COMMENT ====

You can access the onDb function the same way as I mentioned in the second code snippet. However, in that case getting the input parameter “e” would require some scripting.

Alternatively, what’s even easier in this scenario is that you can move the “Ajax Call” inside onDb(e) function. Update the onDb(e) function as follows …

function onDb(e) {    
var _clicked = e.category;

$.ajax({
    type: "POST",
    url: '@Url.Action("ControllerName", "ActionName")',
    contentType: "application/json; charset=utf-8",
    data: { valueToSend: _clicked },
    dataType: "json"
    });
}

And on your server side you would have some action like:

public class ControllerName : Controller
{
    [HttpPost]
    public ActionResult ActionName(string valueToSend)
    {
        //The value you needed is stored in the input paramater 'valueToSend'
        //... process however you want and return any ActionResult ...
        return Json("success", JsonRequestBehavior.AllowGet);
    }
}