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也是btnScheduleHide 。

附带说明一下，我看不出这些按钮成为服务器端按钮的原因。 它们可能是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%>");

Answer 2

不要将javascript onclick放在asp.net按钮中。

使用ClientID属性附加onlcick事件。

这应该做的工作。

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";
}

var showButton = document.getElementById("<%= btnSchedule.ClientID%>");
var hideButton = document.getElementById("<%= btnScheduleHide.ClientID%>");

showButton.addEventListener("click", Show);
hideButton.addEventListener("click", Hide);