FileUpload, UpdateProgress and Master Pages

We have a simple page that has a FileUpload control and a Button. The page takes some time to compute server side code and I want to add an UpdateProgress control. I don't need completion (what takes time isn't the upload but the calculations and DB queries). I tried to adapt some code I found on the web:
<%@ Page Title="Portal RH - Recolha de Picagens" Language="VB" MasterPageFile="~/Master/Site.master"
  AutoEventWireup="false" CodeFile="Picagem.aspx.vb" Inherits="Picagem" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="MainContent" runat="Server">
  <script language="javascript" type="text/javascript">
    function showWait()
    {
      if ($get('FU1').value.length > 0)
      {
        $get('upg1').style.display = 'block';
      }
    }
  </script>
  <asp:UpdatePanel ID="upd1" runat="server">
    <Triggers>
      <asp:PostBackTrigger ControlID="btnSubmit" />
    </Triggers>
    <ContentTemplate>
      <asp:Table ID="Table1" runat="server" HorizontalAlign="Center" Width="1000px">
        <asp:TableRow ID="TableRow1" runat="server" HorizontalAlign="center" VerticalAlign="Middle">
          <asp:TableCell ID="TableCell2" runat="server" ColumnSpan="6" Font-Bold="True" Font-Size="Large"
            HorizontalAlign="Center" VerticalAlign="Middle" Font-Names="Arial">
            <asp:Label ID="ActionStatus" Text=" " runat="server" Font-Bold="True" Font-Names="Arial"
              Font-Size="Large" ForeColor="Red" Width="1000px" Style="text-align: center" /></asp:TableCell>
        </asp:TableRow>
        <asp:TableRow ID="TitleRow" runat="server" HorizontalAlign="right" VerticalAlign="Middle">
          <asp:TableCell runat="server" ColumnSpan="6" Font-Bold="True" Font-Size="X-Large"
            HorizontalAlign="Center" VerticalAlign="Middle" Font-Names="Arial" CssClass="Titulo1">Recolha de Picagens</asp:TableCell>
        </asp:TableRow>
        <asp:TableRow runat="server">
          <asp:TableCell runat="server" ColumnSpan="6" />
        </asp:TableRow>
        <asp:TableRow ID="HeaderRow" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="Small"
          HorizontalAlign="Center">
          <asp:TableCell runat="server" Width="140px" />
          <asp:TableCell runat="server" Width="140px" />
          <asp:TableCell runat="server" Width="140px" HorizontalAlign="Left" ColumnSpan="2">
            <asp:FileUpload ID="FU1" runat="server" />
          </asp:TableCell>
          <asp:TableCell runat="server" Width="140px">
            <asp:Button ID="btnSubmit" OnClientClick="showWait();" runat="server" Text="Enviar" />
          </asp:TableCell>
          <asp:TableCell ID="TableCell1" runat="server" Width="140px" />
        </asp:TableRow>
      </asp:Table>
      <asp:UpdateProgress ID="upg1" AssociatedUpdatePanelID="upd1" runat="server">
        <ProgressTemplate>
          <div style="background-image: url(PleaseWait.gif); background-repeat: no-repeat;
            padding-left: 40px; line-height: 32px; height: 32px; width: 500px" class="style1">
            <strong>Por Favor Aguarde! </strong>
          </div>
        </ProgressTemplate>
      </asp:UpdateProgress>
    </ContentTemplate>
  </asp:UpdatePanel>
</asp:Content>

Open in new window

This only works, apparently, for normal pages. With a master page, I fail to get this working.
Any ideas?
LVL 18
CluskittAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

APoPhySptCommented:

Hi...
don't you need to insert a scriptmanager before using the updatepanel? like so:
 
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

Open in new window


When I use those tags I usually have to register the ajax dll:
 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

Open in new window



cheers
0
CluskittAuthor Commented:
I have the script manager added to the master page:
<asp:ScriptManager ID="ScriptManager1" EnableScriptGlobalization="true" EnableScriptLocalization="true" runat="server" />

Open in new window

Pretty much all my pages use it, so might as well let it stay in the Master page.
And UpdatePanel, UpdateProgress and FileUpload aren't AJAX Control Toolkit controls, they're regular AJAX controls, already included in ASP.Net libraries. At least for ASP.Net 4.
0
CodeCruiserCommented:
0
Bootstrap 4: Exploring New Features

Learn how to use and navigate the new features included in Bootstrap 4, the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.

CluskittAuthor Commented:
I'm not sure that is what I'm looking for. The file upload in itself is almost instantaneous. It's the calculations and queries in the code behind that take longer. And they're kinda dynamic. I never really know how long or what % I'm at. It kinda depends on the file contents and on other considerations in the database. That's why all I really need is a "Please Wait" kinda sign. And the above code should do it, except it doesn't work for Master pages.
0
CodeCruiserCommented:
>That's why all I really need is a "Please Wait" kinda sign

I have not examined it but I think that is what it is. You are doing the upload and all the other work in partial postback of update panel right? You can intercept the BeginRequest and EndRequest events of the page manager and show a please wait sort of message using the BlockUI plugin or anything else that you like.
0
CluskittAuthor Commented:
Ok, I'm still trying to understand how I can use that in my code. I don't know much about JQuery, so it's gonna have to be hit and miss, unless you can provide some simple example adapted to my code.
0
CluskittAuthor Commented:
Yes, I did search. I found a few. But as I said, I don't know much JQuery, so I'll have to fiddle around to get this working for my page. I'm mostly a desktop programmer, so I'm not too comfortable with web languages. Might just take a while, but I'll get there. :)
0
CodeCruiserCommented:
This is not JQuery. Its plain Javascript. JQuery will only be used if you want to use the BlockUI plugin of JQuery.
0
CluskittAuthor Commented:
I'm not too handy with Javascript either. But I've managed to get to this:
<%@ Page Title="Portal RH - Recolha de Picagens" Language="VB" MasterPageFile="~/Master/Site.master"
  AutoEventWireup="false" CodeFile="Picagem.aspx.vb" Inherits="Picagem" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="MainContent" runat="Server">
  <script type="text/javascript" language="javascript">
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

    function BeginRequestHandler(sender, args)
    {
      document.getElementById('div1').style.visibility = 'visible';
    }

    function EndRequestHandler(sender, args)
    {
      document.getElementById('div1').style.visibility = 'hidden';
    }
  </script>
  <asp:UpdatePanel ID="upd1" runat="server" UpdateMode="Conditional">
    <Triggers>
      <asp:AsyncPostBackTrigger ControlID="btnSubmit" />
    </Triggers>
    <ContentTemplate>
      <asp:Table ID="Table1" runat="server" HorizontalAlign="Center" Width="1000px">
        <asp:TableRow ID="TableRow1" runat="server" HorizontalAlign="center" VerticalAlign="Middle">
          <asp:TableCell ID="TableCell2" runat="server" ColumnSpan="6" Font-Bold="True" Font-Size="Large"
            HorizontalAlign="Center" VerticalAlign="Middle" Font-Names="Arial">
            <asp:Label ID="ActionStatus" Text=" " runat="server" Font-Bold="True" Font-Names="Arial"
              Font-Size="Large" ForeColor="Red" Width="1000px" Style="text-align: center" />
          </asp:TableCell>
        </asp:TableRow>
        <asp:TableRow ID="TitleRow" runat="server" HorizontalAlign="right" VerticalAlign="Middle">
          <asp:TableCell runat="server" ColumnSpan="6" Font-Bold="True" Font-Size="X-Large"
            HorizontalAlign="Center" VerticalAlign="Middle" Font-Names="Arial" CssClass="Titulo1">
            Recolha de Picagens
          </asp:TableCell>
        </asp:TableRow>
        <asp:TableRow runat="server">
          <asp:TableCell runat="server" ColumnSpan="6" />
        </asp:TableRow>
        <asp:TableRow ID="HeaderRow" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="Small"
          HorizontalAlign="Center">
          <asp:TableCell runat="server" Width="140px" />
          <asp:TableCell runat="server" Width="140px" />
          <asp:TableCell runat="server" Width="140px" HorizontalAlign="Left" ColumnSpan="2">
            <asp:FileUpload ID="FU1" runat="server" />
          </asp:TableCell>
          <asp:TableCell runat="server" Width="140px">
            <asp:Button ID="btnSubmit" OnClientClick="showWait();" runat="server" Text="Enviar" />
          </asp:TableCell>
          <asp:TableCell ID="TableCell1" runat="server" Width="140px" />
        </asp:TableRow>
      </asp:Table>
    </ContentTemplate>
  </asp:UpdatePanel>
  <div id="div1" style="background-image: url(PleaseWait.gif); background-repeat: no-repeat;
    visibility: hidden; padding-left: 40px; line-height: 32px; height: 32px; width: 500px"
    class="style1">
    <strong>Por Favor Aguarde! </strong>
  </div>
</asp:Content>

Open in new window

