Question

I am working on a asp.net c# project which has a input box and a button. Input box has some validation and on successful validation I would like to open a bootstrap modal to fill further information. Is there any way to do this?

I tried using the JavaScript but its not working for me. Below is the code for same.

Default.aspx file code:

<input type="text" runat="server" name="mobile-no" placeholder="Mobile Number" class="contact-no" id="number" pattern="^\d{10}$" title="10 digit Mobile Number" required="required" />
<asp:Button CssClass="btn btn-success" ID="btnSell" runat="server" Text="Sell" OnClick="btnSell_Click" data-toggle="modal" data-target="#sell_request" />

Bootstrap Modal code:

<div class="modal fade" id="sell_request" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header text-center">
                <a class="btn pull-right" data-dismiss="modal"><span>&times;</span></a>
                <h3 class="register_header"><strong>Request Details</strong></h3>
                <h6>Please fill below detials for submit a request</h6>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <a class="btn btn-success" data-dismiss="modal">Skip</a>
                <span class="hidden-xs hidden-sm">OR</span>
                <a class="btn btn-success" data-dismiss="modal">Submit</a>
            </div>
        </div>
    </div>
</div>

CS Code on button click:

    protected void btnSell_Click(object sender, EventArgs e)
    {
        ScriptManager.RegisterStartupScript(this, GetType(), "ServerControlScript", "<script>$('#sell_request').modal('show');</script>", false);
    }

Answer 1

我按原样使用了您的代码并进行了以下更改：

从btnSell

data-toggle="modal" data-target="#sell_request"

添加了对jQuery，bootstrap.js和bootstrap.css的CDN引用（按此顺序）。

现在有效！

代码背后：

protected void Page_Load(object sender, EventArgs e)
{

}

protected void btnSell_Click(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(this, GetType(), "ServerControlScript", "<script>$('#sell_request').modal('show');</script>", false);
}

<强> .ASPX：

<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
    <form id="form1" runat="server">
        <div class="modal fade" id="sell_request" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header text-center">
                        <a class="btn pull-right" data-dismiss="modal"><span>&times;</span></a>
                        <h3 class="register_header"><strong>Request Details</strong></h3>
                        <h6>Please fill below detials for submit a request</h6>
                    </div>
                    <div class="modal-body">
                    </div>
                    <div class="modal-footer">
                        <a class="btn btn-success" data-dismiss="modal">Skip</a>
                        <span class="hidden-xs hidden-sm">OR</span>
                        <a class="btn btn-success" data-dismiss="modal">Submit</a>
                    </div>
                </div>
            </div>
        </div>
        <input type="text" runat="server" name="mobile-no" placeholder="Mobile Number" class="contact-no" id="number" pattern="^\d{10}$" title="10 digit Mobile Number" required="required" />
        <asp:Button CssClass="btn btn-success" ID="btnSell" runat="server" Text="Sell" OnClick="btnSell_Click" />
    </form>
</body>

<强>输出：

Answer 2

Your bootstrap modal .aspx code looks good as far as I can tell. I am doing something similar, but I have the javascript defined in my .aspx file, and I just call it from code behind using script manager. Here is a sample of my code from default.aspx.cs:

ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openContactModal();", true);

This calls a java script function that is defined in default.aspx:

<!--Modal Popup for Contacts-->
<script type="text/javascript">
    /* Allows us to open and close the Address Book modal from code behind */
    function openContactModal() {
        $('#contactModal').modal('show');
    }
    function closeContactModal() {
        $('#contactModal').modal('hide');
    }
</script>

You can substitute openSellRequest() and #sell_request into this code and see if it works for you.

EDIT: Here is a sample of the default.aspx code for my modals - there are several extra elements in here, although I am not sure that they are required:

<div class="modal fade" id="contactModal" tabindex="-1" role="dialog" aria-labelledby="contactModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="contactModalLabel">Contact Info for <asp:Label ID="lblContactHeaderName" runat="server"></asp:Label></h4>
         </div>
         <div class="modal-body">
            <asp:Table ID="contactTable" runat="server" Width="95%">
                <asp:TableRow>
                    ... your content here ...
                </asp:TableRow>

            </asp:Table>
         </div>
         <div class="modal-footer">
           <asp:Button ID="deleteContact" CssClass="btn btn-danger" runat="server" Text="Delete" OnClick="deleteContact_Click" Visible="false" />
           <asp:Button ID="editContact" CssClass="btn btn-primary" runat="server" Text="Edit" onclick="editContact_Click" />
           <asp:Button ID="saveContact" CssClass="btn btn-primary" runat="server" Text="Save" OnClick="saveContact_Click" Visible="false" />
           <asp:Button ID="cancelContact" CssClass="btn btn-default" data-dismiss="modal" runat="server" Text="Close" /> 
         </div>
      </div>
  </div>
</div>

And here is my button code:

<asp:Button ID="btnShowContact" CssClass="btn btn-primary btn-sm dont-print" runat="server" OnClick="showContact" Text="Show Contact Details" data-toggle="modal" data-target="#contactModal" />

Open Bootstrap Modal after input validation after button click in asp.net c#

2 个答案: