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?
 
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
 
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
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
CodeCruiserCommented:
0
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.