This almost works. The problem I have is one I've had before: FileUpload won't work. The code is always empty. I've tried putting it inside or outside the repeater, same thing. Tried the same with the button, and variations of both. The code simply says that the FileUpload has no file.
0
CluskittAuthor Commented:
This code, on the other hand, allows me to work with the file, but won't toggle the div visibility:
<%@ Page Title="Portal RH - Recolha de Picagens" Language="VB" MasterPageFile="~/Master/Site.master"
  AutoEventWireup="false" CodeFile="Picagem.aspx.vb" Inherits="Picagem" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="MainContent" runat="Server">
  <script type="text/javascript" language="javascript">
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

    function BeginRequestHandler(sender, args)
    {
      document.getElementById('div1').style.visibility = 'visible';
    }

    function EndRequestHandler(sender, args)
    {
      document.getElementById('div1').style.visibility = 'hidden';
    }
  </script>
  <asp:UpdatePanel ID="upd1" runat="server" UpdateMode="Conditional">
    <Triggers>
      <asp:PostBackTrigger ControlID="btnSubmit" />
    </Triggers>
    <ContentTemplate>
      <asp:Table ID="Table1" runat="server" HorizontalAlign="Center" Width="1000px">
        <asp:TableRow ID="TableRow1" runat="server" HorizontalAlign="center" VerticalAlign="Middle">
          <asp:TableCell ID="TableCell2" runat="server" ColumnSpan="6" Font-Bold="True" Font-Size="Large"
            HorizontalAlign="Center" VerticalAlign="Middle" Font-Names="Arial">
            <asp:Label ID="ActionStatus" Text=" " runat="server" Font-Bold="True" Font-Names="Arial"
              Font-Size="Large" ForeColor="Red" Width="1000px" Style="text-align: center" /></asp:TableCell>
        </asp:TableRow>
        <asp:TableRow ID="TitleRow" runat="server" HorizontalAlign="right" VerticalAlign="Middle">
          <asp:TableCell runat="server" ColumnSpan="6" Font-Bold="True" Font-Size="X-Large"
            HorizontalAlign="Center" VerticalAlign="Middle" Font-Names="Arial" CssClass="Titulo1">Recolha de Picagens</asp:TableCell>
        </asp:TableRow>
        <asp:TableRow runat="server">
          <asp:TableCell runat="server" ColumnSpan="6" />
        </asp:TableRow>
        <asp:TableRow ID="HeaderRow" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="Small"
          HorizontalAlign="Center">
          <asp:TableCell runat="server" Width="140px" />
          <asp:TableCell runat="server" Width="140px" />
          <asp:TableCell runat="server" Width="140px" HorizontalAlign="Left" ColumnSpan="2">
            <asp:FileUpload ID="FU1" runat="server" />
          </asp:TableCell>
          <asp:TableCell runat="server" Width="140px">
            <asp:Button ID="btnSubmit" OnClientClick="showWait();" runat="server" Text="Enviar" />
          </asp:TableCell>
          <asp:TableCell ID="TableCell1" runat="server" Width="140px" />
        </asp:TableRow>
      </asp:Table>
    </ContentTemplate>
  </asp:UpdatePanel>
  <div id="div1" style="background-image: url(PleaseWait.gif); background-repeat: no-repeat;
    visibility: hidden; padding-left: 40px; line-height: 32px; height: 32px; width: 500px"
    class="style1">
    <strong>Por Favor Aguarde! </strong>
  </div>
</asp:Content>

Open in new window

0
CodeCruiserCommented:
Yeah I just tested your code. File upload does not work with update panel

http://forums.asp.net/p/1105208/1689084.aspx
0
CluskittAuthor Commented:
I know. But the code I had originally posted works. Except that with Master pages the UpdateProgress doesn't toggle. Likewise, the last code I posted also works properly, except that the div doesn't toggle. So, the FileUpload itself is working properly. It's just the div that isn't toggling.
0
CodeCruiserCommented:
Its because you are not doing partial postback so those two events never fire.
0
CluskittAuthor Commented:
But if I change the PostBackTrigger to AsyncPostBackTrigger, then the FileUpload doesn't work. And if I remove the UpdatePanel entirely, the div doesn't toggle. I can't seem to get to a state where both work. It's frustrating (and one of the reasons I hate web programming).
0
CodeCruiserCommented:
>But if I change the PostBackTrigger to AsyncPostBackTrigger, then the FileUpload doesn't work

That's a known fact.

One option is to not use update panel and use the OnClientClick of button to show a div. Then at the end of server side code, add startup script to page to hide the div.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
CluskittAuthor Commented:
That was so simple, I should have simply started with that. But I guess I was just following the rest of the pages, which have update panels and upgrade progress controls working properly.
I did just change one thing, which was to directly control the div in the code behind. My master page based pages don't seem to like startup scripts. But it works just as well with:
CType(Page.FindControl("div1"), HtmlGenericControl).Visible = False

Thanks a lot for your help.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.