Question

我有一个CalculateModel的强类型视图，用户在其中放置一些信息并向控制器发送ajax帖子，控制器在此数据中执行一些数学并返回强类型的PartialView ResultCalculateModel。

在结果局部视图中，我有一个d3 chart，它是使用ResultCalculateModel中的一些参数动态生成的。下面是一些代码：

 @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>

行动：

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

结果部分视图：

  @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

我想知道如何在局部视图渲染中执行drawChart函数？

Answer 1

这有助于我思考

//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

也许在部分视图中.cshtml本身会在某个标签中返回您需要的参数，例如：

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

然后在你的JavaScript中

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

您应该保留div元素（对于d3容器）和操作方法，而不是返回部分视图，返回以JSON格式绘制图形所需的数据。在你的ajax调用的成功事件中，读取数据并将其传递给你的js方法，该方法呈现d3 grahic

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

在主视图中，保留容器div

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

在你的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>

假设SValue和PValue以及CValue是ResultCalculateModel的3个属性

如何在部分视图渲染上执行脚本？

3 个答案: