Asp.net mvc 在mvc中从局部视图调用google图表

我正在尝试将google图表从部分视图调用为视图，但该图表未加载。它在视图中工作正常，但当转换为局部视图时，它不会渲染。如果有什么问题，请任何人检查并帮助我

我的看法

我的结果是这样的

\r\n\r\n \r\n图表5

\r\n \r\n \r\n 设计表面积

我在同一视图中有多个图表，这就是为什么使用局部视图

---

有人能帮忙吗？

我发现你的代码没有什么问题

问题1 在你的局部观点中，这一行

var chartsdata = '@Model';

当razor执行此代码时，它会生成如下所示的代码。如果您检查生成页面的查看源代码，您可以看到这一点

var chartsdata = 'System.Collections.Generic.List`1[YourNamespace.ChartModel]';

这是一根绳子。所以基本上，在下面的for循环中，循环直到这个字符串的长度，这显然是错误的！您的模型是ChartModel的集合。因此，您应该将相同的集合/数组设置为此chartsdata变量，稍后可以循环使用该变量，并使用它为图形添加数据

可以将JsonConvert.SerializeObject与Html.Raw一起使用，将模型对象转换为javascript数组

var chartsdata = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model));

这将把ChartModel objectsjs版本的数组存储到chartsdata变量中

现在你的循环代码是好的

for (var i = 0; i < chartsdata.length; i++) {
   data.addRow([chartsdata[i].XCoordinates, chartsdata[i].YCoordinates]);
}

解决办法很简单

success: function (result) {                  
                $('#div-Graph').append(result);                   
            }

---

修复这些问题后，如果页面中没有任何其他js错误，图表将显示在SELECT element change事件上。

最后我找到了答案，修复这个问题确实花了很多时间。我将所有脚本引用从局部视图移动到视图文件，然后在视图中调用google.load

即

所以我的观点如下

@model HeathAppDesign.Model.ChartModel
@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>


<script type="text/javascript">
    **google.load("visualization", "1", { packages: ["corechart"] });** 

    $(document).ready(function () {
        $('#ChartTypes').change(function () {
            var selectedID = $(this).val();
            $.ajax({
                url: '/charts/GetChart/',
                data: {id:4},
                type: 'GET',
                success: function (result) {

                    $('#div-Graph').append(result);

                }
            });

        });
    });
</script>
<div>


    <select id="ChartTypes">
        <option id="Chart1" value="0">Projected Annual Cost per Member</option>
        <option id="Chart2" value="1">Projected Annual Cost to Employer by Plan</option>
        <option id="Chart3" value="2">Total Projected Cost</option>
        <option id="Chart4" value="3">Renewal Year PMPM Cost</option>
        <option id="Chart5" value="4">Paid Or Allowed Ratio by Plan</option>
        <option id="Chart6" value="5">Impact of Plan Design Changes on 2017 Costs</option>
        <option id="Chart7" value="6">5 Year Projected Plan Change Impact</option>
        <option id="Chart8" value="7">Impact of Trend Over Time</option>
    </select>
    <div id="div-Graph">

    </div>
</div>
<div>
    Design table Area
</div>

---

谢谢大家抽出时间

您的ChartModel类定义是什么样子的？公共类ChartModel{public object XCoordinates{get；set；}公共对象yccoordinates{get；set；}遵循我发布的答案。该代码应该可以工作。我刚刚参加了一个本地项目的测试。谢谢Shyju；我已经转换了行var chartsdata='@Model'；至var chartsdata=@Html.RawJson.EncodeModel，第2版也是已知版本；只是想把结果严格化

for (var i = 0; i < chartsdata.length; i++) {
   data.addRow([chartsdata[i].XCoordinates, chartsdata[i].YCoordinates]);
}

success: function (result) {                  
                $('#div-Graph').append(res);   // WHAT IS "res" ?????                  
            }

success: function (result) {                  
                $('#div-Graph').append(result);                   
            }

google.load("visualization", "1", { packages: ["corechart"] }); 

@model HeathAppDesign.Model.ChartModel
@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>


<script type="text/javascript">
    **google.load("visualization", "1", { packages: ["corechart"] });** 

    $(document).ready(function () {
        $('#ChartTypes').change(function () {
            var selectedID = $(this).val();
            $.ajax({
                url: '/charts/GetChart/',
                data: {id:4},
                type: 'GET',
                success: function (result) {

                    $('#div-Graph').append(result);

                }
            });

        });
    });
</script>
<div>


    <select id="ChartTypes">
        <option id="Chart1" value="0">Projected Annual Cost per Member</option>
        <option id="Chart2" value="1">Projected Annual Cost to Employer by Plan</option>
        <option id="Chart3" value="2">Total Projected Cost</option>
        <option id="Chart4" value="3">Renewal Year PMPM Cost</option>
        <option id="Chart5" value="4">Paid Or Allowed Ratio by Plan</option>
        <option id="Chart6" value="5">Impact of Plan Design Changes on 2017 Costs</option>
        <option id="Chart7" value="6">5 Year Projected Plan Change Impact</option>
        <option id="Chart8" value="7">Impact of Trend Over Time</option>
    </select>
    <div id="div-Graph">

    </div>
</div>
<div>
    Design table Area
</div>