Create message box in MasterPage to access in child page in ASP.Net

Last Reply 3 months ago By kalpesh

Posted 3 months ago

Hiii,

I am developing application where i need to use alert messages every after doing crud or any other operations.

So i need to show a message box which placed inside master page and show in every child pages operation  to reduce replication of code.

Child pages data placed inside individual updatepanel.

Posted 3 months ago

Refer the below sample code and implement it as per your code logic.

MasterPage.master

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/jscript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/jscript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link type="text/css" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <style type="text/css">
        .message
        {
            width: 100%;
            position: fixed;
            top: 50px;
            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'
            }
            $('body').append('<div id="alert_div" style="margin: 0 10%; -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>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Default.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <br />
    <asp:ScriptManager runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpPanel" runat="server">
        <ContentTemplate>
            &nbsp;&nbsp;<asp:Button ID="btnSucess" runat="server" Text="Sucess" CssClass="btn btn-success" />
            &nbsp;&nbsp;<asp:Button ID="btnError" runat="server" Text="Error" CssClass="btn btn-danger" />
            &nbsp;&nbsp;<asp:Button ID="btnWarning" runat="server" Text="Warning" CssClass="btn btn-warning" />
            &nbsp;&nbsp;<asp:Button ID="btnInfo" runat="server" Text="Info" CssClass="btn btn-info" />
            <br />
        </ContentTemplate>
    </asp:UpdatePanel>
    <script type="text/javascript">
        $(function () {
            //Call on Page Load
            ButtonclickEvent();
        });

        // Created common function
        function ButtonclickEvent() {
            $("[id*=btnSucess]").on("click", function () {
                ShowMessage("Record submitted successfully", "Success");
            });
            $("[id*=btnError]").on("click", function () {
                ShowMessage("A problem has occurred while submitting data", "Error");
            });

            $("[id*=btnWarning]").on("click", function () {
                ShowMessage("A problem has occurred while submitting data", "Warning");
            });

            $("[id*=btnInfo]").on("click", function () {
                ShowMessage("Please verify your data before submitting", "Info");
            });
        }

        var prm = Sys.WebForms.PageRequestManager.getInstance();
        if (prm != null) {
            prm.add_endRequest(function (sender, e) {
                if (sender._postBackSettings.panelsToUpdate != null) {
                    //Call on UpdatePanel’s Asynchronous request or Partial PostBack
                    ButtonclickEvent();
                }
            });
        };
    </script>
    <br />
</asp:Content>

Screenshot