Question

使用chartJS我试图在局部视图中加载条形图。它适用于我的布局页面。但我希望它能在局部视图中发挥作用。但是，当我点击链接以使用里面的图表呈现局部视图时，它不起作用。我能做错什么？

.HtmlAttributes(new { onkeydown = "javascript: return false; " })

以下是我的代码的更详细信息的布局页面。

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    <title>Index</title>
</head>
<body>
    <div id="chartContainer"></div>
    <script type="text/javascript">

        window.onload = function () {
            var chart = new CanvasJS.Chart("chartContainer", {
                theme: "theme2",
                animationEnabled: true,
                title: {
                    text: "Simple Column Chart in ASP.NET MVC"
                },
                subtitles: [
                    { text: "Try Resizing the Browser" }
                ],
                data: [
                {
                    type: "column", //change type to bar, line, area, pie, etc
                    dataPoints: [
                    { x: 10, y: 71 },
                    { x: 20, y: 55 },
                    { x: 30, y: 50 },
                    { x: 40, y: 65 },
                    { x: 50, y: 95 },
                    { x: 60, y: 68 },
                    { x: 70, y: 28 },
                    { x: 80, y: 34 },
                    { x: 90, y: 14 }
                    ]
                                        //Uncomment below line to add data coming from the controller.
                    dataPoints: @Html.Raw(ViewBag.DataPoints),
                }
                ]
            });
            chart.render();
        };
    </script>
</body>
</html>

在Jesse的帮助下，我将问题转化为解决方案。但是，现在我的div元素并没有根据图表的高度和宽度进行扩展。enter image description here

Answer 1

感谢您在那里与我合作。我想我知道发生了什么自＆＃34;测试＆＃34;在添加控制台日志后，您的开发控制台中没有出现，我们可以非常肯定该函数没有被调用..

我对@ Ajax.ActionLink不太熟悉，但我打赌它没有进行页面刷新并使用Ajax将新视图加载到页面上。

你可能想尝试做他们在这里做的事情： Running scripts in an ajax-loaded page fragment

实际上根据这篇文章，这样做并不是一个好习惯： ASP.NET MVC Loading scripts in partial views

我还认为，在ajax作为＆＃34;窗口＆＃34;之后，将不会调用您期望被调用的函数。已经加载了。当您在布局中使用脚本时，它在窗口加载时出现，但在您当前的场景中，脚本不在您的页面上，直到您的窗口加载完毕，因此它永远不会触发。

（这就是为什么我认为第一个链接有助于＃34; ajax on load＆＃34; callback vs＆＃34; on the load on the load＆＃34; callback）

除此之外，我害怕mvc razor的@如果它通过ajax加载没有被正确处理，但如果你能弄明白其余的话，这可能不会成为一个问题。

我认为这里的最佳实践可能是在完成Ajax.ActionLink之后成功回调。

如果你看这里（我确定在其他地方），你可以看到一个人使用Ajax.ActionLink成功回调的例子： How to tell Ajax.ActionLink OnSuccess callback which element initiated the ajax

我认为你想要的是从部分视图中删除你的脚本并把它放在它总是存在的地方，比如你的布局。但是，您只是将其包含在常规的javascript函数中，而且它只会在页面上停留。

function myfunction() {}

代替你的

window.onload = {}

现在将它们组合在一起你只需将此myfunction（）称为ActionLink的成功回调。

这里的想法是在你的ActionLink将新元素加载到页面上之后，成功回调将调用myfunction并运行自定义代码。它应该提供与刚刚通过Ajax.ActionLink

加载脚本相同的效果

加载部分视图时，Javascript不会在局部视图中运行

1 个答案: