Monday, November 21, 2022

Bootstrap 3 alert with auto hide with ASP.NET C#

 <script>

        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'

            }

            $('#alert_container').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>');


            $("#alert_div").fadeTo(5000, 1000).slideUp(1000, function () {

                $("#alert_div").slideUp(1000);

            });

        }

</script>


aspx page

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <asp:UpdatePanel runat="server" ID="upPopUps" UpdateMode="Conditional">

        <ContentTemplate>

             <div class="messagealert" id="alert_container">

        </ContentTemplate>

  </asp:UpdatePanel>

</asp:Content>


aspx.cs

 protected void btnDelete_Click(object sender, EventArgs e)

        {

            this.DeleteRecord(Convert.ToInt32(ViewState["ID"]));

            // Insert Operation Logs


            new UserLogs().InsertLog(Session["UserID"].ToString(), "User Deletion");

            

            string messageType = "Success";

            String message = "Successfully deleted...";

            ScriptManager.RegisterStartupScript(this, this.GetType(), System.Guid.NewGuid().ToString(), "ShowMessage('" + message + "','" + messageType  + "');", true);

            

        }

reference:- https://www.webcodeexpert.com/2015/10/how-to-show-animated-bootstrap-alert.html

http://jsfiddle.net/g1rnnr8r/2/

https://www.aspsnippets.com/questions/191634/Bootstrap-alert-message-from-Server-Side-in-ASPNet/


https://stackoverflow.com/questions/23101966/bootstrap-alert-auto-close

No comments:

Post a Comment