Question

我是asp.net/javascript的新手，现在已经使用以下代码练习了一段时间。基本上我正在测试div容器如何使用带有以下代码（提取）的javascript出现

每次运行页面时都会出现以下错误： BC30456：＆＃39; Show＆＃39;不是＆＃39; ASP.default4_aspx＆＃39; 的成员并突出显示以下行：

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

同样适用于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

不要在asp.net按钮上点击javascript。

使用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);

asp.net javascript div隐藏显示无法正常工作

2 个答案: