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?

@Shyju on the result variable. The partial view is strongly typed to a model. — gog
– gog, Commented Feb 17, 2016 at 18:28

Seabizkit · Accepted Answer · 2016-02-17 18:44:34Z

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
};

edited Feb 17, 2016 at 18:44

answered Feb 17, 2016 at 18:33

Seabizkit

2,4152 gold badges17 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

gog Over a year ago

yes but, how about the parameters of the drawChart? The result is an html.

Seabizkit Over a year ago

could you explain what you mean...maybe showing more code will help. I guessing you just need to mark them global... but hard to say without seeing the code.

gog Over a year ago

i have edited the post, showing the models on the views.

Seabizkit Over a year ago

you still not showing the part i need to see. I modified answer to maybe be what you want?

gog Over a year ago

this is promising, actually i can put these results in a hidden field.

patrykgliwinski · Accepted Answer · 2016-02-17 18:45:43Z

1

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

<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);    
};

}

answered Feb 17, 2016 at 18:45

patrykgliwinski

3161 silver badge8 bronze badges

Comments

Shyju · Accepted Answer · 2016-02-17 18:58:07Z

1

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

answered Feb 17, 2016 at 18:58

Shyju

220k106 gold badges421 silver badges499 bronze badges

1 Comment

gog Over a year ago

its a good approach, but the problem is that the partial view has a lot of other properties, then i decided to keep it strongly typed for control reasons.

Collectives™ on Stack Overflow

How to execute a script on partial view rendering?

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related