Question

 <asp:Panel ID="filterBanners" runat="server" Visible ="false"> 
    <h3> Testing </h3>
 </asp:Panel>

我正试图以这种方式将面板可见性设置为true，但它不起作用：

Page.ClientScript.RegisterStartupScript(this.GetType(), "ScriptBlock", "$('#filterBanners').show();", true);

或

 ScriptManager.RegisterStartupScript(this, this.GetType(), "ShowCode5", "$('#filterBanners').show();", true);

Answer 1

面板的id filterBanners将由asp.net更改为生成的 html ，因此jQuery不会找到它。您需要在jQuery / javascript中使用ClientID而不是服务器ID来访问Panel。

ScriptManager.RegisterStartupScript(this.GetType(), 
  "ScriptBlock", "$('#"+ filterBanners.ClientID+"').show();", true);

如果您有.net框架，那么您也可以将ClientIDMode设置为“static”，让asp.net保持客户端ID与服务器ID相同。

ClientIDMode = Static

ClientID值设置为ID属性的值。如果 control是一个命名容器，控件用作顶部为其包含的任何控件命名容器的层次结构。

您也可以使用类选择器作为面板，但您需要先将类分配给Panel。

HTML 的

 <asp:Panel ID="filterBanners" runat="server" CssClass="panel-class" Visible ="false"> 
    <h3> Testing </h3>
 </asp:Panel>

背后的代码

ScriptManager.RegisterStartupScript(this.GetType(), "ScriptBlock", "$('.panel-class').show();", true);

修改1

请注意，必须确保在脚本执行之前加载jQuery，尝试使用本机javascript方法访问面板。

修改2

您正在隐藏该面板，方法是在html中设置visible="false"，会导致没有为面板生成html，因此javascript无法找到面板。您必须在html中将其visible属性设置为true才能为其生成html。

以下代码经过测试且正常工作。

HTML 的

 <asp:Panel ID="filterBanners" runat="server" Visible ="true"> 
     <h3> Testing </h3>
 </asp:Panel>

背后的代码

 ScriptManager.RegisterStartupScript(this, this.GetType(), "ScriptBlock", 
 "document.getElementById('" + filterBanners.ClientID + 
 "') .style.display='none';", true);

编辑3

如果您希望最初隐藏面板并且您想要从服务器显示它，那么不要使用服务器端属性visible =“false”而是使用style =“display：none;”在html。

HTML 的

<asp:Panel ID="filterBanners" runat="server" style="display:none;"> 
    <h3> Testing </h3>
</asp:Panel>

背后的代码

 ScriptManager.RegisterStartupScript(this, this.GetType(), "ScriptBlock", 
 "document.getElementById('" + filterBanners.ClientID + 
 "').style.display='block';", true);

使用registerstartupscript显示面板

1 个答案: