javascript - ASP.NET Bootstrap Modal with UpdatePanel - possible solution? - Stack Overflow

admin管理员组

文章数量:1356908

I'm no expert, so please correct me if I'm wrong. I don't believe that Twitter Bootstrap Modal dialogs work when used in ASP.NET with UpdatePanels. At least, I was never able to get a simple confirmation Bootstrap modal dialog to work with one, and I've read plenty of posts that say it's not possible.

Assuming that the above is correct, and if it's not, I'd LOVE to know the answer...

I was wondering if there might be a way to solve this issue by somehow disabling the UpdatePanel - not disabling the controls - just stop the UpdatePanel from acting like an UpdatePanel. It would work like this:

User clicks a button in the UpdatePanel, which calls some client-side javascript that disables the UpdatePanel and then pops up the modal dialog. When the user clicks "OK" in the modal dialog, client-side javascript re-enables the UpdatePanel then does the call to the server.

Does anyone think this is possible? I don't know enough about javascript and client-side programming to have a clue how to do something like this. I mean, even saying "I don't know enough" makes it sound like I know more than I do, if you know what I mean.

So I thought I'd post this (probably silly) idea and see if anyone could e up with a way to make it work.

Thanks!

PS: I the case of the app I'm working on, the only reason I'm using an UpdatePanel is so I can have a "Please Wait" message pop up when the server takes too long to respond. If someone could point me to an ASP.NET Web Forms solution that can do what I need without an UpdatePanel, I'd love to see it. And please remember how stupid I am when it es to javascript. :)

I'm no expert, so please correct me if I'm wrong. I don't believe that Twitter Bootstrap Modal dialogs work when used in ASP.NET with UpdatePanels. At least, I was never able to get a simple confirmation Bootstrap modal dialog to work with one, and I've read plenty of posts that say it's not possible.

Assuming that the above is correct, and if it's not, I'd LOVE to know the answer...

I was wondering if there might be a way to solve this issue by somehow disabling the UpdatePanel - not disabling the controls - just stop the UpdatePanel from acting like an UpdatePanel. It would work like this:

User clicks a button in the UpdatePanel, which calls some client-side javascript that disables the UpdatePanel and then pops up the modal dialog. When the user clicks "OK" in the modal dialog, client-side javascript re-enables the UpdatePanel then does the call to the server.

Does anyone think this is possible? I don't know enough about javascript and client-side programming to have a clue how to do something like this. I mean, even saying "I don't know enough" makes it sound like I know more than I do, if you know what I mean.

So I thought I'd post this (probably silly) idea and see if anyone could e up with a way to make it work.

Thanks!

PS: I the case of the app I'm working on, the only reason I'm using an UpdatePanel is so I can have a "Please Wait" message pop up when the server takes too long to respond. If someone could point me to an ASP.NET Web Forms solution that can do what I need without an UpdatePanel, I'd love to see it. And please remember how stupid I am when it es to javascript. :)

• javascript
• asp
• twitter-bootstrap

Share Improve this question Follow asked Apr 21, 2014 at 19:38 Dan ThomasDan Thomas 8511 gold badge22 silver badges88 bronze badges 2

• This site works best if you post specific examples of code you have tried or errors you are encountering. Can you post anything you've attempted already? Have you tried implementing the modals with Bootstrap? – dethtron5000 Commented Apr 21, 2014 at 19:57
• stackoverflow./a/79005565/7738489 Check. this will help you. – Dinkar Veer Commented Sep 20, 2024 at 6:50

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You can use Bootstrap modal dialog in update panel as I have user in one of my recent project. Please include the style and css files of bootstrap at the header of the page.

<link href="assets/css/bootstrap.css" rel="stylesheet">
<script src="assets/js/bootstrap-transition.js" type="text/javascript"></script>
<script src="assets/js/bootstrap-modal.js" type="text/javascript"></script>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <div id="dvSearch" class="modal hide fade" tabindex="-1"
            role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    ×</button>
                <h3 id="H3">
                    Contact Search <span id="HeadNextaction"></span>
                </h3>
            </div>
            <div>
                <div class="row-fluid">
                    <div class="span3">
                        First Name
                    </div>
                    <div class="span8">
                        <input type="text" autoplete="off" runat="server" id="txtsearchfirstname" placeholder="Start typing.."
                            class="typeahead" />
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span3">
                        Last Name
                    </div>
                    <div class="span8">
                        <input type="text"  runat="server" id="txtsearchlastname" placeholder="Start typing.."
                            class="typeahead" />
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span3">
                        Email
                    </div>
                    <div class="span3">
                        <input type="text" runat="server" id="txtsearchemail" placeholder="Start typing.."
                            class="typeahead" />
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span3">
                        Phone
                    </div>
                    <div class="span3">
                        <input type="text"  runat="server" id="txtsearchphone" placeholder="Start typing.."
                            class="typeahead" />
                    </div>
                </div>
            </div>
            <div>
            </div>
            <div class="modal-footer">
                <asp:HiddenField ID="hditemselected" runat="server" />
                <asp:Button ID="btnSearchSubmit" OnClientClick="..some client side javascript" OnClick="...server call"
                    class="btn" runat="server" Text="Submit" />
                    Search</a>
                <button class="btn" data-dismiss="modal" aria-hidden="true">
                    Close</button>
            </div>
        </div>
//This is how you will call your modal dialog
 <img alt="search" src="images/search.png" data-toggle="modal" data-target="#dvSearch"/>
</ContentTemplate>
</asp:UpdatePanel>

本文标签： javascriptASPNET Bootstrap Modal with UpdatePanelpossible solutionStack Overflow