Weird behavior of linkbutton within updatepanel - asp.net

This problem is relevent apperantly to IE6 and maybe to newer versions im not sure. when you put a linkbutton inside an updatepanel like so:
<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:LinkButton runat="server">Test</asp:LinkButton>
</ContentTemplate>
</asp:UpdatePanel>
You run it and then play around with ctrl+mouse wheel and change the size of the site. Then click the linkbutton. It changes the size of the text of the website again to somekind of deffault size... Im wondering if someone knows how to fix this. And what is causing this problem
Edit: the problem was with a few users clicking the link and suddenly all the text on the page became very small and unreadable

You have nothing to fix here, this is a browser behavior.
But if you have a custom behavior that you change the text size, then you need to take care to save the last setting somewhere and then get the last setting and use it.

Related

UpdatePanel working only on Chrome and not in IE / Mozilla. Why?

On Clicking the LinkButton, I refresh the image in image control without refreshing the page. For this I have used the UpdatePanel and AsyncPostBackTrigger.
It is working perfectly in chrome. But not in IE and Mozilla. On both IE and Mozilla when I click the link button, nothing happens. Look very weird. Have any clue on this ?
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:TextBox ID="txtCaptchaInput" BorderStyle="Solid" Style="vertical-align: top" runat="server" Width="106px" BorderWidth="1px"></asp:TextBox>
<asp:Image ID="img_captcha" runat="server" Height="32px" ImageUrl="~/captchaJPEG.aspx" Width="108px" />
<asp:LinkButton ID="captcha_refresh" runat="server">Refresh Image</asp:LinkButton>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="captcha_refresh" />
</Triggers>
</asp:UpdatePanel>
CaptchaJPEG.aspx : Page Load
Dim captcha As New Captcha.CaptchaImage()
captcha.width = 150
captcha.height = 40
captcha.text = Me.Session("CaptchaText").ToString()
captcha.GenerateImage()
captcha.image.Save(Me.Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg)
Your issue have to do with the caching of the captchaJPEG.aspx that return an image. As image the browser can keep it and not change it.
To avoid that you have two ways, you can set some cache headers to say to the browser to not keep it on the cache as:
Response.Cache.SetExpires(DateTime.Now.AddDays(-10));
Response.Cache.SetMaxAge(new TimeSpan(-10, 0, 0));
Or -that I think is better- add a random number on the image tag as you set it on code behind, as:
img_captcha.ImageUrl = "~/captchaJPEG.aspx?_rnd=" + RandomNumber;
Here you can make something even better, to use the hash() of your code captcha, as:
img_captcha.ImageUrl = "~/captchaJPEG.aspx?_rnd=" + CaptachHiddenNumbers.hash();
Thats way you keep it on cache if the captcha is the same from load to load.
Now, the "correct way" is to use a handler and not a page for many reasons, like you do not want all the overhead of the page just to send an image. Now the handler come with the minimum modules call, to add session you need to use the IRequiresSessionState.
To answer to the question, why is acting different on the browsers, is because in some small details browser have different behavior, is depend how and what they check to make a decision to use the cached images and how aggressive are the browser with the cache.

Trying to move around asp.net panels around dynamically on postback

