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

Last Reply on Apr 13, 2018 07:40 AM By kalpesh

Posted on Apr 12, 2018 03:25 AM


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.

You are viewing reply posted by: kalpesh on Apr 13, 2018 07:40 AM.
Posted on Apr 13, 2018 07:40 AM

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


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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head runat="server">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/jscript" src=""></script>
    <script type="text/jscript" src=""></script>
    <link type="text/css" rel="stylesheet" href="" />
    <style type="text/css">
            width: 100%;
            position: fixed;
            top: 50px;
            z-index: 100000;
            padding: 0;
            font-size: 15px;
    <script type="text/javascript">
        function ShowMessage(message, messagetype) {
            var cssclass;
            switch (messagetype) {
                case 'Success':
                    cssclass = 'alert-success'
                case 'Error':
                    cssclass = 'alert-danger'
                case 'Warning':
                    cssclass = 'alert-warning'
                    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>');
    <asp:ContentPlaceHolder ID="head" runat="server">
    <form id="form1" runat="server">
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">


<%@ 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 ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <br />
    <asp:ScriptManager runat="server">
    <asp:UpdatePanel ID="UpPanel" runat="server">
            &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 />
    <script type="text/javascript">
        $(function () {
            //Call on Page Load

        // 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
    <br />