Open Bootstrap Modal nach der Eingabe-Validierung nach dem Klick in asp.net C#

Ich arbeite an einem asp.net C# -Projekt, das eine input box und eine button hat. Input box hat einige Validierung und bei erfolgreicher Validierung möchte ich ein Bootstrap-Modal öffnen, um weitere Informationen zu füllen. Gibt es eine Möglichkeit, dies zu tun?Open Bootstrap Modal nach der Eingabe-Validierung nach dem Klick in asp.net C#

Ich versuchte mit der JavaScript, aber es funktioniert nicht für mich. Unten ist der Code für dasselbe.

Default.aspx Datei Code:

<input type="text" runat="server" name="mobile-no" placeholder="Mobile Number" class="contact-no" id="number" pattern="^\d{10}$" title="10 digit Mobile Number" required="required" /> 
<asp:Button CssClass="btn btn-success" ID="btnSell" runat="server" Text="Sell" OnClick="btnSell_Click" data-toggle="modal" data-target="#sell_request" />

Bootstrap Modal Code:

<div class="modal fade" id="sell_request" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header text-center"> 
       <a class="btn pull-right" data-dismiss="modal"><span>&times;</span></a> 
       <h3 class="register_header"><strong>Request Details</strong></h3> 
       <h6>Please fill below detials for submit a request</h6> 
      </div> 
      <div class="modal-body"> 
      </div> 
      <div class="modal-footer"> 
       <a class="btn btn-success" data-dismiss="modal">Skip</a> 
       <span class="hidden-xs hidden-sm">OR</span> 
       <a class="btn btn-success" data-dismiss="modal">Submit</a> 
      </div> 
     </div> 
    </div> 
</div>

CS-Code auf die Schaltfläche klicken:

protected void btnSell_Click(object sender, EventArgs e) 
    { 
     ScriptManager.RegisterStartupScript(this, GetType(), "ServerControlScript", "<script>$('#sell_request').modal('show');</script>", false); 
    }

Quelle

2016-07-11 Rajendra Purant

ich Ihren Code nahm wie und folgende Änderungen vorgenommen:

entferntvon btnSell
CDN-Verweise auf jQuery, bootstrap.js und bootstrap.css (in dieser Reihenfolge) hinzugefügt.

Es funktioniert jetzt!

-Code hinter:

protected void Page_Load(object sender, EventArgs e) 
{ 

} 

protected void btnSell_Click(object sender, EventArgs e) 
{ 
    ScriptManager.RegisterStartupScript(this, GetType(), "ServerControlScript", "<script>$('#sell_request').modal('show');</script>", false); 
}

.ASPX:

<head runat="server"> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <div class="modal fade" id="sell_request" role="dialog"> 
      <div class="modal-dialog"> 
       <div class="modal-content"> 
        <div class="modal-header text-center"> 
         <a class="btn pull-right" data-dismiss="modal"><span>&times;</span></a> 
         <h3 class="register_header"><strong>Request Details</strong></h3> 
         <h6>Please fill below detials for submit a request</h6> 
        </div> 
        <div class="modal-body"> 
        </div> 
        <div class="modal-footer"> 
         <a class="btn btn-success" data-dismiss="modal">Skip</a> 
         <span class="hidden-xs hidden-sm">OR</span> 
         <a class="btn btn-success" data-dismiss="modal">Submit</a> 
        </div> 
       </div> 
      </div> 
     </div> 
     <input type="text" runat="server" name="mobile-no" placeholder="Mobile Number" class="contact-no" id="number" pattern="^\d{10}$" title="10 digit Mobile Number" required="required" /> 
     <asp:Button CssClass="btn btn-success" ID="btnSell" runat="server" Text="Sell" OnClick="btnSell_Click" /> 
    </form> 
</body>

Ausgang:

Quelle

2016-07-12 04:46:22

Ihre Bootstrap-modal ASPX Code sieht gut aus so weit wie Ich kann sagen. Ich mache etwas ähnliches, aber ich habe das Javascript in meiner .aspx-Datei definiert, und ich rufe es einfach aus dem Code mit dem Skript-Manager. Hier ist ein Beispiel von meinem Code aus default.aspx.cs:

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

ruft eine Java-Script-Funktion, die in default.aspx definiert:

<!--Modal Popup for Contacts--> 
<script type="text/javascript"> 
    /* Allows us to open and close the Address Book modal from code behind */ 
    function openContactModal() { 
     $('#contactModal').modal('show'); 
    } 
    function closeContactModal() { 
     $('#contactModal').modal('hide'); 
    } 
</script>

Sie können openSellRequest ersetzen() und # sell_request in diesen Code und sehen, ob es für Sie funktioniert.

EDIT: Hier ist ein Beispiel des default.aspx Code für mein Modalverben - gibt es verschiedene zusätzliche Elemente in hier, obwohl ich nicht sicher bin, dass sie benötigt werden:

<div class="modal fade" id="contactModal" tabindex="-1" role="dialog" aria-labelledby="contactModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static"> 
    <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" id="contactModalLabel">Contact Info for <asp:Label ID="lblContactHeaderName" runat="server"></asp:Label></h4> 
     </div> 
     <div class="modal-body"> 
      <asp:Table ID="contactTable" runat="server" Width="95%"> 
       <asp:TableRow> 
        ... your content here ... 
       </asp:TableRow> 

      </asp:Table> 
     </div> 
     <div class="modal-footer"> 
      <asp:Button ID="deleteContact" CssClass="btn btn-danger" runat="server" Text="Delete" OnClick="deleteContact_Click" Visible="false" /> 
      <asp:Button ID="editContact" CssClass="btn btn-primary" runat="server" Text="Edit" onclick="editContact_Click" /> 
      <asp:Button ID="saveContact" CssClass="btn btn-primary" runat="server" Text="Save" OnClick="saveContact_Click" Visible="false" /> 
      <asp:Button ID="cancelContact" CssClass="btn btn-default" data-dismiss="modal" runat="server" Text="Close" /> 
     </div> 
     </div> 
    </div> 
</div>

Und hier meine Taste Code:

<asp:Button ID="btnShowContact" CssClass="btn btn-primary btn-sm dont-print" runat="server" OnClick="showContact" Text="Show Contact Details" data-toggle="modal" data-target="#contactModal" />

Quelle

2016-07-11 19:14:38

Danke für deine schnelle Antwort, aber die Lösung hat nicht funktioniert. Es validiert mein Eingabefeld, zeigt aber kein Bootstrap-Modal. Hinweis: - Ich habe das 'data-toggle =" modal "data-target =" # sell_request "' diese Felder aus der Schaltfläche entfernt.Wenn ich diese Felder behalte, zeigt es das Modal an, selbst wenn die Validierung fehlschlägt. Ich wollte die modale Box bei erfolgreicher Validierung der Eingabebox zeigen. Vielen Dank! –

Ich habe diese Felder in meinem Button - Sie werden sie wieder hinzufügen wollen, denke ich. Ich aktualisiere meine Antwort mit dem vollständigen Code von default.aspx für meine Schaltfläche und mein Modal. Sie können auch einen Unterbrechungspunkt in Ihre ASPX.CS-Datei einfügen, um sicherzustellen, dass die button_click-Methode tatsächlich aufgerufen wird. –

Open Bootstrap Modal nach der Eingabe-Validierung nach dem Klick in asp.net C#

Antwort

Verwandte Themen