0

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?

Improve this question
7
  • What you mean by i need this value to send it back with a Ajax call via my view ? Commented May 10, 2018 at 15:00
  • @Shyju in my chart ,when i click on a series,i get its value,then i need this value to send it back to controller ,because i will create another chart based on this value Commented May 10, 2018 at 15:03
  • So make the ajax call and initialize the chart in js. Commented May 10, 2018 at 15:06
  • @Shyju how to use "@Url.Action("") over there?then my view becomes useless,is the way i should work? Commented May 10, 2018 at 15:10
  • You can execute the Url.Action in the view and pass the generated relative url via js variables to your external js. See How do I make JS know about the application root?. Another optio is to set data attribute to your body and read it in javascript. ex <body data-myurl="@Url.Action("SecondChart")"> and in js var url = $("body").data("myurl")` Commented May 10, 2018 at 15:16

1 Answer 1

Reset to default
0

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);
    }
}
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

onDb() function is in my js file,when i cleck on the chart,its invoked,..in my view i need to have ajax call using onDb function value ,and i dont know what should i write in view to get this value
I have updated my answer based on your comment, please re-read that. Thanks!
and is it a logical way?using ajax in my js file?or ajax should be kept in view?
Ideally and conventionally, all the view specific logic should be kept in the view. From a technical perspective it’s the same thing but from a maintainability point of view, it can cause trouble. And like I’ve previously suggested multiple times, you should go with approach # 1.
You 1 approach ,you say i shoud say var result=onDb(e) in cshtml,but this throws error because when i run ,first my view will be loaded and says e is not defiend,because it trys to invoke onDb before the chart is created
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.