GOAL: Create a page that shows a loading image on button click, which disappears after the processing is complete.
ISSUE: I have a page with an Ajax UpdatePanel that initially works correctly, displaying a loading page on button click, and then displays a GridView. However, after that happens, the page constantly refreshes and returns my GridView to its original state (I do some manual column adjustments OnRowDataBound like adding a legend row, merging some cells, cell background color changes, etc.)
The page is structured like so:
I am trying to include an Ajax UpdatePanel that shows a loading image after the Generate Report button is pressed.
On the content page, I essentially wrap the user control (report control shown in blue above and named filterControl below) and the content (gridview defined in .aspx page and bound in the code-behind) in the update panel:
<asp:UpdatePanel ID="updatePanelControls" runat="server">
<ContentTemplate>
<uc:MultiLevelReportFilter ID="filterControl" runat="server"
ReportTitle="Default Title"
InvisiblePanels="pnlMonths,pnlPeriods,pnlBusinessGroups,pnlDisplay,pnlBrands"
DefaultAccountLevel="level4">
</uc:MultiLevelReportFilter>
<asp:LinkButton ID="thelink2" runat="server"></asp:LinkButton>
<asp:UpdateProgress ID="updateProgress" runat="server">
<ProgressTemplate>
<div id="dvProgress" runat="server" style="background-color: aliceblue; left: 40%; position: absolute; text-align: center; top: 35%; vertical-align: middle;">
<div id="Div1" runat="server" style="background-color: #ffffff; border: 4px solid #DBE5F1; height: 100px; padding: 5px; text-align: center; vertical-align: middle; width: 100px; width: 300px; z-index: 1002;">
<asp:Image ID="Image2" runat="server" Style="margin-top: 25px" Height="50px" Width="50px"
ImageUrl="~/Images/New/ajax-loader.gif" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<% Gridview here composed of manually bound ItemTemplate columns %>
</ContentTemplate>
</asp:UpdatePanel>
I wanted to add a trigger on the content page for btnGenerate, the Generate Report button seen in the user control, but the page errors out because btnGenerate is not actually on the page, rather it's in the control:
A control with ID 'btnGenerate' could not be found for the trigger in UpdatePanel 'updatePanelControls'.
Is this structured incorrectly? Should I have the Ajax on the user control, or content page? I'm trying to follow this MSDN example, but it doesn't have any examples with master pages and user controls.
POSSIBLE REASON?: I should note that I am using an updatePanel on the master page to asynchronously update a label with the current time, like so:
<asp:Timer ID="Clock" runat="server" Interval="10000"></asp:Timer>
<asp:UpdatePanel ID="updatePanelClock" runat="server">
<ContentTemplate>
<asp:Label ID="ClockLabel" runat="server"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Clock" EventName="Tick"></asp:AsyncPostBackTrigger>
</Triggers>
</asp:UpdatePanel>
Is this what's causing the constant refreshes?
EDIT: I've added the UpdateMode property and set it to Conditional on the content page where I'm calling the report control. However, the page is still refreshing incessantly.
Yes, the entire page lifecycle will execute for every updatepanel postback. Anything outside of that update panel will not be refreshed by what the server processed, but all the code will execute as if it were a full page postback.
try javascript function
function myFunction() {
var myVar = setInterval(function () { myTimer() }, 1000);
function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("Label1").innerHTML = "Current Time : " + t;
}
this function call on form body
<body onload="myFunction()">
Related
i am facing problem with saving and uploading image.
this is my code:
asp:UpdatePanel ID="UpdatePanel1" runat="server"
ContentTemplate
div style="position: absolute; top: 53px; left: -22px;
input id="picupload" type="file" runat="server" onchange="File_OnChange(this)" style="visibility:
hidden;"
div
asp:Button ID="btnUpload" runat="server" Text="Button"
this is my javascript on which i am calling my btnupload event:
function File_OnChange(sender) {
document.getElementById('<%=btnUpload.ClientID%>').click();
}
ContentTemplate
**Triggers**
**asp:PostBackTrigger ControlID="btnsave"**
**/Triggers>**
**/asp:UpdatePanel**
this whole code is under update panel.i am having one save button and i want this data to be posted on server on btnsave button event.
but problem is when i am selecting image my page load event fires again and error is coming on this line:
string strName = picupload.PostedFile.FileName;
error is :Object reference not set to an instance of an object.
can anyone tell me why my page load event is firing second time??
plz plz plz plz
I have a div inside an UpdatePanel, this div is shown when a use click on an edit link. The submit buttons to save are inside this div. Now when the use click on the submit button everything is fine except that this div is automatically hidden! the visibility is changed client side using jQuery's show().
Why is the UpdatePanel hiding my div even though it was shown by me? I have tried to set the runat='server' and enableing viewstate but I am getting the same result.
How do I just tell the UpdatePanelto leave thediv` as it is prior to the submit?
Here is a mini project that shows the problem:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
edit
</div>
<div id="edit-div" style="display:none; border: 2px black solid;">
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
<script>
$(document).ready(function(){
$('#edit-link').on('click', function () {
$('#edit-div').show();
});
});
</script>
The code for the submit button:
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = DateTime.UtcNow.ToString();
}
The simplest solution to this problem would be: -
don't use jQuery to show edit-div
make edit-div a server control
convert your edit to an <asp:LinkButton> control, and in its server-side click event, show your edit div
The problem is that the UpdatePanel is restoring the original state as per the markup for the page; edit-div is not a server control and you are showing it via client script, the UpdatePanel is unaware of this and will always return you the original markup.
There are ways to get jQuery to play nice with UpdatePanels in these scenarios, but it is more involved than the simple solution above.
Hope that helps.
I've a web form with some registration details. I've a submit button in a update panel on the same page. If the user doesn't enter anything and clicks on submit button, it should do validation on all the mandatory fields of the form and display a message showing what fields are missing.
As soon as enter submit button with out entering anything, it is doing validation but throwing an execption:
Microsoft JScript runtime error: Sys.InvalidOperationException: Could
not find UpdatePanel with ID
'ctl00_ContentPlaceHolder_Content_UpdatePanel_Submit'. If it is being
updated dynamically then it must be inside another UpdatePanel.
and my update panel with submit button becomes invisible. The code is:
<asp:UpdatePanel ID="UpdatePanel_Submit" runat="server" UpdateMode='conditional'>
<ContentTemplate>
<div style="font-size: 12pt; width: 938px; margin-top: 5px; border-top: ridge 2px gray;">
<div style="margin-top: 10px; width: 938px;">
<asp:Button ID="btn_submit" runat="server" ToolTip="Click here to submit your request."
Text='Submit Request' onclick="btn_submit_Click" />
<asp:LinkButton ID="btn_cancel" runat="server" ToolTip=''>Cancel</asp:LinkButton></span>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
What do I do to prevent my update panel from going invisible?
With UpdateMode Conditional, you either need to add ChildAsTriggers=true or add a Asyncpostback trigger to that button
Few Examples:
http://asp-net-example.blogspot.com/2009/11/ajax-updatepanel-how-to-use-updatemode.html
http://www.asp.net/web-forms/videos/aspnet-ajax/how-do-i-use-the-conditional-updatemode-of-the-updatepanel
if i set EnableViewState="false" then also input data is maintain after postback at the time of using control like
textbox
radio button
checkbox
etc.
So I just wanted to know bit internal things that if EnableViewState="false" then how input data is maintain after postback when we are using control like textbox, radio button checkbox etc. please discuss the internal issue.
Thanks.
here is my aspx code
<%# Page Language="C#" AutoEventWireup="true" EnableViewState="false" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication1.WebForm2" %>
<asp:TextBox ID="TextBox1" runat="server"
style="position: relative; top: 0px; left: 0px;"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server"
style="position: absolute; top: 66px; left: 11px; z-index: 1;"></asp:TextBox>
<asp:RadioButton ID="RadioButton1" runat="server" style="position: relative" />
<asp:CheckBox ID="CheckBox1" runat="server" style="position: relative" />
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
</form>
Input data is maintained because the browser sends the input data to the server on every postback. For example, the textbox on the page has its text sent to the server every time there is a postback. Therefore, the text property does not need to be stored in view state in order to be remembered across postbacks.
For much more information on view state, check out this article: Understanding ASP.NET View State.
Take a look at Server controls persist their state when EnableViewState is set to False
Example: Consider backcolor setting programmatically. On postback, if viewstate is switched off, the background color of the Textbox control is lost. However, the text value of the control is maintained.
Note: If the backcolor was set directly in markup rather than in code behind, it would have persisted.
<form id="form1" runat="server">
<asp:TextBox ID="Textbox1" runat="server" EnableViewState="false"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" EnableViewState="false" />
</form>
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
this.Textbox1.BackColor = Color.Yellow;
}
}
Also refer
Understanding ASP.NET View State
View State for TextBox and other controls that implement IPostBackDataHandler
How do I disable viewstate for a specific control?
I am building an ASP.NET site using Visual Studio 2008 and have a page looking like this (stuff snipped)
<asp:Content ID="Content2" ContentPlaceHolderID="PageContentPlaceHolder" runat="server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
the page here..
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="100">
<ProgressTemplate>
<div>
<asp:Image ID="AjaxImage" runat="server" ImageUrl="Ajax.gif" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</asp:Content>
The page_load starts a long (>5s) process
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
LongRunningProcess();
}
}
How can I display the UpdateProgress while the LongRunningProcess is running? It does work when I move the LongRunningProcess() call to a button onclick handler.
Move your page_load code into a new function.
Add a AJAX timer into the ContentTemplate section of your page. Set the interval to 500. (1/2 second)
Double-click on the Timer object in Design view to create a _tick handler.
In the _tick handler created in the previous step, call the following code
protected void My_Timer_Tick(object sender, EventArgs e)
{
My_Timer_Name.Enabled = false;
My_Page_Load_Function(); // Function created in step 1 above)
}
protected void My_Page_Load_Function()
{
System.Threading.Thread.Sleep(5000); // A delay to simulate doing something.
lblMyLabel.Text = "Done!"; // Write output to page.
}
Create a normal div that shows the Ajax.gif so it shows "processing" by default.
In the javascript pageLoad() function, make a call back to the page using Ajax's PageMethods.
function pageLoad(sender, args) {
PageMethods.getVersions(LoadVersionsCallback);
}
The method you are calling in your .aspx.cs file has to be static, it can take parameters and looks something like:
[System.Web.Services.WebMethod]
public static string getVersions()
{
StringBuilder sb = new StringBuilder();
... etc.
return sb.ToString();
}
The javascript function that you specified when you called the method will run when the method completes. It will be passed the results. At the end of this function you hide the Ajax.gif div.
function LoadVersionsCallback(result) {
// do something with the results - I load a dropdown list box.
...etc.
// here is where you hide your div holding the Ajax.gif
}
And then you work on making whatever it is you are doing run in less than 1 second....
I would put a Ajax timer on the page and set it for less than a second... It will only run once and after its first tick then you need to disable it otherwise it will fire again. (you don't want to start your long running process more than once...)
then on the OnTimerTick event I would start your long running process that way your page fully renders and you can display your UpdateProgress while its running.
you out to be able to move the code that you had for your button click to the time tick...
I used JBrooks idea above (i.e. showing the progress indicator as part of a Panel that also includes the Iframe, so that it shows even before the Iframe first loads), but simplified it: style the iframe so that when it does appear it is on top of the animated GIF.
Requires no Javascript or C# code-behind.
Here's the relevant ASPX, followed by the CSS. You'll have to noodle with the "top" setting in the style to cover the image you use.
<asp:Panel ID="DetailPanel" runat="server" CssClass="submitBox detailPanel">
<asp:Table ID="Table1" runat="server" Width="100%">
<asp:TableHeaderRow ID="TableHeaderRow10" runat="server">
<asp:TableCell ID="TableHeaderCell" runat="server"
Font-Bold="true" HorizontalAlign="Center">
Title Text
</asp:TableCell>
</asp:TableHeaderRow>
<asp:TableRow>
<asp:TableCell HorizontalAlign="Center">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/animated_progress.gif" />
</asp:TableCell>
</asp:TableRow>
</asp:Table>
<div class="iframeOverlay">
<iframe id="IframeDetail" runat="server" style="width: 100%; height: 100%;" />
</div>
</asp:Panel>
.iframeOverlay
{
z-index: 2;
position: relative;
top: -50px;
}
With Jquery.
<script>
$(document).ready(function() {
$('#<%= UpdateProgress1.ClientID %>').show();
});
</script>
<script> $(document).ready(function() { $('#<%=
UpdateProgress1.ClientID %>').show(); }); </script>
This worked well for me, just had to add it to the end of the BODY section and works like a charm.