asp.net上按钮事件中的 Bootstrap 警报

qcuzuvrc  于 12个月前  发布在  .NET
关注(0)|答案(4)|浏览(132)

我怎样才能使一个代码,当我点击asp.net上的一个按钮,一个 Bootstrap 或消息框的警报消息出现?

protected void ButtonLogin_Click(object sender, EventArgs e)
    {
        //TextBoxEmail.Text = DateTime.Now.ToString();
        string UserName = TextBoxEmail.Text.Trim();
        string password = TextBoxPassword.Text.Trim();
        OracleConnection conn = new OracleConnection(strConnString);
        conn.Open();

        sql = "select password from userlogin where USERNAME = '" + UserName + "' and password ='" + password + "' ";
    cmd = new OracleCommand(sql, conn);

    // orada=new OracleDataAdapter(com.CommandText,conn);
    // cmd.CommandType = CommandType.Text;
    dr = cmd.ExecuteReader();
    //dr.Read();

    if (dr.HasRows)
    {
        Label1.Text = "";
        Response.Redirect("Details.aspx");
    }
    else
    {
        Label1.Text = "No data found...";
        conn.Close();
    }

   }

}

字符串
在上面的else部分中:

else
         {
             Label1.Text = "No data found...";
             conn.Close();
         }


当用户名和密码不匹配时,我希望在网站上显示一个 Bootstrap 警报或消息框:“密码不正确”。我该怎么做?

pgpifvop

pgpifvop1#

HTML(主页):

<div class="MessagePanelDiv">
    <asp:Panel ID="Message" runat="server" Visible="False">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
        <asp:Label ID="labelMessage" runat="server" />
    </asp:Panel>
</div>

字符串
ENUM:

public enum WarningType
{
    Success,
    Info,
    Warning,
    Danger
}


CodeBehind:

/// <summary>
/// Shows a message based of type and message
/// </summary>
/// <param name="message">Message to display</param>
/// <param name="type">ENUM type of the message</param>

public void ShowMessage(string Message, WarningType type)
{
    //gets the controls from the page
    Panel PanelMessage = Master.FindControl("Message") as Panel;
    Label labelMessage = PanelMessage.FindControl("labelMessage") as Label;

    //sets the message and the type of alert, than displays the message
    labelMessage.Text = Message;
    PanelMessage.CssClass = string.Format("alert alert-{0} alert-dismissable", type.ToString().ToLower());
    PanelMessage.Attributes.Add("role", "alert");
    PanelMessage.Visible = true;
}


使用方法:

ShowMessage("<strong> Error! </strong> Error message to show", WarningType.Danger);

编辑

CSS类:

.MessagePanelDiv 
{
    position:fixed;
    left: 35%;
    top:15%;
    width:35%;
}


JavaScript定时器自动删除警报:

$(document).ready(function () {
    window.setTimeout(function () {
        $(".alert").fadeTo(1500, 0).slideUp(500, function () {
            $(this).remove();
        });
    }, 3000);
});

没有MasterPage

<div class="MessagePanelDiv">
   <asp:Panel ID="Message" runat="server" CssClass="hidepanel">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    <asp:Label ID="labelMessage" runat="server" />
   </asp:Panel>
 </div>


CSS:

.hidepanel {
   display: none;
 }


CodeBehind:

labelMessage.Text = "Successfully updated."
 Message.CssClass = String.Format("alert alert-{0} alert-dismissable", Constants.WarningType.Success.ToString().ToLower())
 Message.Attributes.Add("role", "alert")

qv7cva1a

qv7cva1a2#

为此,您需要引用bootstrap链接和jquery

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

字符串
下一步将此添加到您的头部部分在Aspx页:

<style type="text/css">
        .messagealert {
            width: 100%;
            position: fixed;
             top:0px;
            z-index: 100000;
            padding: 0;
            font-size: 15px;
        }
    </style>
    <script type="text/javascript">
        function ShowMessage(message, messagetype) {
            var cssclass;
            switch (messagetype) {
                case 'Success':
                    cssclass = 'alert-success'
                    break;
                case 'Error':
                    cssclass = 'alert-danger'
                    break;
                case 'Warning':
                    cssclass = 'alert-warning'
                    break;
                default:
                    cssclass = 'alert-info'
            }
            $('#<%=ButtonLogin.ClientID %>').append('<div id="alert_div" style="margin: 0 0.5%; -webkit-box-shadow: 3px 4px 6px #999;" class="alert fade in ' + cssclass + '"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>' + messagetype + '!</strong> <span>' + message + '</span></div>');
        }
    </script>


在Cs代码中

protected void ShowMessage(string Message, MessageType type)
    {
        ScriptManager.RegisterStartupScript(this, this.GetType(), System.Guid.NewGuid().ToString(), "ShowMessage('" + Message + "','" + type + "');", true);
    }


现在在elsePart call Error函数中,您也可以通过更改消息类型来使用此函数

ShowMessage("Aww, password is wrong", MessageType.Error);

6gpjuf90

6gpjuf903#

老问题,但对于那些只想要一个简单的解决方案。

您必须拥有一个ContentPlaceHolder ID为“main”的母版页

创建这个类:

public class BootstrapPage : Page
{
    public enum WarningType
    {
        Success,
        Info,
        Warning,
        Danger
    }

    public void ShowNotification(string message, WarningType type)
    {
        var mainContentHolder = Master.FindControl("main") as ContentPlaceHolder;
        Panel notificationPanel = new Panel();
        {
            LiteralControl closeButton = new LiteralControl();
            closeButton.Text = "<a href=\"#\" class=\"close\" data-dismiss=\"alert\" aria-label=\"close\">&times;</a>";

            Label notificationMessage = new Label() { Text = message };

            notificationPanel.Controls.Add(closeButton);
            notificationPanel.Controls.Add(notificationMessage);
        }
        notificationPanel.CssClass = string.Format("alert alert-{0} alert-dismissable", type.ToString().ToLower());
        notificationPanel.Attributes.Add("role", "alert");

        mainContentHolder.Controls.AddAt(0, notificationPanel);
    }
}

字符串
然后使您的WebForm从BootstrapPage而不是System.Web.UI.Page继承
在需要的时候调用它:

ShowNotification("Error: You can't do that!", WarningType.Error);

nbnkbykc

nbnkbykc4#

我一直试图找到一个解决方案,在C# Web窗体工作了一段时间了。我已经尝试了这个解决方案,但我没有成功。我一直在使用一个简单的Web应用程序,在那里我没有能够得到警报显示在一个动作。
现在我找到了一个有点功能的解决方案,但不理想,使用 Bootstrap 。

content2的前端代码

div id="liveAlertPlaceholder"></div>             
                <asp:Button id="liveAlertBtn" class="btn btn-primary" runat="server" Text="Live alert button" OnClick="liveAlertBtn_Click"/>

字符串

内容1和脚本的前端代码

<script>
    function triggerAlertFunction() {
        const alertPlaceholder = document.getElementById('liveAlertPlaceholder');
        const wrapper = document.createElement('div');
        wrapper.innerHTML = [
            `<div class="alert alert-primary" role="alert">`,
            `  A simple primary alert—check it out! `,
            '  </div>',               
        ].join('')
        alertPlaceholder.append(wrapper);
                  
    }
    </script>

后台c# aspx.cs中

protected void liveAlertBtn_Click(object sender, EventArgs e)
    {
        Page.ClientScript.RegisterStartupScript(this.GetType(), "CallMyFunction", "triggerAlertFunction()", true);
    }

相关问题