从 c# 方法调用 Bootstrap 模式窗口答案

【问题标题】：Calling Bootstrap modal window from c# method从 c# 方法调用 Bootstrap 模式窗口
【发布时间】：2015-09-01 08:33:56
【问题描述】：

我遇到了一个奇怪的问题，我有一个引导模式窗口，我试图从 c# 方法调用它。这是我的模态窗口的代码

    <div id="TechnicalRejectModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Enter reason for rejection</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <asp:TextBox ID="txtTechnicalRejectModal" runat="server"></asp:TextBox>
                </div>
            </div>
            <div class="modal-footer">

                <button id="technicalrejectmodalbutton" type="button" class="btn btn-primary btn-lg" data-dismiss="modal" runat="server" onclick="">Submit</button>
            </div>
        </div>
    </div>
</div>

我正在调用以下 javascript 和 c# 代码

 <script type="text/javascript">
    function openModal() {
        $('#TechnicalRejectModal').modal('show');
    }
 </script>

ScriptManager.RegisterStartupScript(this, this.GetType(), "LaunchServerSide", "$(function() { openModal(); });", true);

我遇到的问题是，模态窗口似乎只在我将它放在执行 c# 代码的按钮后面时才出现。我试图让它作为更大方法的一部分被调用，该方法将允许用户在文本框中输入文本，然后将其输出到一个变量，我可以将它与其他一些参数一起插入到 SQL 后端数据库中。从列表视图中的按钮调用模态窗口，该按钮也将参数传递回 C# 代码

  <asp:Button runat="server" Text="Tech Reject" CommandArgument='<%# Eval("RequestID") %>' CommandName="TechReject"/>

如何让模态窗口弹出并允许用户输入详细信息，然后继续使用代码块？该问题与启动模态窗口后运行的代码似乎使其立即消失有关。如果有人有其他解决方案可以让它工作，请告诉我，尽管我更愿意使用 Bootstrap 而不是 AJAX。

【问题讨论】：

标签： c# twitter-bootstrap modal-dialog

【解决方案1】：

在玩了一段时间后，我设法把它整理好了。这就是我现在拥有的。

列表视图按钮如下所示。它将 requestID 传递给模态窗口：

    <td>
        <a data-toggle="modal" data-id='<%# Eval("RequestID") %>'  title="Reject" class="open-BusinessRejectModal btn btn-primary" href="#BusinessRejectModal">Business Reject</a>
    </td>

Javascipt 用于将“requestid”推送到模态文本框

 $(document).on("click", ".open-BusinessRejectModal", function () {
        var requestID = $(this).data('id');
        document.getElementById('txtBusinessRejectRequestId').value = requestID;
    });

模态窗口如下所示：

   <div id="BusinessRejectModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Enter reason for rejection</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    Request ID: <asp:TextBox ID="txtBusinessRejectRequestId" runat="server" ClientIDMode="static" BorderStyle="None" Text="test line"></asp:TextBox>
                    <br /><br />
                    Reason for Rejection: 
                    <br />
                    <asp:TextBox ID="txtBusinessRejectReason" runat="server" CssClass="form-control" Rows="6" TextMode="MultiLine"></asp:TextBox>
                </div>
            </div>
            <div class="modal-footer">
                <asp:Button ID="btnSubmitBusinessRejectModal" runat="server" Text="Submit" class="btn btn-primary btn-lg" data-dismiss="modal" onclick="btnSubmitBusinessRejectModal_Click" UseSubmitBehavior="false"/>

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

模态窗口本质上允许用户输入请求的描述，然后在单击按钮后使用 c# 将其与 requestid 一起读取。

希望这可以帮助遇到同样问题的其他人。干杯

【讨论】：