FileUpload, UpdateProgress and Master Pages

Hi...
don't you need to insert a scriptmanager before using the updatepanel? like so:
 

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

Select allOpen in new window

When I use those tags I usually have to register the ajax dll:
 

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

Select allOpen in new window

cheers

I have the script manager added to the master page:

<asp:ScriptManager ID="ScriptManager1" EnableScriptGlobalization="true" EnableScriptLocalization="true" runat="server" />

Select allOpen 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.

I like this BlockUI plugin approach

http://encosia.com/using-jquery-to-enhance-aspnet-ajax-progress-indication/

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.

>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.

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.

There are loads of resources if you just search for the events I mentioned

http://rathodbhavesh.wordpress.com/tag/pagerequestmanager-beginrequest-endrequest-example/

http://weblogs.asp.net/wallym/archive/2006/11/01/UpdatePanel-Data-Transfer-and-the-beginRequest-and-endRequest-client-side-page-life-cycle-events.aspx

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. :)

This is not JQuery. Its plain Javascript. JQuery will only be used if you want to use the BlockUI plugin of JQuery.

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>

Select allOpen 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.

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>

Select allOpen in new window

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

http://forums.asp.net/p/1105208/1689084.aspx

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.

Its because you are not doing partial postback so those two events never fire.

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).

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.