asp.net javascript div hide show not working

Question

Я новичок в asp.net/javascript и сейчас практиковал следующий код. В основном я тестирую как DIV контейнеры отображаются с помощью JavaScript с помощью следующего кода (экстракт)

Everytime я бегу страницу, я получаю следующее сообщение об ошибке: BC30456: «Show» не является членом «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;"/> 

То же самое справедливо и для OnClick из btnScheduleHide кнопки.

В качестве побочного примечания я не вижу причины, по которой эти кнопки являются кнопками на стороне сервера. Они могут быть html-кнопками. Вам не нужно определять их как элементы управления на стороне сервера, а затем механизм просмотра ASP.NET визуализирует для них соответствующий HTML-код, поскольку вам, возможно, не нужно запускать обратную передачу на сервер и выполнять некоторые действия там и вернуть ответ с сервера.

Ниже, я почти уверен, что будет соответствовать вашим потребностям:

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

Кроме того, если придерживаться первого подхода, вы должны изменить также путь вы выбираете вашу кнопку в вашей стороне клиента код:

Это не будет работать:

document.getElementById('btnSchedule') 

Почему?

Поскольку механизм рендеринга ASP.NET создаст ID не точно так же, как btnSchedule. Вы можете легко заметить это, если используете инструменты разработчика.

Итак, как вы можете выбрать его правильно?

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