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

我对

CalculateModel

有一个强类型视图，其中用户将一些信息放入

ajax

发布到控制器，控制器在该数据中执行一些数学运算，并向

ResultCalculateModel

返回一个强类型的部分视图

在结果部分视图中，我有一个

d3图表

，它是使用

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>

结果显示部分视图：

  @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

@model DTO.ResultCalculateModel//drawChart函数的参数在此模型中。
//一些正在工作的剃须刀助手
//我需要在这里显示图表

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

drawChart

功能

我想这会有帮助的

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

我想这会有帮助的

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

---

可能在部分视图中.cshtml本身会在某个位置的标记中返回所需的参数，例如：

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

---

}可能在局部视图中。cshtml本身会在某个位置的标记中返回所需的参数，例如：

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

---

}

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

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

在主视图中，保持container 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>

函数getResult（）{
$.post（“/GetResult”，$（'#form01'）.serialize（））
.成功（功能（结果）{
var s=结果.s值；
var p=result.PValu；
var c=结果c值；
图纸（s、p、c）；
};
}
功能图（s、p、c）{
//用于呈现grpah的代码
};

---

假设

SValue

和

PValue

和

CValue

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

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

在主视图中，保持container 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>

函数getResult（）{
$.post（“/GetResult”，$（'#form01'）.serialize（））
.成功（功能（结果）{
var s=结果.s值；
var p=result.PValu；
var c=结果c值；
图纸（s、p、c）；
};
}
功能图（s、p、c）{
//用于呈现grpah的代码
};

---

---

假设

SValue

和

PValue

和

CValue

是您的ResultCalculateModel的3个属性

您所说的“强类型”？您什么时候调用drawChart函数？@CodeNotFound是的，这正是我需要知道的。您从哪里获得参数值或drawChart方法？@Shyju（在结果变量上）。局部视图是强类型的模型。您说的“强类型”是什么意思？你什么时候调用drawChart函数的？@CodeNotFound是的，这正是我需要知道的。你从哪里获得参数值或drawChart方法？@Shyju在结果变量上。局部视图是强类型的模型。是的，但是drawChart的参数呢？结果是html。你能解释一下你的意思吗？也许会显示更多的代码会有帮助的。我猜你只需要将它们标记为全局…但如果没有看到代码，很难说。我编辑了帖子，在视图上显示了模型。你仍然没有显示我需要看到的部分。我修改了答案，也许是你想要的？这很有希望，实际上我可以将这些结果放在一个隐藏字段中。是的，但是，参数呢结果是一个html。你能解释一下你的意思吗…也许显示更多的代码会有帮助。我猜你只需要将它们标记为全局性的…但是如果没有看到代码，很难说。我编辑了帖子，在视图上显示模型。你仍然没有显示我需要看到的部分。我修改了答案，也许是你想要的？这是我的这是一个很好的方法，但问题是局部视图有很多其他属性，然后出于控制的原因我决定保持它的强类型。这是一个很好的方法，但问题是局部视图有很多其他属性，然后我决定保持它的强类型出于控制的原因，我被解雇了。