使用 JS 函数隐藏 Shield ASP.NET MVC 图表答案

【问题标题】：Hiding Shield ASP.NET MVC charts using JS function使用 JS 函数隐藏 Shield ASP.NET MVC 图表
【发布时间】：2013-08-16 13:08:58
【问题描述】：

我在页面上使用 Shield ASP.NET MVC 图表。我需要图表最初为我的访问者显示数据，并且我需要为用户提供通过单击相应按钮来隐藏图表的可能性。为此，我使用以下函数：

<script>
    function HideChart() {
        document.getElementById("DataSpot").innerHTML = "";
    }
</script>

我将图表放置如下：

<p id="DataSpot">
@(Html.ShieldChart()
    .Name("chart")
    .PrimaryHeader(header => header.Text("Profile Hits"))
    .Export(false)
    .AxisX(axisX => axisX
    ………..
)
</p>
<button onclick="HideChart()">Hide Chart</button>

问题是，当我点击按钮时，什么也没有发生。

【问题讨论】：

标签： asp.net-mvc shieldui

【解决方案1】：

@user2492467,

您需要隐藏图表还是清除其内容？如果只是隐藏图表，克里斯建议的方法就可以了。但是，如果您需要从页面中彻底清除图表，那么清除其内容是不够的。仅删除呈现的图表标记会为内存泄漏打开大门，因为对 DOM 节点的引用可能会保留在图表 javascript 组件中。

更好的方法是找到 javascript 组件实例并调用其.destroy() 方法。这将确保组件被完全销毁并且没有内存泄漏：

$("#DataSpot").swidget().destroy();

请注意，您仍然需要使用 MVC 包装器的 .Name("DataSpot") 方法为图表命名，就像 Ed 建议的那样。这将为您的图表的 HTML 元素提供一个 ID，您可以使用该 ID 与 jQuery 一起查找图表实例。

.swidget() 方法是 Shield UI javascript 框架添加的标准 jQuery 扩展方法。它返回与 jQuery 选择器匹配的元素关联的 javascript 组件实例。这就是您找到图表实例的方式。

【讨论】：

我最初只是想隐藏图表，但再想一想，除非刷新页面，否则用户将无法选择将其恢复。在这种情况下，我最好完全删除图表。感谢您向我展示如何正确地做到这一点。

【解决方案2】：

怎么样：

<script>
    function HideChart() {
        document.getElementById('DataSpot').style.display='none';
    }
</script>

您还应该更新您的按钮：

<button type="button" onclick="HideChart()" value="Hide Chart" />

【讨论】：

【解决方案3】：

实际上发生了一些事情，显然不是你需要的事情。这是因为您需要通过引用其容器来清除渲染的图表。

元素很好，如果您在函数中放入一些文本并执行它，您会看到它会出现在适当的位置。但是，要隐藏图表，您需要使用它的名称。换句话说，以下语句：

 document.getElementById("DataSpot").innerHTML = "";

应该改为

 document.getElementById("chart").innerHTML = "";

或者您可以将图表重命名为

 .Name("DataSpot ")

在这两种情况下都删除 P 元素，因为它没有用。

【讨论】：