I created a very basic web application in an attempt to isolate what I think might be a memory leak with a production web app in which the w3wp process consumes memory with each login and doesn’t appear to release that memory. I noticed that my very basic web app was also consuming memory within the iisexpress/w3wp process simply by running the application and hitting refresh on the page. After refreshing the page 20 times the hosting process (iisexpress/w3wp) consumes between 5 MB and 14 MB of memory that it doesn't release. When I take snapshots of the memory using VS 2015's diagnostic tools the amount of memory seems to stay relatively flat.
What would cause this amount of memory to be consumed by the hosting process? What can be done to reduce or eliminate the memory usage?
Out of curiosity I added a call to garbage collection, GC.Collect(3), in the Page_Load event and that seem to keep the memory usage flat. Looking at the memory snapshots before and after the GC.Collect() call doesn't show anything consistently being cleaned up. And this works only if I call GC for each page load. Calling GC each time doesn't seem like much of a solution though.
I am running this on my development machine which is running Windows 10. I am using the default host settings for both IISExpress and IIS. The web app is built from an empty 4.6.1 asp.net web app project. The web app has a single web form page, login.aspx:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="WebFormTesting.Login" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="login" method="post" runat="server">
<div>
<div style="height: 250px; width: 500px; position: absolute; left: 380px; top: 120px;">
<div class="clsText10">
<asp:TextBox ID="txtUsername" TabIndex="1" Width="160px" runat="server" ToolTip="Enter User Name"
MaxLength="100" Style="position: absolute; right: 130px; top: 5px;"></asp:TextBox>
<br />
<asp:TextBox ID="txtPassword" TabIndex="2" runat="server" ToolTip="Enter Password"
MaxLength="25" Width="160px" TextMode="Password" Style="position: absolute; right: 130px; top: 50px;"></asp:TextBox>
<br />
<asp:Label ID="Label1" runat="server" CssClass="clsText10"
Style="font-weight: bold; position: absolute; right: 120px; top: 85px;" Text="(Please note: Password values are case sensitive.)"></asp:Label>
<asp:Button ID="btnLogin" TabIndex="3" runat="server" Text="Login" CssClass="btn btn-primary"
ToolTip="Verify User Name and Password" OnClick="btnLogin_Click" Width="120"
Style="position: absolute; right: 180px; top: 180px;"></asp:Button>
<div>
<asp:Label ID="lblUsername" Text="User Name: " runat="server" Style="position: absolute; right: 310px; top: 5px;"></asp:Label>
<br />
<asp:Label ID="lblPassword" Text="Password: " runat="server" Style="position: absolute; right: 310px; top: 50px;"></asp:Label>
<br />
<asp:Label ID="txtError" runat="server" Visible="true" Style="z-index: 100; width: 450px; text-align: right; position: absolute; top: 115px; right: 130px;"></asp:Label>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
With the code behind page, Login.aspx.cs:
using System;
namespace WebFormTesting
{
public partial class Login : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//
}
protected void btnLogin_Click(object sender, EventArgs e)
{
//
}
}
}
Related
I know this question has been asked many times, but I didn't seem to find any solution that I can understand online. Most says using javaScript and css but I don't really know how to implement that.
I'm using visual studio and i have a master page and several other content pages. On the master page I have a link that redirects me to one of these content pages using
"a href = pages.aspx"
Since the content page uses a SQL query to retrieve data so it takes a very long time. I would like to show a loading spinner or progress bar or even just a text saying "loading..." while the page loads.
Are there anyway to do this?
I also thought about using a label which is only visible when the link is clicked, and goes invisible when the page loads. Is there a way of doing this?
Thanks!
An exact situation with detailed code and explanation, where a loading image is shown on loading of an asp.net page can be seen at following URL : Show Loading Image when Page first Loads.
This has detailed explanation with full working code as well as a link to demo page. You can ask me if you have any questions regarding this sample.
To verify that the loading image shows up in above sample you can simply go to this URL : Loading Image when Page first loads
Another very simple approach with tested/tried sample code is as explained below.
You will need jquery in your aspx page for this to work.
There are three scenarios in which you would like to show a loader element in an aspx page and they are:
On button click that does a non-ajax postback
hyperlink click that navigates to another page
on button click that does an ajax postback
In first two of above scenarios, all you need to do is hookup their client click event with a JavaScript method of ShowProgress. This method shows a popup div that has an animated image in it.
In the last scenario where an ajax postback is done, an UpdateProgress control is used so it automatically hides once the ajax postback completes.
The loader popup is styled to show at center of page in a modal manner'; these styles can be found in the head section of markup pasted below. You can modify some of these styles like border or background-color and also you can substitute any animated image in place of loading.gif.
I tested the markup below with a Page PageTakingLongToLoad.aspx that took 20 s to load the first time it rendered, and with ajax/non-ajax postbacks that took 10 s to complete, and in both cases the loader displayed perfectly as expected.
Markup of Page from which a loader is shown
<%# Page Language="C#" AutoEventWireup="true" CodeFile="InitialPage.aspx.cs" Inherits="InitialPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.modal {
position: fixed;
top: 0;
left: 0;
background-color: lightgray;
z-index: 99;
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
min-height: 100%;
width: 100%;
}
.loading {
font-family: Arial;
font-size: 10pt;
border: 5px dashed #f00;
width: 200px;
height: 100px;
display: none;
position: fixed;
background-color: White;
z-index: 999;
margin: 0 auto;
text-align: center;
padding-top: 35px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<div class="loading">
<div>
Loading. Please wait.<br />
<br />
<img src="loading.gif" alt="loading" />
</div>
</div>
Link To Another Page
<br /><br />
<asp:Button ID="btnPostBack" runat="server" OnClientClick="ShowProgress();" OnClick="btnPostBack_Click" Text="Do Long Process without Ajax" /><br /><br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:Button ID="btnAjax" runat="server" OnClick="btnPostBack_Click" Text="Do Long Process with Ajax" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<div class="loading" style="display: table">
<div>
Processing. Please wait...<br />
<br />
<img src="loading.gif" alt="loading" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</div>
<script type="text/javascript">
function ShowProgress() {
setTimeout(function () {
var modal = $('<div />');
modal.addClass("modal");
$('body').append(modal);
var loading = $(".loading");
loading.css("vertical-align", "middle");
loading.css("display", "table-cell");
var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
loading.css({ top: top, left: left });
}, 200);
}
</script>
</form>
</body>
</html>
So I'm trying to understand how this should be properly setup. I have a Updateprogress that shows a progress bar when a button is clicked. The button is wrapped in an UpdatePanel. But if there're any error, I want to stop the processing and then pop up a modal window (I used Modalpopupextender) to show the errors. My issue is, it just shows the box (or object) but without the texts that came from the Exception. Here's my code:
<asp:UpdatePanel ID="UpdatePanel_ActionButtons" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Approve" OnClick="Proccess_Click1" OnClientClick="this.disabled = true; this.value = 'Processing';" UseSubmitBehavior="false" />
</ContentTemplate>
</asp:UpdatePanel>
The Progress Bar:
<asp:UpdateProgress ID="UpdateProgress" runat="server" AssociatedUpdatePanelID="UpdatePanel_ActionButtons">
<ProgressTemplate>
<div style="background-color:Gray; filter:alpha(opacity=80); opacity:0.80; width: 100%; top: 0px; left: 0px; position: fixed; height: 800px;"></div>
<div style=" filter:alpha(opacity=100); position: fixed;
z-index: 100001;
left: 720px;
top: 105px;">
<div style="width:50px; height:50px; padding:50px; background-color:white; border:solid 1px black;">
<img alt="progress" src="../images/ajax-waiting.gif"/>
Processing...
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
The error box:
<asp:LinkButton ID="btnNotInUse" runat="server" />
<ajaxtoolkit:ModalPopupExtender ID="qaError" runat="server"
TargetControlID="btnNotInUse"
PopupControlID="pnlQAError"
BackgroundCssClass="modalPopupExtender" />
<asp:Panel ID="pnlQAError" runat="server" Style="display: none" CssClass="modalPopup">
<br />
<asp:Button ID="OkBtn" runat="server" Text="Ok" OnClick="OkBtn_Click" />
</asp:Panel>
Button Click Method:
protected void Proccess_Click1(object sender, EventArgs e)
{
List<string> validationErrors;
string returnurl;
Processrecord(out validationErrors);
if (validationErrors.Count() > 0)
{
foreach (var error in validationErrors)
{
qaFeedback.InnerHtml += error;
}
qaError.Show();
return;
}
else
{
returnurl = "toanotherpage.aspx";
}
}
So if you look as to how I add the errors, it's adding it to the "qafeedback" div. And then I would force it to show up and then return. What's happening is it would pop out the button box, with the button, but it doesn't show the texts I added. It would be helpful to know as well that when I remove the progress bar or animation, the whole thing works or shows the error messages.
Thoughts?
I am using ASP.NET 2.0 and AJAX extension tool.
I already created loading indicator on button submit. When I will click the button, the loading indicator will show after redirecting to the next page. But, I want to hide the page until processing has completed (after that redirect to next page).
I am using the following code:
<td style="width: 100px; height: 26px;">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdateProgress ID="UpdateProgress1" DynamicLayout="false" runat="server">
<ProgressTemplate>
<img src="Images/loading.gif" alt="Images/loading.gif" style="z-index: 100; left: 21px; position: absolute; top: 64px" />
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<dx:ASPxButton ID="btnOk" ClientInstanceName="btnok" runat="server" Style="z-index: 100; left: 90px; position: absolute;
top: 108px" Text="OK" Width="61px" BackColor="Gainsboro" OnClick="btnOk_Click" AutoPostBack="False" >
<DisabledStyle>
<Border BorderColor="Teal" />
</DisabledStyle>
<ClientSideEvents Click="function(s, e) {
ShowloadingImage();
}" />
</dx:ASPxButton>
</ContentTemplate>
</asp:UpdatePanel>
To "hide" your page you can make an overlay div over all, using this css
.OverAll
{
height:100%;
width:100%;
position:fixed;
left:0;
top:0;
z-index:2 !important;
background-color:black;
}
using jquery we can hide the page on page loading...I am using following code
$(function() {
($.unblockUI);
$('#pnlLogin_btnOk').click(function() {
$.blockUI({ message: '<img src="Images/loading.gif" />' });
});
});
I am trying to figure out why my ModalPopupExtender keeps closing, everytime a user clicks either button its running the code behind because I put a break point in and it is breaking there, but the modalPopup immediately closes, which isnt good because if it has any errors in the process they cant be displayed. So how do I stop the modalpopup from closing itself? I didnt specify a OKControlID or a CancelControlID.
Panel Code:
<asp:Panel ID="Panele" runat="server" style="display: none; position:absolute; top: 50%; left: 35%; width: 500px; height: 350px; background-color: White; border: solid 1px black; padding-left: 15px; text-align: left;">
<asp:ImageButton ID="CloseEBtn" runat="server"
ImageUrl="images/CloseButton.png" style="float: right; margin-right: 3px; margin-top: 3px;"
onclick="CloseEBtn_Click" />
<strong>Name:<asp:TextBox ID="fromTextBox" runat="server"></asp:TextBox></strong>
<asp:Button ID="SndBtn" runat="server" Text="Send" onclick="SndBtn_Click" />
<asp:Button ID="ClrBtn" runat="server" Text="Clear" />
<br />
<br />
<asp:Label ID="msglabel" runat="server"></asp:Label>
</asp:Panel>
My ModalPopupExtender Code:
<asp:ModalPopupExtender ID="popup" runat="server"
TargetControlID="SIBtn" PopupControlID="Panele" BackgroundCssClass="modalBackground">
</asp:ModalPopupExtender>
CodeBehind:
protected void SndBtn_Click(object sender, EventArgs e)
{
msglabel.Text = "The Window Didnt Close";
}
protected void ClrBtn_Click(object sender, EventArgs e)
{
fromTextBox.Text = "";
toTextBox.Text = "";
subjectTextBox.Text = "";
MessageTextBox.Text = "";
msglabel.Text = "";
}
By code-behind running if you mean the page posts back, modal popups do not explicitly reload themselves. You have to write some code from the server to show the Modal Popup; there is a Server-side Show() method on the extender and a client-side show() method like:
$find("<%= mpe.ClientID %>").show();
HTH.
For me, UseSubmitBehavior="false" on the asp:Button did the trick.
So, we have an ASP.Net application - fairly standard - and in there are lots of updatepanels, and postbacks.
On some pages we have
<ajax:UpdatePanelAnimationExtender ID="ae" runat="server" TargetControlID="updatePanel" BehaviorID="UpdateAnimation">
<Animations>
<OnUpdating>
<FadeOut Duration="0.1" minimumOpacity=".3" />
</OnUpdating>
<OnUpdated>
<FadeIn minimumOpacity=".5" Duration="0" />
</OnUpdated>
</Animations>
</ajax:UpdatePanelAnimationExtender>
Which basically whites out the page when a postback is going on (but this clashes with modal dialog grey backgrounds). In some cases we have a progressupdate control which just has a spinny icon in the middle of the page.
But none of them seem particularly nice and all a bit clunky. They also require a lot of code in various places around the app.
What methods do other people use and find effective?
i havent used the UpdatePanelAnimationExtender but an UpdateProgress-Control in combination with an animated gif(Bermos Link):
<asp:UpdateProgress ID="UpdateProgress1" DynamicLayout="true" runat="server" AssociatedUpdatePanelID="UdpImeiLookup" DisplayAfter="500" >
<ProgressTemplate>
<div class="progress">
<img src="images/ajax-loader-arrows.gif" /> please wait...
</div>
</ProgressTemplate>
</asp:UpdateProgress>
The ProgressTemplate will be visible on every Postback of the associated Update Panel(after 500ms in this example).
EDIT: where class "progress" can be f.e. this:
.progress
{
text-align:center;
vertical-align:middle;
position: absolute;
left: 44%;
top: 35%;
border-style:outset;
border-color:silver;
background-color:Silver;
white-space:nowrap;
padding:5px;
}
Regards,
Tim
Like the others, I suggest to use the UpdateProgress in a modal popup.
I will add this twist, put the popup, UpdateProgress and this code in a masterpage, so whenever you need it, just plug the masterpage to the content page.
<script type="text/javascript">
var ModalProgress ='<%= ModalProgress.ClientID %>';
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginReq);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq);
function beginReq(sender, args){
// shows the Popup
$find(ModalProgress).show();
}
function endReq(sender, args)
{
// hide the Popup
$find(ModalProgress).hide();
}
</script>
here some ref:
http://mattberseth.com/blog/2007/07/modalpopup_as_an_ajax_progress.html
http://vincexu.blogspot.com/2008/10/how-to-make-modalupdate-progress-bar-on.html
Animated gifs require the least amount of code and you can select your favourite one with whatever colours you please from the following site - Ajaxload - Ajax loading gif generator.
This is what I use, it has a modal popup type background and a gif
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="0">
<ProgressTemplate>
<div style="position: absolute; width: 100%; height: 100%; z-index: 100; background-color: Gray;
filter: alpha(opacity=70); opacity: 0.7;">
</div>
<table style="position: absolute; width: 100%; height: 100%; z-index: 101;">
<tr>
<td align="center" valign="middle">
<div style="color: Black; font-weight: bolder; background-color: White; padding: 15px;
width: 200px;">
<asp:Image ID="Image3" runat="server" ImageUrl="~/Images/progress.gif" />
Please wait....
</div>
</td>
</tr>
</table>
</ProgressTemplate>