CODEWITHSUNDEEP
twitter-bootstrapmodal-dialog
Sergio
Sergio

Reputation: 1423

Open Bootstrap Modal from code-behind

Anyone knows how to open a twitter bootstrap modal, from code behind?

I want to open the modal based on some requeriment at the moment of the save. Something like "Hey there's no stock, pick up one of the following options to continue (discard, reserve...) and press that button (that may do a postback for continue)"

I'm using ASP.NET web forms.

Upvotes: 34

Views: 134469

Answers (9)

Dinkar Veer
Dinkar Veer

Reputation: 69

This worked for me.

aspx code

<asp:UpdatePanel ID="update_panel_gallery" runat="server">
            <ContentTemplate>
                <div class="container">
                    <div class="row">
                        <asp:Repeater runat="server" ID="repAllGallery" OnItemCommand="repAllGallery_ItemCommand">
                            <ItemTemplate>
                                <div class="col-md-3 col-sm-12 pt-4">
                                    <div class="gallery">
                                        <div class="card cards">
                                            <asp:ImageButton runat="server" ID="imgAllGallery" class="img_gal" ImageUrl='<%# Eval("images","Admin/{0}") %>' CommandName="show" CausesValidation="false" />
                                            <div class="card-body text-center">

                                                <span class="card-title"><i class="fa me-2"></i>
                                                    <asp:Label ID="lbl_desc" runat="server" Text='<%#Eval("description")%>'></asp:Label>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </ItemTemplate>
                        </asp:Repeater>

                        <div id="MyPopup" class="modal fade" role="dialog">
                            <div class="modal-dialog modal-lg">

                                <div class="modal-content">
                                    <div class="modal-header">
                                        <p>
                                            <asp:Label ID="lbl_caption" runat="server" CssClass="ali"></asp:Label>
                                        </p>
                                        <button type="button" class="close" data-dismiss="modal">
                                            &times;</button>
                                    </div>
                                    <div class="modal-body">
                                        <asp:Image ID="imgbig" CssClass="img-thumbnail" runat="server" Width="100%" />

                                    </div>
                                    
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>

c# Code:

ScriptManager.RegisterStartupScript(Page, Page.GetType(), "MyPopup", "$('#MyPopup').modal('show');", true);

Upvotes: 0

hussains8
hussains8

Reputation: 731

This line worked for me to open Bootstrap Modal behind code

ScriptManager.RegisterStartupScript(Page, Page.GetType(), "randomText", "$(document).ready(function () {$('#myModal').modal();});", true);

Upvotes: 0

Ameji012
Ameji012

Reputation: 81

All of the example above should work just add a document ready action and change the order of how you perform the updates to the texts, also make sure your using Script manager alternatively non of this will work for you. Here is the text within the code behind.

aspx

<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">
                            <h4 class="modal-title"><asp:Label ID="lblModalTitle" runat="server" Text=""></asp:Label></h4>
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        </div>
                        <div class="modal-body">
                            <asp:Label ID="lblModalBody" runat="server" Text=""></asp:Label>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
                        </div>
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </div>

Code Behind

lblModalTitle.Text = "Validation Errors";
lblModalBody.Text = form.Error;
upModal.Update();
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$(document).ready(function () {$('#myModal').modal();});", true);

Upvotes: 1

Hamid Talebi
Hamid Talebi

Reputation: 1318

Maybe this answer is so late, but it's useful.
to do it,we have 3 steps:
1- Create a modal structure in HTML.
2- Create a button to call a function in java script, to open modal and set display:none in CSS .
3- Call this button by function in code behind .
you can see these steps in below snippet :

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

Hidden Button: 

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

Script Code: 

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

code behind: 

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

this solution is one of any solutions that I used it .

Upvotes: 11

Danny
Danny

Reputation: 11

This method of opening the Modal would not display the Modal for me. I found this as a work arround.

I removed:

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

Than I added an asp:label named lblJavaScript and in code behind call:

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

Now the Modal will display.

Upvotes: 1

wallace740
wallace740

Reputation: 1380

By default Bootstrap javascript files are included just before the closing body tag

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

I took these javascript files into the head section right before the body tag and I wrote a small function to call the modal popup:

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

then I could call the modal popup from code-behind with the following:

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

Upvotes: 47

Dan M
Dan M

Reputation: 53

FYI,

I've seen this strange behavior before in jQuery widgets. Part of the key is to put the updatepanel inside the modal. This allows the DOM of the updatepanel to "stay with" the modal (however it works with bootstrap).

Upvotes: 0

Sergio
Sergio

Reputation: 1423

Finally I found out the problem preventing me from showing the modal from code-behind. One must think that it was as easy as register a clientscript that made the opening, like:

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

But this never worked for me.

The problem is that Twitter Bootstrap Modals scripts don't work at all when the modal is inside an asp:Updatepanel, period. The behaviour of the modals fail from each side, codebehind to client and client to codebehind (postback). It even prevents postbacks when any js of the modal has executed, like a close button that you also need to do some sever objects disposing (for a dirty example)

I've notified the bootstrap staff, but they replied a convenient "please give us a fail scenario with only plain html and not asp." In my town, that's called... well, Bootstrap not supporting anything more that plain html. Nevermind, using it on asp.

I thought them to at least looking what they're doing different at the backdrop management, that I found causes the major part of the problems, but... (justa hint there)

So anyone that has the problem, drop the updatepanel for a try.

Upvotes: 24

tomaszbak
tomaszbak

Reputation: 8287

How about doing it like this:

1) show popup with form

2) submit form using AJAX

3) in AJAX server side code, render response that will either:

  • show popup with form with validations or just a message
  • close the popup (and maybe redirect you to new page)

Upvotes: 0

Related Questions