Hinzufügen von Inhalt zu Div in Bootstrap-modal von Server-Seite in asp.net

Question

Ich habe Eingabeformular in Bootstrap-Modell-Popup. Ich möchte Fehlermeldung in Div anzeigen, wenn Sie die Schaltfläche zum Speichern senden. Mein Modell-Popup befindet sich im Update-Fenster. Ich versuche es zu tun und es funktioniert nicht.

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 

     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title">SMTP Configuration</h4> 
      </div> 
      <div class="modal-body"> 

       Here is a input form 

       <div id="ErrorDiv" class="required" runat="server"> 
        This is a div where i want to show content 

       </div> 


      </div> 
      <div class="modal-footer"> 
       <button data-dismiss="modal" class="btn btn-default" type="button">Close</button> 
       <asp:Button ID="btnEdit" runat="server" Text="Save" OnClick="Save" class="btn btn-success" ValidationGroup="Group1" /> 

      </div> 
     </div> 

    </div> 
</div> 

Unten ist die serverseitige Methode zum Anzeigen von Inhalten.

public void ShowError(string Message) 
{ 
    ErrorDiv.InnerHtml = Message; 
    upModal.Update(); 
} 

Wie kann ich Fehler Inhalt zu div zeigen?

Answer 1

So öffnen Sie das Fehlermodell-Popup von der Serverseite. Sie müssen dazu Ihre Server-Side-Funktion ShowError aktualisieren.

public void ShowError(string Message) 
{ 
    ErrorDiv.InnerHtml = Message; 
    upModal.Update(); 
    ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "ErrorModel", "$('#myModal').modal('show');", true); 
} 

dafür haben Sie die div mit id myModal,inUpdate-Panel zu setzen.

Dadurch wird die jQuery-Funktion auf der Clientseite ausgelöst, nachdem die serverseitige Ausführung abgeschlossen und das Modell manuell geöffnet wurde.

Andere Art und Weise, dies zu tun

Wenn Sie nicht Modell div in der Update-Panel setzen wollen dann auf diese Weise folgen.

Aktualisieren Sie Ihr Modell div wie unten

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 

     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title">SMTP Configuration</h4> 
      </div> 
      <div class="modal-body"> 

       Here is a input form 

       <div id="ErrorDiv" class="required"> 
        This is a div where i want to show content 

       </div> 


      </div> 
      <div class="modal-footer"> 
       <button data-dismiss="modal" class="btn btn-default" type="button">Close</button> 
      </div> 
     </div> 

    </div> 
</div> 

hinzufügen JavaScript-Funktion, wie unten in aspx-Datei.

function showError(error){ 
    $("#ErrorDiv").html(error); 
    $('#myModal').modal('show'); 
} 

Und Aufruf der JavaScript-Funktion von Server-Seite wie diese

public void ShowError(string Message) 
{ 
    ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "ErrorModel", "ShowError('"+Message+"');", true); 
} 

Hier können Sie mehr über ScriptManager.RegisterStartupScript Method

erkunden