2013-03-14 2 views
24

Qualcuno sa come aprire un modal bootstrap di Twitter, dal codice sottostante?Open Bootstrap Modal da code-behind

Voglio aprire il modale in base a qualche requeriment al momento del salvataggio. Qualcosa come "Hey non c'è azione, prendi una delle seguenti opzioni per continuare (scartare, prenotare ...) e premere quel pulsante (che potrebbe fare un postback per continuare)"

Sto usando ASP.NET moduli web.

+0

Quale tecnologia lato server stai usando, asp.net? Intendi il codice che sta dietro alla pagina in cui vuoi mostrare la modale? – Marijn

+0

Mi dispiace, ho modificato la domanda per essere più chiara. – Sergio

+0

Nessuno sa perché "ClientScript.RegisterClientScriptBlock ([GetType]," none "," $ ('# MyModal'). Show(); ", True)" non funziona ?? – Sergio

risposta

18

Finalmente ho scoperto il problema che mi impedisce di mostrare il codice dal code-behind. si deve pensare che era così facile come registrare un ClientScript che ha fatto l'apertura, come:

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

Ma questo non ha mai funzionato per me.

Il problema è che Gli script di Twitter Bootstrap Modals non funzionano affatto quando la modale si trova all'interno di asp: Updatepanel, period. Il comportamento delle modali fallisce da ogni lato, codebehind a client e client a codebehind (postback). Impedisce persino i postback quando si esegue qualsiasi js del modal, come un pulsante di chiusura che è necessario anche disporre di alcuni oggetti sever eliminando (per un esempio sporco)

Ho notificato lo staff di bootstrap, ma hanno risposto "Per favore, dacci uno scenario di fallimento con solo html e non asp." Nella mia città, si chiama ... beh, Bootstrap non supporta altro che semplice html. Non importa, usandolo su asp.

ho pensato loro di almeno guardare quello che stanno facendo diversi alla gestione fondale, che ho trovato le cause la maggior parte dei problemi, ma ... (suggerimento justa lì)

Quindi chiunque abbia il problema, rilasciare il pannello di aggiornamento per una prova.

0

ne dite di fare in questo modo:

1) mostrano popup con forma

2) Invia modulo utilizzando AJAX

3) in AJAX codice lato server, il rendering risposta che sarà o:

  • spettacolo pop-up con la forma con le convalide o semplicemente un messaggio
  • chiudere il pop-up (e forse si reindirizza n ew page)
+0

Grazie per la tua risposta, non è chiaramente una convalida, ma quello che dici lo farà. Ad ogni modo, quando dici: "Mostra popup con modulo" e "chiudi il popup" Sì, quelli sono i miei problemi, aprire e chiudere da codebehind. – Sergio

0

FYI,

Ho visto questo strano comportamento prima nei widget jQuery. Parte della chiave è mettere l'updatepanel all'interno del modal. Ciò consente al DOM del pannello di aggiornamento di "stare con" il modale (tuttavia funziona con il bootstrap).

34

Per impostazione predefinita Bootstrap javascript file sono inclusi subito prima del tag body di chiusura

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

Ho preso questi javascript file nella sezione head destra prima del tag body e ho scritto una piccola funzione per chiamare il popup modale:

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

quindi ho potuto chiamare il popup modale dal code-behind con il seguente:

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

questo ha funzionato per me - molte grazie! – bab

+0

Questo mi ha appena salvato molte righe di codice. Stavo usando asp: campi nascosti e valori di impostazione nei campi nascosti. Quando la pagina è stata caricata, valuterei i campi nascosti per determinare se js dovrebbe aprire il dialogo. Grazie per questo. Ho un po 'di pulizia da fare! –

0

Questo metodo di apertura del modale non mostrerebbe il modale per me. Ho trovato questo come un arround di lavoro.

ho rimosso:

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

Than ho aggiunto un asp: label chiamato lblJavaScript e nel codice dietro chiamata:

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

Ora il Modal visualizzerà.

5

Forse questa risposta è così in ritardo, ma è utile.
per farlo, abbiamo 3 passaggi:
1- Creare una struttura modale in HTML.
2- Creare un pulsante per chiamare una funzione in java script, per aprire modal e impostare display:none in CSS.
3- Chiamare questo pulsante per funzione nel codice sottostante.
si possono vedere questi passi in frammento di seguito:

HTML modale:

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

nascosta del tasto:

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

Codice Script:

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

dietro:

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"; 
} 

questa soluzione è una delle soluzioni che ho usato.