web-dev-qa-db-fra.com

Open Bootstrap Modal à partir de code-behind

Tout le monde sait comment ouvrir un compte Twitter bootstrap modal, à partir du code situé derrière?

Je veux ouvrir le modal sur la base de quelques exigences au moment de la sauvegarde. Quelque chose comme "Hé, il n'y a pas de stock, choisissez l'une des options suivantes pour continuer (rejeter, réserver ...) et appuyez sur ce bouton (cela peut créer une publication pour continuer)"

J'utilise des formulaires Web ASP.NET.

twitter-bootstrapmodal-dialog
31
Sergio

Enfin, j'ai découvert le problème qui m'empêchait de montrer le modal à partir de code-behind. Il faut penser que c’était aussi simple que d’enregistrer un script client qui a fait l’ouverture, comme:

ScriptManager.RegisterClientScriptBlock(this, this.GetType(),"none",
    "<script>$('#mymodal').modal('show');</script>", false);

Mais cela n'a jamais fonctionné pour moi.

Le problème est que Twitter Bootstrap Les scripts modaux ne fonctionnent pas du tout lorsque le modal est dans un asp: Updatepanel), le comportement des modaux échoue Côté, codebehind au client et client à codebehind (postback). Il empêche même les postbacks quand un js du modal est exécuté, comme un bouton de fermeture qui nécessite également de séparer certains objets (par exemple, un sale)

J'ai prévenu le personnel de bootstrap, mais ils ont répondu de manière pratique "donnez-nous un scénario d'échec avec du code HTML au format HTML et non ASP". Dans ma ville, cela s'appelle ... eh bien, = Bootstrap ne supportant rien de plus que du HTML simple. Nevermind, l’utiliser sur asp.

Je pensais qu'ils devaient au moins regarder ce qu'ils faisaient différemment dans la gestion de la toile de fond, ce qui, à mon avis, est à l'origine de la majeure partie des problèmes, mais ... (juste un indice)

Donc, si vous avez un problème, envoyez le updatepanel pour un essai.

22
Sergio

Par défaut Bootstrap les fichiers javascript sont inclus juste avant la balise body fermeture)

        <script src="vendors/jquery-1.9.1.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <script src="vendors/easypiechart/jquery.easy-pie-chart.js"></script>
        <script src="assets/scripts.js"></script>
 </body>

J'ai pris ces fichiers javascript dans la section head juste avant la balise body et j'ai écrit une petite fonction pour appeler le popup modal:

    <script src="vendors/jquery-1.9.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="vendors/easypiechart/jquery.easy-pie-chart.js"></script>
    <script src="assets/scripts.js"></script>

 <script type="text/javascript">
    function openModal() {
        $('#myModal').modal('show');
    }
</script>
</head>
<body>

alors je pourrais appeler le popup modal de code-behind avec ce qui suit:

protected void lbEdit_Click(object sender, EventArgs e) {   
      ScriptManager.RegisterStartupScript(this,this.GetType(),"Pop", "openModal();", true);
}
44
wallace740

Peut-être que cette réponse est si tardive, mais utile.
Pour le faire, nous avons 3 étapes:
1- Créez une structure modale en HTML.
2- Créez un bouton pour appeler une fonction dans le script Java, pour ouvrir modal et définir display:none en CSS.
3- Appelez cette touche par fonction dans le code derrière.
vous pouvez voir ces étapes dans l'extrait ci-dessous:

HTML modal:

<div class="modal fade" id="myModal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">
                                Registration done Successfully</h4>
                        </div>
                        <div class="modal-body">
                            <asp:Label ID="lblMessage" runat="server" />
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">
                                Close</button>
                            <button type="button" class="btn btn-primary">
                                Save changes</button>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>
            <!-- /.modal -->

Bouton caché:

<button type="button" style="display: none;" id="btnShowPopup" class="btn btn-primary btn-lg"
                data-toggle="modal" data-target="#myModal">
                Launch demo modal
            </button>

Code de script:

<script type="text/javascript">
        function ShowPopup() {
            $("#btnShowPopup").click();
        }
    </script>

code derrière:

protected void Page_Load(object sender, EventArgs e)
{
    ClientScript.RegisterStartupScript(this.GetType(), "alert", "ShowPopup();", true);
    this.lblMessage.Text = "Your Registration is done successfully. Our team will contact you shotly";
}

cette solution est l'une de toutes les solutions que je l'ai utilisée.

9
Hamid Talebi

Pour votre information,

J'ai déjà vu ce comportement étrange dans les widgets jQuery. Une partie de la clé est de mettre le updatepanel à l’intérieur du modal. Cela permet au DOM de la mise à jour de "rester avec" le modal (cependant, il fonctionne avec bootstrap).

0
Dan M

Pourquoi ne pas le faire comme ceci:

1) affiche le popup avec le formulaire

2) soumettre le formulaire en utilisant AJAX

3) dans AJAX code côté serveur, restituez une réponse qui:

  • affiche un popup avec formulaire avec validations ou juste un message
  • fermez le popup (et peut-être redirigez-vous vers une nouvelle page)
0
tomaszbak

Cette méthode d’ouverture du modal n’affiche pas le modal pour moi. J'ai trouvé cela comme un arround de travail.

J'ai enlevé:

 ScriptManager.RegisterStartupScript(this,this.GetType(),"Pop", "openModal();", true);

Puis j'ai ajouté un asp: label nommé lblJavaScript et dans code behind call:

lblJavaScript.Text = "<script language=\"JavaScript\">openModal()</script>";

Maintenant, le modal s'affichera.

0
Danny