twitter-bootstrap 带有 UpdatePanel 的 ASP.NET Bootstrap Modal - 可能的解决方案？

ASP.NET Bootstrap Modal with UpdatePanel - possible solution?

提问by Dan Thomas

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.

我不是专家，如果我错了，请纠正我。我不相信 Twitter Bootstrap Modal 对话框在 ASP.NET 中与 UpdatePanels 一起使用时会起作用。至少，我从来没有得到一个简单的确认 Bootstrap 模态对话框来使用它，而且我读过很多帖子说这是不可能的。

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:

我想知道是否有办法通过某种方式禁用 UpdatePanel 来解决这个问题 - 不是禁用控件 - 只是阻止 UpdatePanel 像 UpdatePanel 一样工作。它会像这样工作：

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.

用户单击 UpdatePanel 中的一个按钮，该按钮调用一些禁用 UpdatePanel 的客户端 javascript，然后弹出模态对话框。当用户在模式对话框中单击“确定”时，客户端 javascript 会重新启用 UpdatePanel，然后调用服务器。

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.

有人认为这是可能的吗？我对 javascript 和客户端编程知之甚少，无法知道如何做这样的事情。我的意思是，如果你明白我的意思，即使说“我知道的还不够多”，听起来好像我知道的比我知道的多。

So I thought I'd post this (probably silly) idea and see if anyone could come 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 comes to javascript. :)

PS：就我正在开发的应用程序而言，我使用 UpdatePanel 的唯一原因是，当服务器响应时间过长时，我可以弹出“请稍候”消息。如果有人能给我指出一个 ASP.NET Web 窗体解决方案，它可以在没有 UpdatePanel 的情况下完成我需要的工作，我很乐意看到它。请记住，当谈到 javascript 时，我是多么愚蠢。:)

采纳答案by Aliasgar Rajpiplawala

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.

您可以在更新面板中使用 Bootstrap 模式对话框，因为我在最近的项目之一中有用户。请在页面头部包含 bootstrap 的样式和 css 文件。

<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" autocomplete="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>