I have 2 sections of my website I am developing, a reference box that has a fixed width and a working box that has the same height as the content. I am trying to make it so the user can swap the content between the two boxes. I have the following type of setup in the aspx page:
<asp:panel id="pnlReference" runat="server" CssClass="referencePanel" >
<asp:panel id="pnlsection1" runat="server" >
Content....
</asp:panel>
</asp:panel>
<asp:linkbutton id="lbtSwapPanels" runat="server" />
<asp:panel id="pnlWorking" runat="server" CssClass="workingPanel" >
<asp:panel id="pnlSection2" runat="server" >
Content....
</asp:panel>
</asp:panel>
What I am trying to have occur is when I press the lbtSwapPanels linkbutton, it moves pnlSection1 into pnlWorking and pnlSection2 into pnlReference. The code I used to do this in the OnClick method was:
Control pane1, pane2;
pane1 = pnlWorking.Controls[0];
pane2 = pnlReference.Controls[0];
// Remove them from their respective panels
pnlWorking.Controls.Remove(pane1);
pnlReference.Controls.Remove(pane2);
// Add them to the opposite pane
pnlWorking.Controls.Add(pane2);
pnlReference.Controls.Add(pane1);
Unfortunately, this does not work. When I click the linkbutton, nothing happens. If I then do something to perform another postback the reference and working panels become empty. I assume this has to do with the change not being saved into Viewstate but I don't know how to get around that.
Does anyone have any ideas on how to do this?
Update: It seems that moving objects around with Jquery is causing issues with asp.net postbacks as well as making my asp.net ajax tabcontainer completely fail to function. After 2 swaps and postbacks, further postbacks cease to function at all. Here's the new code
<div id="referencePane">
<asp:panel id="pnlsection1" runat="server" >
Content with tab container
</asp:panel
</div>
Swap Panes
<div id="workingPane">
<asp:panel id="pnlsection2" runat="server" >
Content
</asp:panel>
</div>
Here's the javascript:
function SwapPanes() {
var pane1, pane2;
pane1 = $("#workingPane").html();
pane2 = $("#referencePane").html();
$("#workingPane").empty();
$("#referencePane").empty();
// Add them to the opposite pane
$("#workingPane").prepend(pane2);
$("#referencePane").prepend(pane1);
}
First postback causes the tabcontainer to fail (javascript exceptions claiming it's trying to create a tab container with teh same ID (only one exists in the original aspx page). Postbacks then proceed to do wierd stuff.
Have you thought about keeping the controls in the panel but just swapping the position of the panels? You can do this pretty easily in JQuery although you'll be using DIVS instead of ASP.NET panels. This is, again, quite easy since Panels just translate to DIVS in the end. I did this recently for a wizard-style questionnaire (moving from panels to divs) and I was surprised how easy it was.
Update: Note that, when you swap the div positions, you can change the style as well (again, easy in JQuery) so that the user won't have a jarring "why did these two things change position" experience.
The bottom line, really, is that I think you are trying to use a hammer to drive a screw. JQuery is the screwdriver you are looking for and learning it is very much worth your while!
Look into ASP.Net web parts. That will manage the whole thing for you in a dynamic and responsive way.

Firefox and Updatepanel

I have a problem with FireFox and ASP.NET UpdatePanel.
I have in a form a checkbox and an UpdatePanel. When I check the checkbox, an asp:panel which is into the UpdatePanel should become visible.
<asp:CheckBox ID="cbMoreOptions" runat="server" Text="plus d'options" AutoPostBack="True" OnCheckedChanged="cbOptions_CheckedChanged" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" Visible="false">
sssssssss
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="cbMoreOptions" EventName="CheckedChanged" />
</Triggers>
</asp:UpdatePanel>
Everything is working fine but not after I refresh the page while the checkbox is checked. If this is happening, the checkbox rest checked the page doesn’t make postback more to the server. The firebug shows that the page gets a response and when I verify the its content I have en error 500 which tell that the information of the page is corrupt. All this is happening only in Firefox. In IE8 and Google Chrome everything is ok.
Does anybody have an idea how can I avoid this? It’s a bug of Firefox?
All the weird comportment continues until I make enter into the URL textbox. Even if I make F5 nothing happens. What is the difference between F5 and enter into the URL? They shouldn’t have the same result?
Thanks a lot.
Have you tried placing the checkbox "cbMoreOptions" inside the UpdatePanel?
Place in inside the UpdatePanel ContentTemplate section and set an AsyncPostBackTrigger for the CheckBox.
We had this problem a long time ago and it was the way firefox uses in-memory cache to store the state of a page which messes up the way ASP.NET handles VIEWSTATE hidden field. Check if caching turned on for your aspx pages and disable it.
Edit: Here's a link that explains it in detail.
What is the difference between F5 and enter into the URL? They
shouldn’t have the same result?
If you hit enter in the address bar, it does a GET request, i.e. you enter your page's lifecycle with !IsPostBack.
When you hit F5, I observed that firefox will repeat the last request, so if that last request was a POST, it will repeat it. That's why your page stay in a buggy state. If the first post back caused an error (the checkbox' checkedChanged), hitting F5 will just repeat that error.
So, no, the don't have the same result.
I don't have any documentation to backup this statement, but this is what I observed. If anyone can point a source I'll be glad to see it.

Trying to self contain pop ups which use the AjaxToolkit ModalPopUpExtender

