Is there a way to send Alerts from content to master page?

Question

Im looking for a way to send messages from mi content-pages in ASP to my master page. I've tried to use the Alert component from bootstrap, and i cant get it to work.

This is my code so far:

Masterpage

<Master Language="VB" AutoEventWireup="false" CodeBehind="MasterPage.Master.vb" Inherits="FoodBusinessManager.Master" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

    <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'
            }
            $('#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>');
        }
    </script>

    <asp:ContentPlaceHolder ID="Head" runat="server"></asp:ContentPlaceHolder>
</head>
<body>

    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Food Business Manager</a>
        </div>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Seguridad
                    </a>
                    <div id="menu_Administracion" class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a id="drop_BackupRestore" class="dropdown-item" href="#">Backup & Restore</a>
                        <a id="drop_Bitacora" class="dropdown-item" href="Bitacora.aspx">Bitacora</a>
                        <a id="drop_Idiomas" class="dropdown-item" href="Idiomas.aspx">Administrar Idiomas</a>
                        <a id="drop_Perfiles "class="dropdown-item" href="AgegarPermisos.aspx">Agregar Perfiles</a>
                    </div>
                </li>
            </ul>
        </div>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="fas fa-power-off"></span> Logout</a></li>
        </ul>
    </nav>

    <div>

     <asp:ContentPlaceHolder ID="Contenido" runat="server">
        <div class="messagealert" id="alert_container"></div>
     </asp:ContentPlaceHolder>

    </div>

</body>
</html>

My content page is empty

Contentpage-backend

Public Class Default1
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        'Session.Add("test", "1")

        MostrarMensaje("Mensaje de Prueba", "Success")

    End Sub

    Protected Sub MostrarMensaje(Mensaje As String, Tipo As String)
        ScriptManager.RegisterStartupScript(Me.Master.Page, Me.Master.GetType, System.Guid.NewGuid().ToString, "ShowMessage('" & Mensaje & "','" & Tipo & "');", True)
    End Sub
End Class

What im trying to achieve here is to implement some kind of message component to implement once, and use all-around my content pages. Im willing to accept other aproaches to this:)

Thanks in advance..

Answer 1

I tried your code, you managed to call Javascript method but you just need to remove fade in from class to show alert:

class="alert fade in ' + cssclass + '"

Should be:

class="alert ' + cssclass + '"

See: https://getbootstrap.com/docs/4.0/components/alerts/

Is there a way to send Alerts from content to master page?

Question

1 answers

solution1
0 ACCPTED 2020-04-03 08:00:12

Is there a way to send Alerts from content to master page?

Question

1 answers

solution1 0 ACCPTED 2020-04-03 08:00:12

solution1
0 ACCPTED 2020-04-03 08:00:12