在 javascript 中操作 asp.net 'runat="server" ' html 对象答案

【问题标题】：Manipulate asp.net 'runat="server" ' html object in javascript在 javascript 中操作 asp.net 'runat="server" ' html 对象
【发布时间】：2011-06-13 17:52:03
【问题描述】：

好的，我知道您可以使用以下代码从 asp.net 控件获取信息：

var element = document.getElementById('<%=myControl.ClientID%>');

但是，在 Javascript 中抓取该 html 元素后，我无法对其进行操作。我需要做什么来更改在 javascript 中设置为 runat="server" 的属性？

是否只能通过服务器端 C# 实现？

为了进一步澄清，我有一个通过 Javascript 更改大小的 div，并试图获取它的 innerhtml 中存在的 mschart 以更改它的高度/宽度。然而，它在服务器上运行的事实导致了问题。

<div id="div0" style="background-color:Silver; position: absolute; top: 0px; left: 0px; width: 480px; height: 245px;">
            <asp:Chart ID="chart0" runat="server"  Height="245px" Width="480px" 
                    BackColor="220, 230, 242" BackGradientStyle="None" 
                        BackSecondaryColor="220, 230, 242">
            <BorderSkin PageColor="220, 230, 242" />
            </asp:Chart>
        </div>

编辑：最终通过使用查询字符串的回发处理图表调整大小，然后在初始化时在 javascript 中抓取这些值并在那里调整 div 的大小。

【问题讨论】：

您还可以更改服务器端控件（带有runat="server" 的控件）的所有html 属性（例如通过javascript），因为即使是ASP.NET 控件也最终呈现为html-控件。

标签： javascript asp.net html

【解决方案1】：

有点不清楚你的真正意思。如果你的意思是，你想操作服务器端属性，或者调用服务器端函数，那么你不能通过 javascript 来做到这一点。您需要使用 ajax 或 webmethods 之类的东西。如果你的意思是你想修改它的客户端属性，比如它是否可见，或者它包含什么数据，那么你可以这样做。但是，您需要详细说明您正在尝试做什么。

编辑：

根据您的最新信息，有好消息也有坏消息。是的，您可以在客户端更改控件的大小，但这只会拉伸图像。 MSChart 生成一个下载的图像文件。拉伸会导致质量变差。

如果不能选择拉伸，您需要为新尺寸重新生成图表。这将需要您使用某种 ajax，或完全刷新页面。

【讨论】：

或者他可以生成大图像并通过 CSS 将其缩小，然后在需要时通过 javascript 再次放大。这样可以保持质量

【解决方案2】：

因为元素具有runat=server，您只能在代码后面（服务器端）中修改属性。实际的客户端属性（例如可见性）可以通过 javascript 进行更改。

【讨论】：

【解决方案3】：

如果该控件转换为简单的 HTML 元素，您应该能够编辑该“控件”的客户端属性。但是，有时服务器端属性没有客户端模拟。

需要注意的一个常见问题是，如果控件未设置为可见，则意味着它根本不会呈现在页面上；如果是这种情况，那么您将无法通过 JavaScript 访问它。

【讨论】：

【解决方案4】：

如果您尝试修改的只是对象的高度和高度，那么以下内容没有理由不起作用：

var element = document.getElementById('<%=myControl.ClientID%>'); 
element.style.height = divHeight;

只需在生成的 html 中查看具有该名称的控件实际上是 div 或图像（或您可以重新调整大小的东西），您可以在其中设置宽度和高度。我不知道图表控件呈现给什么。在任何情况下，使用 Firebug 检查页面中的 html 元素，并查看您在 javascript 中所做的更改如何影响结果。

无论如何，请记住，您只能在 javascript 中设置客户端属性。 这意味着您希望在某个 div 元素上设置它，而不是在服务器端控件上。知道服务器端控件确实呈现为 html，您应该能够以一种或另一种方式实现您想要的。

【讨论】：

【解决方案5】：

我的建议是使用 jQuery 编写脚本。它将在客户端脚本代码中使用以下内容：

获取所需高度的元素。
获取要操作的元素。
使用第 1 部分中的值更改元素高度。

如果您认为这是一种可行的方法并且您是 jQuery 新手，我可以帮助您编写一些代码。

【讨论】：

【解决方案6】：

我试图在 jquery 中操作一个包含runat="server" 属性的控件。我无法改变它。我一删除runat="server"，就注意到jquery 发生了变化。

您可以自己测试一下：

<asp:Label ID="myLabel">hello, warlord!</asp:Label>
<asp:Label ID="myLabel2" runat="server">hello, warlord!</asp:Label>
<script type="text/javascript">$("#myLabel").css("border", "3px solid red");</script>
<script type="text/javascript">$("#myLabel2").css("border", "3px solid red");</script>

【讨论】：

【解决方案7】：

我遇到了同样的问题，这通常发生在您的 html 控件（带有 runat="server"）位于 contentPlaceHolder 中时。这是我所做的：

我变了：

document.getElementById("mypopup").style.visibility = "visible";

到：

document.getElementById("ctl00_ContentPlaceHolder1_mypopup").style.visibility = "visible";

当您在浏览器上查看页面源代码时，您会看到您的 html 控件真正具有的名称。

您可以找到更多关于如何正确使用 ClientID 属性here的信息

【讨论】：