javascript - asp.net javascript div 隐藏显示不工作

Question

我是 asp.net/javascript 的新手，一段时间以来一直在练习以下代码。 基本上，我正在使用带有以下代码(摘录)的 javascript 测试 div 容器的显示方式

每次我运行该页面时，我都会收到以下错误: BC30456:“显示”不是“ASP.default4_aspx”的成员。 并突出显示以下行:

<asp:Button ID="btnSchedule" runat="server" Text="Schedule" onclick="Show();" TabIndex="1000" style="width:120px;margin-top:-5px;border: thin solid #ffffff;" />

我可以看到 onclick="SHOW() ;" 似乎是问题所在，但我不知道出了什么问题。

欢迎任何指导。

<form id="form1" runat="server">

<div>

    <asp:Button ID="btnSchedule" runat="server" Text="Schedule" onclick="Show();" TabIndex="1000" style="width:120px;margin-top:-5px;border: thin solid #ffffff;"  />

    <div style="background-color:yellow;width=200px;height:200px"></div>
    <div style="background-color:red;width=200px;height:200px"></div>
    <div style="background-color:blue;width=200px;height:200px"></div>
    <div style="background-color:beige;width=200px;height:200px"></div>
    <div style="background-color:skyblue;width=200px;height:200px"></div>

    <div id="div_Schedule" class="MiddlePopUp"  style="display:none;left:400px;top:400px;z-index:10;">
        <asp:Button ID="btnScheduleHide" runat="server"  Text="hide" onclick="Hide();" CssClass="STD_button" />
        <br/>
        <br/>  
        <img src="/quick.jpg" style="height: 764px; width: 1168px" />
    </div>

</div>
</form>

<script type="text/javascript">

    document.getElementById('div_Schedule').style.display = "none";


    function Show() {
        document.getElementById('div_Schedule').style.display = "block";
    }

    function Hide() {
        document.getElementById('div_Schedule').style.display = "none";
    }
</script>

Answer 1

您应该使用 OnClientClick 而不是 OnClick。第一个处理客户端对客户端的点击——它不会触发回发。而第二个触发回发，点击将在服务器中处理。

话虽这么说，你可以试试这个:

<asp:Button ID="btnSchedule" 
            runat="server" 
            Text="Schedule" 
            OnClientClick="Show();" 
            TabIndex="1000" 
            style="width:120px;margin-top:-5px;border: thin solid #ffffff;"/>

btnScheduleHide 按钮的OnClick 也是如此。

附带说明一下，我看不出这些按钮是服务器端按钮的原因。它们可以是 html 按钮。您不必将它们定义为服务器端控件，然后 ASP.NET 的 View 引擎为它们呈现相应的 html 代码，因为您很可能不需要触发回发到服务器并在那里进行一些操作并从服务器返回响应。

以下，我几乎可以肯定会满足您的需求:

<input type="button" id="btnSchedule" value="Schedule" onclick="Show();"/>

此外，如果您坚持使用第一种方法，您还必须更改在客户端代码中选择按钮的方式:

这行不通:

document.getElementById('btnSchedule')

为什么？

因为 ASP.NET 的渲染引擎会创建一个与 btnSchedule 不完全相同的 ID。如果您使用开发人员工具，您可以很容易地发现这一点。

那么如何才能正确选择呢？

 document.getElementById("<%= btnSchedule.ClientID%>");