I have a asp.net web form Page which uses master page also.
This is a simple page which displays some text and has a form, this page also allows user to upload resume in .doc, .docx & pdf format.
Problem with this code is that i am not able to trigger
for some reason <asp:Button ID="btnUploadCV" runat="server" Text="Upload" CssClass="btnUpload" onclick="btnUploadCV_Click"/>
<%# Page Title="" Language="C#" MasterPageFile="~/en/SiteMasterPage.master" AutoEventWireup="true" CodeFile="career.aspx.cs" Inherits="career" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"></asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<!-- Content Page-->
<!-- page content wrapper -->
<div id="page-content-area" class="page-content-area">
<div id="pg-left-bar" class="pg-left-bar">
<div class="page-title">
<h5><asp:Label ID="lblPageTitle" CssClass="page-title-lbl" runat="server" Text="Introduction"></asp:Label></h5>
</div>
<div class="page-text">
<asp:Label ID="lblPageContents" runat="server" Text=""></asp:Label>
</div>
<div class="career-form-wrapper">
<!-- UpdatePanel -->
<asp:UpdatePanel ID="updPnlArticles" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlCareerForm" runat="server">
<div class="row-form">
<div class="row-lbl-wrapper"> <span class="row-req">*</span>
<asp:Label ID="lblFirstName" runat="server" CssClass="row-label" Text="First Name:"></asp:Label>
</div>
<asp:TextBox ID="txtFirstName" runat="server" CssClass="row-input"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfFN" runat="server" ValidationGroup="Careers" ErrorMessage="*" CssClass="row-validate" ControlToValidate="txtFirstName"></asp:RequiredFieldValidator>
</div>
<div class="row-form">
<div class="row-lbl-wrapper"> <span class="row-req">*</span>
<asp:Label ID="lblFamilyName" runat="server" CssClass="row-label" Text="Family Name:"></asp:Label>
</div>
<asp:TextBox ID="txtFamilyName" runat="server" CssClass="row-input"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfLN" runat="server" ValidationGroup="Careers" ErrorMessage="*" CssClass="row-validate" ControlToValidate="txtFamilyName"></asp:RequiredFieldValidator>
</div>
<div class="row-form">
<div class="row-lbl-wrapper"> <span class="row-req">*</span>
<asp:Label ID="lblEmail" runat="server" CssClass="row-label" Text="Email:"></asp:Label>
</div>
<asp:TextBox ID="txtEmail" runat="server" CssClass="row-input"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvEmail" runat="server" ValidationGroup="Careers" ErrorMessage="*" CssClass="row-validate" ControlToValidate="txtEmail"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="revEmail" runat="server" ErrorMessage="*" CssClass="row-validate" ControlToValidate="txtEmail" ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*" ValidationGroup="Careers"></asp:RegularExpressionValidator>
</div>
<div class="row-form">
<div class="row-lbl-wrapper">
<asp:Label ID="lblPhone" runat="server" CssClass="row-label" Text="Phone Number:"></asp:Label>
</div>
<asp:TextBox ID="txtPhone" runat="server" CssClass="row-phone" Text=""></asp:TextBox>
<asp:RegularExpressionValidator ID="revPhone" runat="server" ErrorMessage="*" ValidationGroup="Careers" ControlToValidate="txtPhone" ValidationExpression="^([\+]?[0-9]{1,3}[\s.-][0-9]{1,12})([\s.-]?[0-9]{1,4}?)$"></asp:RegularExpressionValidator>
<div class="tooltip tooltip-override" title="Accepts local format (eg. 04 1234567, 050 1234567 or 04-1234567, 050-1234657)<br />and international format (eg. +971 41234567, +971-41234567 ).<br />Also accepts an optional extention of up to four digits (eg. 04 1234567 289 or +974 41234567 289)">
<asp:Image ID="imgtooltip" CssClass="tooltip-img" runat="server" ImageUrl="~/images/tooltipgreen.png" />
</div>
</div>
<div class="row-form">
<div class="row-lbl-wrapper">
<asp:Label ID="lblFax" runat="server" CssClass="row-label" Text="Fax Number:"></asp:Label>
</div>
<asp:TextBox ID="txtFax" runat="server" CssClass="row-input"></asp:TextBox>
<asp:RegularExpressionValidator ID="revFax" runat="server" ErrorMessage="*" ValidationGroup="Careers" ControlToValidate="txtFax" ValidationExpression="^([\+]?[0-9]{1,3}[\s.-][0-9]{1,12})$"></asp:RegularExpressionValidator>
<div class="tooltip tooltip-override" title="Accepts local format (eg. 04 1234567 or 040-1234567)<br />and international format (eg. +974 41234567 or +974-41234567)">
<asp:Image ID="Image1" CssClass="tooltip-img" runat="server" ImageUrl="~/images/tooltipgreen.png" />
</div>
</div>
<div class="row-form">
<div class="row-lbl-wrapper">
<asp:Label ID="lblAddress" runat="server" CssClass="row-label" Text="Address:"></asp:Label>
</div>
<asp:TextBox ID="txtAddress" runat="server" CssClass="row-input-multiline" TextMode="MultiLine"></asp:TextBox>
</div>
<div class="row-form">
<div class="row-lbl-wrapper"> <span class="row-req">*</span>
<asp:Label ID="lblCountry" runat="server" CssClass="row-label" Text="Country:"></asp:Label>
</div>
<asp:DropDownList ID="ddCountry" runat="server" CssClass="row-dd"></asp:DropDownList>
<asp:CascadingDropDown ID="csdCountry" runat="server" Category="Country" TargetControlID="ddCountry" PromptText="-- Select --" LoadingText="[Loading Countries...]" ServiceMethod="FetchCountries" ServicePath="~/wsCountryCity.asmx" PromptValue="0"></asp:CascadingDropDown>
<asp:RequiredFieldValidator ID="rfCountry" ValidationGroup="Careers" ControlToValidate="ddCountry" CssClass="row-validate" InitialValue="0" runat="server" ErrorMessage="*"></asp:RequiredFieldValidator>
</div>
<div class="row-form">
<div class="row-lbl-wrapper">
<asp:Label ID="lblCity" runat="server" CssClass="row-label" Text="City:"></asp:Label>
</div>
<asp:DropDownList ID="ddCity" runat="server" CssClass="row-dd"></asp:DropDownList>
<asp:CascadingDropDown ID="csdCity" runat="server" Category="City" TargetControlID="ddCity" ParentControlID="ddCountry" PromptText="-- Select --" LoadingText="[Loading Cities...]" ServiceMethod="FetchCities" ServicePath="~/wsCountryCity.asmx" PromptValue="0"></asp:CascadingDropDown>
</div>
<div class="row-form">
<div class="row-lbl-wrapper"> <span class="row-req">*</span>
<asp:Label ID="Label1" runat="server" CssClass="row-label" Text="CV:"></asp:Label>
</div>
<asp:FileUpload ID="FileUpload1" runat="server" CssClass="fileUpload" />
<div id="dFileUpload1" class="btnUploadHack">Browse</div>
<asp:Button ID="btnUploadCV" runat="server" Text="Upload" CssClass="btnUpload" onclick="btnUploadCV_Click" />
<asp:RequiredFieldValidator ID="rfvF1" runat="server" ValidationGroup="Careers" ErrorMessage="*" CssClass="row-validate" ControlToValidate="FileUpload1"></asp:RequiredFieldValidator>
<asp:Label ID="lblImageMSG" runat="server" Text=""></asp:Label>
</div>
<div class="contactus-row">
<asp:Button ID="btnSave" runat="server" CssClass="btnContactUsSave" Text="Send Message" onclick="btnSave_Click" ValidationGroup="Careers" />
</div>
</asp:Panel>
<asp:Panel ID="pnlCareerMSG" runat="server"></asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<!-- UpdatePanel -->
</div>
</div>
<div class="pg-right-bar">
<asp:Image ID="imgSideBanner" runat="server" />
</div>
</div>
<!-- page content wrapper -->
<!-- Content Page-->
</asp:Content>
Code Behind
protected void btnUploadCV_Click(object sender, EventArgs e)
{
// code is here
}
So far i am not able to figure out what i s blocking the any button inside from firing. Yes i did even put a simple button to test even that didn't fire.
I am not sure if it is Validation or Update Panel which is creating problem.
I tried using Trigger that didnt work
I tried setting
<asp:Button ID="btnUploadCV" runat="server" Text="Upload" CssClass="btnUpload" onclick="btnUploadCV_Click" CausesValidation="false" />
protected void btnUploadCV_Click(object sender, EventArgs e)
{
Page.Validate();
if (Page.IsValid == true)
{
// your code here
}
}
My problem is it deosn't even enter code block of button for some reason.
Just to add further i am using cascading dropdown for country and cities i am not sure if that is causing any problem I am also using two panels one has the form control and after successful submission i hide this panel & show the other panel with success message all this code with UpdatePanel.
Only way out of this i see is to upload all files main form button Send Message rather than having individual button for all file upload control
UPDATE: I also tried this approach even this doesn't work
Please understand the concept
Update Panel is used for partial post back which is today we call AJAX
However AJAX cannot be used to upload file to the server
AJAX uses xmlHttpRequest which do not support file upload.
So, don't think that its a bug from Microsoft. Even today also, we don't have any javascript library which will support FileUpload using AJAX. All AJAX fileuploaders that you find on internet are using Flash :)
This is the limitation of protocol. Use any other jquery plugin to upload file. Update panel will not work for this.
FileUpload control doesn't work with asynchronous postbacks.To make this work in your application, follow below steps
1.) Place a <asp:ScriptManager /> on the page.
if you are using master page in your application and your web page uses the master page, place script manager in master page. If you don't want master page to have script manager,you can also place script manager on specific web pages anyways.
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
2.) After this, Add <Triggers> for the button btnUploadCV in your Update panel.
<Triggers>
<asp:PostBackTrigger ControlID="btnUploadCV" />
</Triggers>
And rest of your upload button OnClick handler looks like:
protected void btnUploadCV_Click(object sender, EventArgs e)
{
if (FileUpload1.HasFile)
{
fileName = FileUpload1.FileName;
FileUpload1.SaveAs("~/UploadedData/" + fileName);
...
}
}
Related
<div class="dt_content">
<asp:UpdatePanel runat="server" ID="AlertUpdatePanel">
<ContentTemplate>
<UserControl:ApplicationAlert runat="server" ID="ApplicationAlert" />
<UserControl:ApplicationAlert runat="server" ID="PersonalEssayAlert" Visible="false" />
<boas:KeyDates ID="KeyDates" runat="server" Visible="false" />
</ContentTemplate>
</asp:UpdatePanel>
<boas:OtherDocs ID="OtherDocs" runat="server" />
<input type="hidden" runat="server" id="AppDetailsHidden" />
<% var dummy = 0; %>
<% if (IsRep || IsAdmin)
{ %>
<%=ResourceUtility.GetThemeResource("Copy", "Instructions_DocumentTracker_RepAdmin")%>
<% }
else
{ %>
<%=ResourceUtility.GetThemeResource("Copy", "Instructions_DocumentTracker")%>
<% } %>
<!-- Accordian Menu -->
<asp:Repeater ID="DocumentListingRepeater" runat="server" OnItemCreated="DocumentListingRepeater_ItemCreated">
<ItemTemplate>
<ul class="CollapsiblePanelGroup">
<li id="SectionLI" runat="server">
<div>
<ul>
<li class="category">
<h3>
<asp:LinkButton ID="OpenDocumentsLinkButton" runat="server" OnClientClick='<%#"return ToggleDocTrackerPanel(" + Convert.ToChar(39) + "cat" + (((RepeaterItem)Container).ItemIndex).ToString() + Convert.ToChar(39) + ")" %>'
OnCommand="OpenDocumentsLinkButton_Command" CommandArgument='<%#DataBinder.Eval(Container.DataItem,"DocumentCategoryID") %>'><img id="toggle<%#(((RepeaterItem)Container).ItemIndex).ToString()%>" alt="" class="toggle" src="../Images/plus.png" /></asp:LinkButton><a
href='Details.aspx?section=<%# DataBinder.Eval(Container.DataItem, "DocumentCategoryID")%>'><%# DataBinder.Eval(Container.DataItem, "DocumentCategoryDescription")%></a></h3>
</li>
<li id="StatusLI" runat="server">
<h3>
<asp:Literal ID="StatusLiteral" runat="server" /></h3>
</li>
</ul>
</div>
<div id="cat<%#(((RepeaterItem)Container).ItemIndex).ToString()%>" class="CollapsiblePanelContent">
<asp:UpdatePanel ID="DocumentTrac" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:PlaceHolder ID="DocumentTrackerPlaceHolder" runat="server">
<div style="text-align: center">
Loading
<br />
<img runat="server" alt="Please wait." src="~/images/loading2.gif" />
</div>
</asp:PlaceHolder>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="OpenDocumentsLinkButton" />
</Triggers>
</asp:UpdatePanel>
</div>
</li>
</ul>
</ItemTemplate>
</asp:Repeater>
<div style="text-align: center;" runat="server" id="applicationRequirementsPanel">
<a runat="server" id="modalButton">
<asp:Image ID="Image1" runat="server" SkinID="img_appReq" /></a>
</div>
<script type="text/javascript">
ToggleDocTrackerPanel();
</script>
</div>
Hi there!
The code snippet I shared, updates the content inside the content panel.
So we have different user roles, and when running the application as a normal user the OnCommand event gets triggered accordingly, gets all the content from the backend, and updates the 'Please Wait' text with the received content inside the Update Panel, but when I try to log in as Admin the same exact piece of code runs but the OnCommand event does not get triggered.
I tried adding the even name but that does not work.
During the page load I can see the data is getting bounded properly(as it is working fine when logged in a normal user).
Being a backend developer I am not that much familiar with this frontend technology, So little help or explanation would be appreciated. Thanks!
Code behind getting file upload value is null and inside the update panel using file upload. I also used Triggers tag but I'm getting an error when submitting
ERROR:Object reference not set to an instance of an object.
And also debug but getting a null value of File uploader in code behind. Also, I check for (!IsPostBack) property in page load.
<asp:UpdatePanel ID="UpdatePanel9" runat="server" UpdateMode="Conditional">
<Triggers><%--
<asp:PostBackTrigger ControlID="lnkbtn_Update_HostScientistLetter_Edit" />
<asp:AsyncPostBackTrigger ControlID="lnkbtn_Update_HostScientistLetter_Edit"/>--%>
<asp:AsyncPostBackTrigger ControlID="lnkbtn_Update_HostScientistLetter_Edit" />
</Triggers>
<ContentTemplate>
<div class="col-xs-6">
<div class="form-group">
<div class="form-field">
<label class="control-label">Host Scientist Letter</label>
<br />
<div class="table-responsive">
<asp:FileUpload ID="FileUpload_HostScientistLetter_Edit" runat="server" CssClass="form-control" Visible="false" />
<asp:Label ID="lbl_file_error1" runat="server" ForeColor="Red"></asp:Label>
<asp:LinkButton ID="lnkbtn_HostScientistLetter_Edit_update" runat="server" OnClick="lnkbtn_HostScientistLetter_Edit_update_Click" Visible="true"></asp:LinkButton>
<asp:LinkButton ID="lnkbtn_change_HostScientistLetter_Edit" ForeColor="#21a04f" runat="server" Text="Click Here to upload new file" OnClick="lnkbtn_change_HostScientistLetter_Edit_Click"></asp:LinkButton>
<asp:LinkButton ID="lnkbtn_Update_HostScientistLetter_Edit" ForeColor="#21a04f" runat="server" Text="Update" OnClick="lnkbtn_Update_HostScientistLetter_Edit_Click" Visible="false" ValidationGroup="HostScientistLetter"></asp:LinkButton>
<asp:LinkButton ID="lnkbtn_Cancel_HostScientistLetter_Edit" ForeColor="#21a04f" runat="server" Text="Cancel" OnClick="lnkbtn_Cancel_HostScientistLetter_Edit_Click" Visible="false"></asp:LinkButton>
<asp:RequiredFieldValidator ID="RequiredFieldValidator8" Display="Dynamic" runat="server" ErrorMessage="Upload Host Scientist Letter" ControlToValidate="FileUpload_HostScientistLetter_Edit" ValidationGroup="HostScientistLetter" CssClass="err-msg"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator8" Display="Dynamic" runat="server" ErrorMessage="Only .pdf,.doc,.docx,.ppt files are allowed." ValidationExpression="^.*\.(PDF|pdf|doc|docx|DOC|DOCX)$" CssClass="err-
msg" ValidationGroup="HostScientistLetter" ControlToValidate="FileUpload_HostScientistLetter_Edit"></asp:RegularExpressionValidator>
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel runat="server"><ContentTemplate>
<asp:UpdatePanel ID="PanelImportFileForCSV" Visible="false" runat="server">
<ContentTemplate>
<div class="form-group" runat="server">
<label for="textfield" class="control-label col-sm-4">CSV File<span class="ErrorMessage" style="color: red;"> *</span>/label>
<div class="col-sm-8">
<asp:FileUpload runat="server" ID="FileUpload2" /> <asp:RegularExpressionValidator runat="server" ID="RegularExpressionValidator2" ControlToValidate="FileUpload1" ForeColor="DarkRed" ErrorMessage="Only (.mpp) File is allowed" ValidationExpression="^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))(.csv|.CSV)$" />
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate
</asp:UpdatePanel>
<div class="row">
<div class="col-sm-12">
<div class="form-actions">
<asp:button id="btnProceed" runat="server" CssClass="btn" ToolTip="Cancel" Text="Proceed" OnClick="btnProceed_Click" CausesValidation="False"></asp:button>
</div>
</div>
</div>
I know I should use trigger for Full postback for file upload, but i have multiple updatepanels and that idea is not working anymore!
Kindly Help me
Nvm i have fixed the issue by adding the following line in page_Load()
Page.Form.Attributes.Add("enctype", "multipart/form-data")
I have spent hours Googling and searching past questions but have struggled to get anywhere with those answers (be it I can't get it into my solution correctly or it isn't suitable for me as they don't have master pages).
My question is, I have a couple of asp.net pages which can take a while to load (sometimes 5 seconds+) as there is a lot of data being requested from a database on the Page_Load method. To stop users from thinking that the page has crashed and either refreshing the page or doing something else, I want to put up a Loading message hiding everything else on the page (apart from the menu) while it loads.
I am using ASP.Net 4.0 with master pages and coding in C#.
The one where I get the most success is using the UpdatePanel on my master page where the content template covers the contentplaceholder, however I know this is not the best way to go about it and anyway it only shows up once, i.e. The user logs in, the loading message appears and once all the data has loaded on the home page (dashboard.aspx) the loading message disappears, which is kind of what I want. However if the user goes away from that page and then clicks home the loading message never appears again, just takes a while to load. It also never appears for any other page that takes a noticeable time to load.
Below is the body of the master.aspx
<body>
<form runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div class="page">
<div class="header">
<div class="title">
<h1>
Header
</h1>
</div>
<div class="loginDisplay">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
[ Log In
]
</AnonymousTemplate>
<LoggedInTemplate>
Welcome <span class="bold">
<asp:LoginName ID="HeadLoginName" runat="server" />
</span>! [
<asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out"
LogoutPageUrl="~/Default.aspx" />
]
</LoggedInTemplate>
</asp:LoginView>
</div>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"
IncludeStyleBlock="false" Orientation="Horizontal" OnMenuItemClick="NavigationMenu_MenuItemClick">
<Items>
<asp:MenuItem Text="Home" />
<asp:MenuItem Text="About" />
</Items>
</asp:Menu>
</div>
</div>
<div class="main">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<asp:Panel ID="Panel1" runat="server" HorizontalAlign="Center">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/loader.gif" />
</asp:Panel>
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanelAnimationExtender ID="UpdatePanel1_UpdatePanelAnimationExtender"
runat="server" Enabled="True" TargetControlID="UpdatePanel1">
</asp:UpdatePanelAnimationExtender>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
</form>
And below is the page for the dashboard.aspx (a page which has a long loading time)
<asp:Panel ID="PanelWelcome" runat="server">
<h1>
Welcome
<asp:Label ID="LabelUserName" runat="server" Text="[User Name]" /> to your
personal Dashboard.</h1>
<table width="100%" cellpadding="5px">
<tr>
<td style="width: 70%" valign="top">
<asp:Panel ID="Panel2" runat="server">
<p>
</p>
<h4>
Up and Coming </h4>
<br />
<asp:GridView ID="GridViewItin" runat="server" Width="100%" HorizontalAlign="Left"
OnRowDataBound="GridViewItin_RowDataBound">
</asp:GridView>
</asp:Panel>
</td>
<td style="width: 30%">
<asp:Panel ID="PanelProfile" runat="server">
<asp:ImageButton ID="ImageButtonProfile" runat="server" ImageUrl="~/Images/BlankProfile.jpg"
Width="150px" /><br />
<h4>
Name:</h4>
<asp:Label ID="LabelPARname" runat="server" Text="[Person Name]"></asp:Label>
<h4>
Company:</h4>
<asp:Label ID="LabelBARname" runat="server" Text="[Company Name]"></asp:Label>
<h4>
Date of Birth:</h4>
<asp:Label ID="LabelPARdob" runat="server" Text="[DOB]"></asp:Label><br />
<asp:LinkButton ID="LinkButtonProfilePage" runat="server" OnClick="LinkButtonProfilePage_Click">More details...</asp:LinkButton>
</asp:Panel>
</td>
</tr>
</table>
</asp:Panel>
Could you please show me the best way to go about it and where I am going wrong? Also how I can hide the ContentTemplate when the UpdateProgress template is showing that would be great?
Thanks.
Okay so I figured it out what I was doing wrong, I thought I would post what I did to hopefully help someone else who might end up with the same issues...
Basically I hadn't thought about it logically. There are controls outside the update panel such as a NavigationMenu which would never fire the update progress because they had nothing to do with the Panel! I had to add triggers to the update panel to deal with all the things that happen outside the panel.
So, in my master page I had the following code
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="NavigationMenu" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress ID="progress" runat="server" DynamicLayout="true" DisplayAfter="0">
<ProgressTemplate>
<div id="overlay">
<div id="modalprogress">
<div id="theprogress">
<asp:Image ID="loader" runat="server" ImageAlign="AbsMiddle" ImageUrl="~/images/loader.gif" />
Please wait...
</div>
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanelAnimationExtender ID="UpdatePanel1_UpdatePanelAnimationExtender"
runat="server" Enabled="True" TargetControlID="UpdatePanel1">
</asp:UpdatePanelAnimationExtender>
Hopefully that will help someone else!
You can use UpdateProgress control. You can get it From Toll box under Ajax Extensions Tab.
I am describing you a scenario:
Suppose I have One Upadate Panel name UpdatePnl1 , In that I have a Button Say GO.when we hit on go it should redirect to another page. before that it will promt you please wait.
Now my Code will be like that
<asp:UpdatePanel ID="UpdatePnl1" runat="server">
<ContentTemplate>
<asp:Button ID="BtnGO" runat="server" Text="GO" onclick="BtnGO_Click"/>
</ContentTemplate>
</asp:Updatepanel>
Button click code:
protected void BtnGO_Click(object sender, EventArgs e)
{
Response.Redirect("Example.aspx");
}
Now here is the code for UpdateProgress what you need to add
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePnl1" >
<ProgressTemplate>
<asp:Label ID="LblWaitMsg" runat="server" Text="Processing Request, Please Wait..."></asp:Label>
</ProgressTemplate>
</asp:UpdateProgress>
Note: Your page Should contain ScriptManager.
I have a webform with two upload controls and a number of textfields.
When the button is pressed the files get uploaded and then get processed.
The upload takes no time, but the processing does.
I know I can't have an upload control in an update panel, so I can't work out how to use the update progress control to show my progress.
My page with an updateprogress control that does work is as follows:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" DynamicLayout="true">
<ProgressTemplate>
<div class="LOADING">
Your data is being processed<br />
<br />
<img src="/images/loading.gif" /><br />
<br />
Please wait...
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<div class="addFixture">
<asp:ValidationSummary ID="ValidationSummary1" ValidationGroup="fixture" runat="server" />
<label>
Type
<asp:DropDownList ID="ddlType" runat="server" AppendDataBoundItems="true">
<asp:ListItem Text=""></asp:ListItem>
</asp:DropDownList>
<label>
Date
</label>
<asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
<label>
Name 1</label>
<asp:TextBox ID="txtName1" runat="server"></asp:TextBox>
<label>
Name 2
<asp:TextBox ID="txtName2" runat="server"></asp:TextBox>
<label>
First XML File</label>
<asp:FileUpload ID="firstFileUp" runat="server" />
<br />
<label>
Second Xml File</label>
<asp:FileUpload ID="secondFileUp" runat="server" />
<br />
<br />
<asp:Button ID="SubmitButton" runat="server" CausesValidation="true" Text="Submit" OnClick="SubmitButton_Click" />
<asp:Label ID="ErrorMessageLabel" runat="server" EnableTheming="false"></asp:Label>
</div>
</ContentTemplate>
</asp:UpdatePanel>
I have searched for this, but people seem to be trying to get the progress of the file upload and not the processing.
Can anyone help?
Remove the UpdatePanel as all the way you can't use FileUpload controls inside it.
Add to the SubmitButton OnClientClick property with following value: OnClientClick="showProgress()"
Also add onto the page javascript function below:
function showProgress() {
var updateProgress = $get("<%= UpdateProgress1.ClientID %>");
updateProgress.style.display = "block";
}
By the way, consider to use some async file upload control like one from the Ajax Control Toolkit library
You can use an UpdatePanel and the FileUpload if you use the ASyncFileUploadControl. It works pretty well. Make sure you download the latest version because there were a couple of issues with prior releases.