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

时间:2015-09-01 08:33:57

标签: c# twitter-bootstrap modal-dialog

我有一个奇怪的问题,我有一个我尝试从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。

1 个答案:

答案 0 :(得分:0)

经过相当多的游戏后,我设法让它排序。这就是我现在拥有的。

列表视图按钮如下所示。它将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#输入请求的描述。

希望这有助于其他人遇到同样的问题。干杯