I have 3 different kinds of ajax popups that need to exist across my site. I was hoping that I could simply create a user control for each one and place the panel and modal popup extender inside each one but this doesn't seem to be working. Has anyone tried this before or do you have a recommendation as to how I can avoid duplicate code for each pop up on different pages? Thanks!
Ah I figured out my issue with the User Control I believe.
The ModalPopUpExtender requires the TargetID property to be set otherwise an error occurs. Since this is sitting in a UserControl I just created a dummy link button that doesn't do anything and I set the property visible to false.
<asp:LinkButton ID="lnkBlank" runat="server" Visible="false" />
<asp:Panel ID="plContainer" style="display: none;" runat="server">
Hello?
</asp:Panel>
<cc1:ModalPopupExtender ID="mpe" runat="server"
BehaviorID="test"
TargetControlID="lnkBlank"
PopupControlID="plContainer" />
Apparently it doesn't appreciate that and the moment I set the visible property to true it started working. Not sure what the reasoning is for a TargetID since, I would think, most pop ups could be called from multiple links about the page. Perhaps I'm still not entirely clear on how this control is supposed to be used.
One option would be to write the popups in a asp.net user control (a .ascx page) and include that on the pages you need the popups. Have a public method in the ascx page that will show the popup, and call it from the parent page when you need to. If you already have a script manager on the parent page, you can't have a second one in the ascx page, but other then that there shouldn't be anything that would stop this from working. Hope this helps!
edit: here's what my modal popup extender control looks like...
<cc1:ModalPopupExtender
ID="mpeClassroom"
BackgroundCssCLass="modalBackground"
runat="server"
CancelControlID="lbClose"
OnOkScript="onOk()"
TargetControlID="Button1"
PopupControlID="pnlClassroom">
</cc1:ModalPopupExtender>
in my code behind page, my method just calls mpeClassroom.Show();
The problem with hidden link as TrgetControlID is that; when u set its visibility as false, server doesn't render it as well. PopExtender then cannot find control on the page.
Instead of setting its visibility to false, try to apply a style with display:none. This should work !

Entire Page refreshes even though gridview is in an update panel

I have a gridview that is within an updatepanel for a modal popup I have on a page.
The issue is that the entire page refreshes every time I click an imagebutton that is within my gridview. This causes my entire page to load and since I have grayed out the rest of the page so that the user cannot click on it this is very annoying.
Does any one know what I am missing.
Edit: I entered a better solution at the bottom
Make sure you have the following set on the UpdatePanel:
ChildrenAsTriggers=false and UpdateMode=Conditional
do you have ChildrenAsTriggers="false" on the UpdatePanel?
Are there any javascript errors on the page?
I had this problem and came across the following article:
http://bloggingabout.net/blogs/rick/archive/2008/04/02/linkbutton-inside-updatepanel-results-in-full-postback-updatepanel-not-triggered.aspx
My button wasn't dynamically created in the code like in this example, but when I checked the code in the aspx sure enough it was missing an ID property. On adding the ID the postback became asynchronous and started to behave as expected.
So, in summary, check your button has an ID!
Are you testing in Firefox or IE? We have a similar issue where the entire page refreshes in Firefox (but not IE). To get around it we use a hidden asp:button with the useSubmitBehavior="false" set.
<asp:Button ID="btnRefresh" runat="server" OnClick="btnRefresh_Click" Style="display: none" UseSubmitBehavior="false" />
Several months later this problem was fixed. The project I was working in was a previous v1.1 which was converted with 2.0. However, in the web.config this line remained:
<xhtmlConformance mode="Legacy"/>
When it was commented out all of the bugs that we seemed to have with the ajax control toolkit disappeared
Is the Modal Window popped up using the IE Modal window? Or is it a DIV that you are showing?
If it is an IE Modal Pop up you need to ensure you have
<base target="_self" />
To make sure the post back are to the modal page.
If it is a DIV make sure you have your XHTML correct or it might not know what to update.
I would leave the onClick and set it as the trigger for the updatePanel.
That's odd that it works in FF and not IE. That is opposite from the behavior we experience.
UpdatePanels can be sensitive to malformed HTML. Do a View Source from your browser and run it through something like the W3C validator to look for anything weird (unclosed div or table being the usual suspects)
If you use Firefox, there's a HTML validator Extension/AddOn available that works quite nicely.
For reference..
I've also noticed, when using the dreaded <asp:UpdatePanel ... /> and <asp:LinkButton ... />, that as well as UpdateMode="Conditional" on the UpdatePanel the following other changes are required:
ViewStateMode="Enabled" is required on <asp:Content ... /> (I've set it to Disabled in the MasterPage)
ClientIDMode="Static" had to be removed from <%# Page ... />
To prevent post-backs add return false to the onclick event.
button.attribute.add("onclick","return false;");
Sample:
string PopupURL = Common.GetAppPopupPath() + "Popups/StockChart.aspx?s=" + symbol;
hlLargeChart.Attributes.Add("onclick", String.Format("ShowPopupStdControls(PCStockChartWindow,'{0}');return false;", PopupURL));

Resources