4 votes

Dialogue jQuery UI affiché à l'aide d'un bouton ASP.NET

J'essaie d'afficher une boîte de dialogue modale lorsque l'utilisateur clique sur un bouton ASP.Net. Voici ma page :

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.6.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {

            $("#dialog").dialog({
                bgiframe: true,
                autoOpen: false,
                height: 300,
                modal: true,
                buttons: {
                    'Ok': function() {
                        $(this).dialog('close');
                    },
                    Cancel: function() {
                        $(this).dialog('close');
                    }
                },
                close: function() {
                    ;
                }
            });
        });
        function ShowDialog() {
            $('#dialog').dialog('open');
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="TreeNew" runat="server" Text="New" OnClientClick="ShowDialog();"/>
        <asp:Label ID="Message" runat="server"></asp:Label>
        <div id="dialog" title="Select content type">
            <p id="validateTips">All form fields are required.</p>
            <asp:RadioButtonList ID="ContentTypeList" runat="server">
                <asp:ListItem Value="1">Text</asp:ListItem>
                <asp:ListItem Value="2">Image</asp:ListItem>
                <asp:ListItem Value="3">Audio</asp:ListItem>
                <asp:ListItem Value="4">Video</asp:ListItem>
        </asp:RadioButtonList>
        </div>
    </div>
    </form>
</body>
</html>

Lorsque je clique sur le bouton TreeNew, une fenêtre popup modale apparaît, mais la page fait immédiatement un retour arrière.

Qu'est-ce qui se passe ?

3voto

ctrlShiftBryan Points 5620

Essayez

OnClientClick="return ShowDialog();"

ET

function ShowDialog() {
            $('#dialog').dialog('open');
            return false;
        }

Cela empêchera le postback.

3voto

Josh Stodola Points 42410

Alors que l'ajout d'un return false; résoudra votre problème (comme suggéré par d'autres réponses), je pense que la meilleure chose à faire pour vous est d'utiliser un bouton HTML standard. Il n'y a aucune raison d'utiliser un contrôle ASP.NET dans ce cas puisque vous n'avez pas l'intention de faire un retour arrière.

Cependant, si vous insistez pour utiliser un bouton ASP.NET, définissez au moins UseSubmitBehavior="False" afin que le bouton soit rendu comme <input type="button"/> au lieu de <input type="submit"/> .

2voto

Josh Mein Points 12352

Votre OnClientClick doit retournez à la case départ comme ça :

OnClientClick="ShowDialog(); return false;"

Boutons par défaut postback mais retourner false empêche le comportement par défaut

1voto

David Morton Points 10519

Vous ne renvoyez pas false de votre OnClientClick. Lorsque vous ne renvoyez pas explicitement false, "true" est supposé dans cette situation. Si la valeur de retour de votre OnClientClick est true, cela signifie que vous pouvez effectuer un postback. Essayez de remplacer OnClientClick par la formule suivante (en ajoutant "return false" après votre appel à ShowDialog())

OnClientClick="ShowDialog();return false;"

1voto

Chris Points 3981

Cet article peut vous être utile : utiliser-jquery-modal-dialog-confirmation-with-an-asp-net-server-control .

J'espère que cela vous aidera.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X