How to execute a script on partial view rendering?

Question

I have a strongly typed view to a CalculateModel where a user puts some information and make a ajax post to the controller, the controller executes some maths in this data and return a PartialView strongly typed to the ResultCalculateModel .

In the Result partial view, i have a d3 chart which is dynamically generated with some parameters that i have in the ResultCalculateModel . Heres some code:

 @model DTO.CalculateModel    
 //the html helpers here to user input some data 

   <div id='divOutPutData'> </div>

 <script>
 function getResult() {

        $.post("/GetResult", $('#form01').serialize())
            .success(function (result) {
                $('#divInputData').attr('style', 'display:none');
                $('#divOutPutData').append(result);
        };

   function drawChart(s,p,c){
     //code
   };
    </script>

The action:

 public ActionResult GetResult(CalculateModel model)
 {
        ResultCalculateModel result = _calculateResult.Calculate(model);
        return PartialView("Result", result);
 }

The result Partial View:

  @model DTO.ResultCalculateModel //the parameters of the drawChart function are in this model.
  //some Razor Helpers which is working
   <div id="chartResult"> </div> //i need to display the chart here

I would like to know how i can execute the drawChart function in partial view rendering?

Answer 1

This will help i think

//example function which posts data gets result.. puts html on dom, then calls DrawChart function
function PostStuff() {
    $.post("/GetResult", $('#form01').serialize()).success(function (result) {
        $('#divInputData').attr('style', 'display:none');
        $('#divOutPutData').append(result);
        //call function to interact with the data you just injected into the dom
        //get values from the partial view I made these up... you need to adjust for your situation.
        var s = $("#sId");
        var p = $("#pId");
        var c = $("#cId");
        DrawChart(s,p,c);       
    };
}

//example function
function DrawChart(s,p,c){
   //code
};

Answer 2

Perhaps in the partial view .cshtml itself return the parameters you need in a tag somewhere, eg:

<div id="drawChartValues" parameter1="value1" parameter2="value2" style="display: none;">
</div>

and then in your JavaScript do

function PostStuff() {
  $.post("/GetResult", $('#form01').serialize()).success(function (result) {
    $('#divInputData').attr('style', 'display:none');
    $('#divOutPutData').append(result);
    var p1 = $('#drawChartValues').attr('parameter1');
    var p2 = $('#drawChartValues').attr('parameter2');
    DrawChart(p1,p2);    
};

}

Answer 3

You should keep the div element (for the d3 container) and from your action method, instead of returning a partial view, return the data you need for plotting the graph in JSON format. In your ajax call's success event, read the data and pass that to your js method which renders the d3 grahic

 public ActionResult GetResult(CalculateModel model)
 {
        ResultCalculateModel result = _calculateResult.Calculate(model);
        return Json(result,JsonRequestBehaviour.AllowGet);
 }

And in your main view, Keep the container div

<div id="chartResult"> </div>

And in your js

<script>
 function getResult() {

        $.post("/GetResult", $('#form01').serialize())
            .success(function (result) {
                var s=result.SValue ;
                var p = result.PValu;
                var c =result.CValue;

                drawChart(s,p,c);
        };
   }
   function drawChart(s,p,c){
     //code to render the grpah
   };
</script>

Assuming SValue and PValue and CValue are 3 properties of your ResultCalculateModel