web-dev-qa-db-fra.com

Display Bootstrap Modal from Asp.Net Webforms

Besoin de suggestions, comment ouvrir un Twitter bootstrap modal, à partir du code Asp.net Webform derrière?

Je veux ouvrir le modal en fonction de certaines exigences au moment de la sauvegarde. Une fois que l'utilisateur a cliqué sur le bouton Enregistrer, il exécute les validations dans le code derrière et s'il y a des erreurs de validation, affichez toutes les erreurs dans la boîte de dialogue modale bootstrap. Tout cela devrait se produire lorsque vous cliquez sur le bouton Enregistrer.

J'ai essayé avec le morceau de code ci-dessous, mais il me demande Java erreur de script "Erreur: l'objet ne prend pas en charge la propriété ou la méthode" modale "". Merci

Asp.Net Webforms 4.5

Bootstrap V3.0.1

JQuery-1.9.0.js

jquery-ui-1.8.24.js

Default.aspx 

<asp:Content runat="server" ID="DisplayContent" ContentPlaceHolderID="DisplayContent">
<div class="container">
</div>
</asp:Content>

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">

<div class="container">
    <div class="btn-group">
        <asp:Button ID="btnSubmit" class="btn-info" runat="server" Text="Submit"          
        OnClick="btnSubmit_Click"></asp:Button>
    </div>
</div>


<%--Bootstrap Modal Dialog--%>
<div class="modal fade" id="myModal" 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">Validation Errors List for HP7 Citation</h4>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>
        </div>
    </div>
</div>
</asp:Content>


Default.aspx.cs

protected void btnSubmit_Click(object sender, EventArgs e)
{
  ScriptManager.RegisterClientScriptBlock(this, this.GetType(),"none", "
 <script>$('#mymodal').modal('show');</script>", false);
 }



 Script order defined in master page

 <asp:PlaceHolder ID="PlaceHolder1" runat="server">
    <%: Scripts.Render("~/bundles/modernizr") %>
    <%: Scripts.Render("~/bundles/jquery") %>
    <%: Scripts.Render("~/bundles/bootstrap") %>
    <%: Scripts.Render("~/bundles/common") %>
</asp:PlaceHolder>
asp.nettwitter-bootstrapbootstrap-modal
16
Sidh

Tout d'abord, je vous suggère de mettre votre Modal dans un UpdatePanel et de définir le titre et le corps de CodeBehind. Par cette astuce, vous n'avez pas besoin de créer un modal séparé pour chaque bouton ou chaque message. Je modifie donc votre code et ajoute un UpdatePanel:

<div class="container">
    <div class="btn-group">
        <asp:Button ID="btnSubmit" class="btn-info" runat="server" Text="Submit"          
        OnClick="btnSubmit_Click"></asp:Button>
    </div>
</div>


<!-- Bootstrap Modal Dialog -->
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <asp:UpdatePanel ID="upModal" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
            <ContentTemplate>
                <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"><asp:Label ID="lblModalTitle" runat="server" Text=""></asp:Label></h4>
                    </div>
                    <div class="modal-body">
                        <asp:Label ID="lblModalBody" runat="server" Text=""></asp:Label>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
                    </div>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</div>


et dans CodeBehind:

protected void btnSubmit_Click(object sender, EventArgs e)
{
    lblModalTitle.Text = "Validation Errors List for HP7 Citation";
    lblModalBody.Text = "This is modal body";
    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal();", true);
    upModal.Update();
}

Tout d'abord, nous définissons le titre et le corps du modal, puis nous les affichons et enfin mettons à jour le UpdatePanel.

Une bonne pratique pour améliorer la vitesse de chargement de la page consiste à mettre le code Modal à la fin de la page, en plus cela vous aide à éviter tout conflit avec d'autres UpdatePanels ou éléments.
Une suggestion plus avancée et plus délicate: mettez le code Modal à la fin de votre MasterPage et écrivez une fonction globale pour le mettre à jour, et rendez-vous la vie encore plus facile!

Dépannage:
Si vous obtenez le Error: Object doesn't support property or method 'modal', une raison probable pourrait être l'échec de la configuration de Bootstrap, essayez de vérifier votre code avec l'exemple officiel bootstrap: http://getbootstrap.com/javascript/#modals
Si l'erreur persiste, vous trouverez peut-être ces liens utiles:
http://geekswithblogs.net/JeremyMorgan/archive/2012/09/18/how-to-use-Twitter-bootstrap-on-an-asp.net-website.aspx =
http://www.mytecbits.com/Microsoft/dot-net/bootstrap-3-0-0-with-asp-net-web-forms

37
Moshtaf