在asp.net c＃中单击按钮后进行输入验证后，打开Bootstrap Modal

rpurant 发表于 Dev

紫罗兰色

我正在一个具有ainput box和a的asp.net c＃项目中工作button。Input box有一些验证，并且在成功验证后，我想打开一个引导程序模式以填充更多信息。有什么办法吗？

我尝试使用，JavaScript但对我不起作用。下面是相同的代码。

Default.aspx 文件代码：

<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" />

引导程序模态代码：

<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代码：

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

丹尼斯·韦塞尔斯

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

data-toggle="modal" data-target="#sell_request"已从btnSell中删除
添加了对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>