如何在asp.net c#中的bootstrap模式弹出窗口中显示来自代码的消息

时间:2016-07-19 10:32:18

标签: asp.net c#-4.0 twitter-bootstrap-3 postback bootstrap-modal

实际上我的意思是当我点击位于模态弹出窗口中的asp点网按钮时。 当我点击该按钮时,我想从服务器打印出正确保存数据的消息。

当我点击按钮引导程序的模态弹出时,消失的bcoz回发。 我该怎么做才能从服务器打印消息。

下面是我在HTML中的模态pop uo代码。

<!-- Modal -->
            <div class="modal fade" id="myModal" role="dialog">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Modal Header</h4>
                        </div>
                        <div class="modal-body">

 <asp:Label ID="lblMessage" runat="server" ></asp:Label>
                        </div>
                        <div class="modal-footer">
                            <asp:Button ID="Button2" OnClick="Button2_Click" runat="server" Text="Click Me" />
                        </div>
                    </div>
                </div>
            </div>

c#代码

protected void Button2_Click(object sender, EventArgs e)
        {
            Label1.Text = "I am called";
        }

1 个答案:

答案 0 :(得分:1)

在回发后为click事件添加逻辑以重新打开模态或查找回发到服务器的替代方法,例如使用AJAX。

代码背后:

protected void Button2_Click(object sender, EventArgs e)
{
    lblMessage.Text = "I am called";
    ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "showModal();", true);
}

<强> .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" />
    <script type="text/javascript">
        function showModal() {
            $("#myModal").modal('show');
        }

        $(function () {
            $("#btnShow").click(function () {
                showModal();
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <input type="button" id="btnShow" value="Show Modal" />
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body">
                        <asp:Label ID="lblMessage" runat="server"></asp:Label>
                    </div>
                    <div class="modal-footer">
                        <asp:Button ID="Button2" runat="server" Text="Click Me" OnClick="Button2_Click" />
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>