Display AJAX UpdateProgress with UpdatePanel PostBackTrigger in Master Page in ASP.Net

Last Reply on Nov 30, 2016 02:49 AM By AnandM

Posted on Nov 30, 2016 01:50 AM
 30 May 2015   
the above article works in a 1 web form test project.

But not when integrated into a Master Page based solution.
Is there a different article I should look at ?
Posted on Nov 30, 2016 02:49 AM

Hi PeteJordan,

I have created a sample which full fill your requirement


<%@ 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">
    <style type="text/css">
            margin: 0;
            padding: 0;
            font-family: Arial;
            font-size: 10pt;
            position: fixed;
            z-index: 999;
            height: 100%;
            width: 100%;
            top: 0;
            background-color: Black;
            filter: alpha(opacity=60);
            opacity: 0.6;
            -moz-opacity: 0.8;
            z-index: 1000;
            margin: 300px auto;
            padding: 10px;
            width: 130px;
            background-color: White;
            border-radius: 10px;
            filter: alpha(opacity=100);
            opacity: 1;
            -moz-opacity: 1;
        .center img
            height: 128px;
            width: 128px;
    <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">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
            <div class="modal">
                <div class="center">
                    <img alt="" src="loader.gif" />
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <div style="margin: 20px">
                <asp:FileUpload ID="FileUpload1" runat="server" />
                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" ErrorMessage="Required"
                    ControlToValidate="FileUpload1" runat="server" ForeColor="Red"></asp:RequiredFieldValidator>
                <br />
                <br />
                <asp:Button ID="btnUpload" Text="Submit" runat="server" OnClick="Upload" />
            <asp:PostBackTrigger ControlID="btnUpload" />
    <script type="text/javascript">
        window.onsubmit = function () {
            if (Page_IsValid) {
                var updateProgress = $find("<%= UpdateProgress1.ClientID %>");
                window.setTimeout(function () {
                }, 100);


protected void Upload(object sender, EventArgs e)
    string fileName = System.IO.Path.GetFileName(FileUpload1.FileName);
    FileUpload1.SaveAs(Server.MapPath("~/Uploads/") + fileName);