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

本文关键字：模式 窗口 Bootstrap 调用 方法 | 更新日期: 2023-09-27 18:10:35

我有一点奇怪的问题，我有一个引导模态窗口，我试图从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#方法调用Bootstrap模式窗口

经过相当多的玩我设法得到它排序。这是我现在拥有的。

列表视图按钮看起来像这样。它将requesttid传递给模态窗口:

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

javascript用于将" requesttid "推送到模态文本框

 $(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。

希望这有助于其他人有同样的问题。欢呼声

相关文章：