Exécution de Javascript une fois la valeur sélectionnée du contrôle définie

StackOverflow https://stackoverflow.com/questions/9341

  •  08-06-2019
  •  | 
  •  

Question

Application ASP.NET simple.

J'ai deux contrôles déroulants.Dans la première liste déroulante, j'ai un JavaScript onChange événement.Le JavaScript active la deuxième liste déroulante et en supprime une valeur (la valeur sélectionnée dans la première liste déroulante).S'ils cliquent sur la première valeur vide de la liste déroulante, la deuxième liste déroulante sera désactivée (et les options réinitialisées).

J'ai aussi du code dans le OnPreRender méthode qui activera ou désactivera la deuxième liste déroulante en fonction de la valeur de la première liste déroulante.Ceci afin que la valeur de la première liste déroulante puisse être sélectionnée dans le code (chargement des paramètres utilisateur).

Mon problème est:

  1. L'utilisateur sélectionne quelque chose dans la première liste déroulante.La deuxième liste déroulante sera activée via JavaScript.
  2. Ils modifient ensuite une troisième liste déroulante qui lance une publication.Après la publication, les listes déroulantes sont dans le bon état (première valeur sélectionnée, deuxième liste déroulante activée).
  3. S'ils cliquent ensuite sur le bouton Précédent, la deuxième liste déroulante ne sera plus activée alors qu'elle devrait l'être puisqu'il y a quelque chose de sélectionné dans la première liste déroulante.

J'ai essayé d'ajouter un script de démarrage (qui définira l'état correct de la deuxième liste déroulante) via ClientScript.RegisterStartupScript, cependant, lorsque cela est appelé, la première liste déroulante comporte un selectedIndex de 0, pas ce que c'est réellement.Je suppose que la valeur de la sélection est définie après mon script de démarrage (mais n'appelle toujours pas le onChange scénario).

Des idées sur quoi essayer ?

Était-ce utile?

La solution 

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    protected void indexChanged(object sender, EventArgs e)
    {
        Label1.Text = " I did something! ";
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Test Page</title>
</head>
<body>
    <script type="text/javascript">
        function firstChanged() {
            if(document.getElementById("firstSelect").selectedIndex != 0)
                document.getElementById("secondSelect").disabled = false;
            else
                document.getElementById("secondSelect").disabled = true;
        }
    </script>
    <form id="form1" runat="server">
    <div>
        <select id="firstSelect" onchange="firstChanged()">
            <option value="0"></option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
        <select id="secondSelect" disabled="disabled">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
        <asp:DropDownList ID="DropDownList1" AutoPostBack="true" OnSelectedIndexChanged="indexChanged" runat="server">
            <asp:ListItem Text="One" Value="1"></asp:ListItem>
            <asp:ListItem Text="Two" Value="2"></asp:ListItem>    
        </asp:DropDownList>
        <asp:Label ID="Label1" runat="server"></asp:Label>
    </div>
    </form>
    <script type="text/javascript">
        window.onload = function() {firstChanged();}
    </script>
</body>
</html>

Modifier:Remplacé tout le code.Cela devrait fonctionner même sous votre contrôle utilisateur.Je crois que Register.ClientScriptBlock ne fonctionne pas car le code que vous écrivez dans ce bloc est exécuté avant window.onload est appelé.Et je suppose (je ne suis pas sûr de ce point) que les objets DOM n'ont pas leurs valeurs définies à ce moment-là.Et c'est pourquoi vous obtenez selectedIndex comme toujours 0.

Autres conseils

Si la deuxième liste déroulante est initialement activée via javascript (je suppose que c'est lors d'un changement javascript, puisque vous ne l'avez pas spécifié), cliquer sur le bouton retour pour recharger la publication précédente ne l'activera jamais.

Mélanger ASP.NET avec du javascript classique peut être compliqué.Vous voudrez peut-être jeter un œil à l’implémentation Ajax d’ASP.NET (ou au contrôle AjaxPanel tiers si vous êtes obligé d’utiliser une ancienne version d’ASP.NET).Ceux-ci vous donneront le comportement que vous souhaitez grâce au C# pur, sans vous obliger à recourir au hackery-pokery javascript.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top