Javascript et AspNet par Hytachi182 - page 1

Bonjour

Je vous avoue avoir du mal à utiliser Javascript et AspNet

Malgré multiple recherche j'ai du mal à saisir pourquoi cela ne fonctionne pas .

Au delà d'avoir la solution je souhaite comprendre alors si quelqu'un peut m'expliquer cela serait sympa :-)

Ci-dessous mon code : le javascript se déclenche mais ne fait pas le résultat attendu quand il est dans la balise <form id="form1" runat="server">

Si je sors mon code de cette balise ou si je lance le code ci-dessous dans une simple page HTML , le javascript fonctionne

(en enlevant bien sur l'updatePanel et l scriptmanager qui ne sont juste la car j'ai tenté de rechercher comme un grand la solution )

En bref supprimez ce qu'il y a en gras ci-dessous cela fonctionne cependant cela me gène fortement pour la suite comme vous le comprendrez :-(

Svp aidez moi ........

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="BacSable.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
   
      <style type="text/css">
            .tg  {border-collapse:collapse;border-spacing:0;border-color:#999;}
            .tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#999;color:#444;background-color:#F7FDFA;}
            .tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#999;color:#fff;background-color:#26ADE4;}
            .tg .tg-wt8g{font-weight:bold;background-color:#34cdf9;text-align:center;vertical-align:top}
            .tg .tg-baqh{text-align:center;vertical-align:top}
            .tg .tg-enlq{font-weight:bold;background-color:#34cdf9;vertical-align:top}
            .tg .tg-yw4l{vertical-align:top}
            .auto-style3 {
                width: 885px;
            }
            .auto-style4 {
                width: 913px;
            }
            .auto-style5 {
                width: 56%;
                }
            .myButton {
	-moz-box-shadow: 0px 10px 14px -7px #276873;
	-webkit-box-shadow: 0px 10px 14px -7px #276873;
	box-shadow: 0px 10px 14px -7px #276873;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
	background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
	background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
	background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%);
	background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
	background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
	background-color:#599bb3;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:20px;
	font-weight:bold;
	padding:13px 32px;
	text-decoration:none;
	text-shadow:0px 1px 0px #3d768a;
}
            .myButton:hover {
	            background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3));
	            background:-moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
	            background:-webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
	            background:-o-linear-gradient(top, #408c99 5%, #599bb3 100%);
	            background:-ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
	            background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
	            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0);
	            background-color:#408c99;
            }
            .myButton:active {
	            position:relative;
	            top:1px;
            }
            .collapsible {
    background-color: #777;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
}

.active, .collapsible:hover {
    background-color: #555;
}

.content {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: #f1f1f1;
}
            </style>
 
<body>
    <form id="form1" runat="server"> <asp:ScriptManager id="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel id="UpdatePanel1" runat="server"> <ContentTemplate>
            <h2>Collapsibles</h2>

            <p>A Collapsible:</p>
            <button class="collapsible">Open Collapsible</button>
            <div class="content">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>

            <p>Collapsible Set:</p>
            <button class="collapsible">Open Section 1</button>
            <div class="content">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <button class="collapsible">Open Section 2</button>
            <div class="content">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <button class="collapsible">Open Section 3</button>
            <div class="content">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
        
    </ContentTemplate> </asp:UpdatePanel>  </form>
 
 <script type="text/javascript">
                 var coll = document.getElementsByClassName("collapsible");
     var i;

     for (i = 0; i < coll.length; i++) {
         coll[i].addEventListener("click", function () {
             this.classList.toggle("active");
             var content = this.nextElementSibling;
             if (content.style.display === "block") {
                 content.style.display = "none";
             } else {
                 content.style.display = "block";
             }
         });
     }            
                </script>
</body>
</html>

-
Edité par Hytachi182 15 avril 2018 à 13:04:06

Javascript et AspNet

Javascript et AspNet

Supprimer

Modérer

Signaler le message aux modérateurs