ASP.NET OnTextChanged not firing from inside an update panel - asp.net

I am using an ASP.NET update panel to retrieve user info using the on TextChanged for the textbox, here is my code:
<asp:UpdatePanel runat="server" ID="up1" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:TextBox runat="server" ID="loginEmail" Text="Email"
CssClass="textBoxes" OnTextChanged="userInfo" AutoPostBack="true"></asp:TextBox>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="loginEmail" EventName="TextChanged" />
</Triggers>
</asp:UpdatePanel>
and the code behind:
string url, emailInfo;
emailInfo = loginEmail.Text;
url = Membership.GetUserNameByEmail(emailInfo);
emailText.InnerText = "Email: " + emailInfo;
urlText.InnerText = "Webiste: http://www.Elwazefa.com/User/" + url ;
the code wont fire on textchanged but it wil,
on ButtonClick or PageLoad.
What is the problem?
Using ASP.NET 4.0

<asp:TextBox AutoPostBack="true" OnTextChanged="thingId_TextChanged" ID="thingId" runat="server"></asp:TextBox>
AutoPostBack on text-box will trigger post-back when the focus is lost from the text box. TextChanged event will be fired on any subsequent post-back (can be due to button-click or text box focus change). So you need to make certain
After text is changed, you are moving out of text-box
Whatever controls that you are change are part of update-panel (can be different update panel). If there are not part of any update panel then those changes won't get reflected on client side.
My guess is you are probably suffering from #2. You can use tool such as Fiddler (or Firebug on FireFox) to check if browser is firing AJAX (XHR) request when the focus is lost from the text-box.

As #VinayC posted, AutoPostBack means that the page will postback to the server when your TextBox loses focus. No built-in event causes postback on every character added to a text input, and for good reason. UpdatePanel postbacks don't cause the page to flicker, but they can be just as heavy as a full postback.
If you want to work around this, you can give your textbox a client onchanged event handler, the JavaScript of which will be built from Page.ClientScript.GetPostBackEventReference().
The correct solution would be to use an AJAX method call from your JavaScript code rather than an UpdatePanel partial postback in onchanged.

Related

OnTextChanged loses focus when AutoPostBack is true

I have a ASP.Net webform that has several textboxes. Some of the textboxes have an OnTextChanged event with AutoPostBack set to true.
When the user enters some text and leaves the textbox, I want some code to run. This part works fine.
The problem is that if a user enters some text, then clicks or tabs to another textbox, the OnTextChanged of the current textbox event fires fine but the textbox that the user clicked on does not keep focus. This causes problems because the user thinks they are on the next textbox but they aren't. And no object seems to have the focus.
Is there anything that can be done to make the next object keep focus while the OnTextChanged event of the current textbox fires?
One option is to use <asp:UpdatePanel> Control.
Facts about using it:
The postback request would be made via AJAX.
It would not recreate the whole page HTML.
When the UpdatePanel updates, it replaces the DIV innerHTML, that would make the textbox lose focus (bad point).
To maintain the focus, you would have to avoid the UpdatePanel from updating when the textbox posts back.
You can avoid the update by setting the UpdateMode and ChildrenAsTriggers properties.
Here is an example:
<asp:UpdatePanel ID="uppTextboxes" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<asp:TextBox ID="txb1" runat="server" AutoPostBack="true" OnTextChanged="txb1_OnTextChanged" />
<asp:TextBox ID="txb2" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
Since the whole page is recreated on postback on serverside and the browser will recreate all html on clientside, you have to tell ASP.NET that your TextBox needs focus.
Use Page.SetFocus:
Page.SetFocus(IdOfControl);
However, i would prefer not to postback at all if i can. Can't you use a button that the user has to click after he has entered all necessary data?

How do I force asp.net page to postback when I'm in code behind that called by UpdatePanel

When an UpdatePanel Calls a method in server and for example this method change
textBox1.Text = "12312"
and this textBox1 was out of updatePanle scope
it dosn't change it text till a postback happend to the page
so I need after that calculation and chaging the Textbox's text in the server, I need to forcepage to do postback
plz can any one help ?
If you want to force a refresh you could try: Response.Redirect(Request.Url.AbsoluteUri)
This should force a redirect to the current page.
Hope this helps
If you wish for a control within the UpdatePanel to perform a standard postback, define a PostBackTrigger within the UpdatePanel, setting the ControlID to the ID of the control you wish to perform the postback.
<asp:UpdatePanel ...
...
<Triggers>
<asp:PostBackTrigger ControlID="ControlIDToPostBack" />
</Triggers>
</asp:UpdatePanel>
Or you could add the TextBox control you wish to update to another UpdatePanel setting both of the UpdatePanel's UpdateMode properties to Always.
This will ensure that the content within both UpdatePanel controls is updated for all postbacks that originate from the page. Which includes asynchronous postbacks.
<asp:UpdatePanel ... UpdateMode="Always"

asp.net textarea postback before submit button

I have an ASP.NET form with a few controls and a submit button at the bottom, all inside an update panel:
<asp:UpdatePanel runat="server" ID="upContent">
<ContentTemplate>
<asp:TextBox runat="server" ID="tbxMyTextBox" AutoPostBack="true" />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick="return doStuff()" OnClick="btnSubmit_Click" />
</ContentTemplate>
</asp:UpdatePanel>
If I write something in the TextBox and click 'submit' immediately (without clicking out of the TextBox first), the changes are not recorded (as seen in the server-side event handler). However, if I write something in the TextBox, and then change focus to another control, an AutoPostback happens through the UpdatePanel and then clicking 'submit' does recognize these changes. How can I force this content to update right as I click the submit button, while still running both the clientside and serverside events attached to it? Thanks!
Is is possible that your text-box gets cleared due to some on-submit/on-click event handler? I will suggest you do use some tool such as Fiddler to inspect the POST data in request. Or you can put a break-point at your server side code and inspect the request data. Look for particularly Request.Form[tbxMyTextBox.UniqueID] - i.e. look for presence of value for your text-box's name (name property at client side which corresponds to UniqueID property at server side). If the request contains the value typed in the text-box then something is happening on server side but good news is you can always retrieve the value from Request object. If the value is not present in the Request object then it means that client side code is clearing the value before the submit.
If an onclick method returns false, it cancels the action that the button would normally perform. As your button would normally submit your form, but it appears not to be submitting, your client side javascript code in doStuff is probably returning false.

Event issue with ASP.net Update Panel

I am completely stumped on this and would really appreciate any help.
I am working on a user control that is situated inside of an update panel. There is a button on the form which loads some data. This is working correctly.
There is also a drop-down box to filter the data. Changing this does initiate a post back, however nothing happens. The drop-down box goes back to it's default value the OnSelectedIndexChanged function is never called.
I've put break points in page_prerender and page_preload and both are being hit the post back is definitely occuring. Breakpoints withing the dropdownGroup_changed function are never hit.
Removing the update panel solves the problem, however it breaks the rest of the page so I can't use that for anything other than testing.
I've also verified that there is nothing in my prerender / page load that is resetting the page's state.
Here is the update panel code:
<asp:UpdatePanel ID="UpdatePanel6" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional" >
<ContentTemplate>
<ucControlName:ControlName ID="ControlName1" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
Here is the drop-down in question - It is located inside of the user control
<asp:DropDownList ID="dropdownGroup" runat="server" Visible="false" AutoPostBack="true" OnSelectedIndexChanged="dropdownGroup_changed"></asp:DropDownList>
It is of course visible and databound by the point in the code where the issue is occuring
A bit more info-
added Both a hard coded dropdown (To rule out a stupid databinding issue) and a textbox to the same control. I have the same issue.
It appears that the event isn't triggering because the values are never changing as far as .net is concerned. I've checked the control during page_init and page_load - the value is always the same.
The fact that the button works but the other controls don't makes me think that there is a view state issue here somewhere but I can't quite ferret out what is causing it. Viewstate is enabled for the page and the panel- don't know if anything else could be overriding / corrupting it.
Did i mention that I hate update panels with a passion? because I hate update panels with a passion.
I suggest checking the 'Value' property for each 'ListItem' in the 'DropDownList' control. If they are all the same even if the 'Text' properties are different, then the 'OnSelectedIndexChanged' will not fire at all since ASP.NET cannot tell if anything has changed (See this related question for more info.)
This was the real cause of my problem even though I, too, had a 'UserControl' with a 'DropDownList' inside an 'UpdatePanel' and the 'AutoPostBack' was firing as expected. I thought the UpdatePanel was the culprit but it was not the case. Each of the items in my DropDownList had the same underlying value of "10" even though they had distinct 'Text' values. I changed them to each have a unique value which then allowed for the OnSelectedIndexChanged event to fire thus fixing the problem.
Two answers for the price of one:
Are you calling DataBind() in your Page_Load? If you do that on a PostBack, you will lose events. Replace the call with the following:
if (!IsPostBack) {
DataBind();
}
If your DropDownList is outside your UpdatePanel, you need to add a Trigger as follows:
<asp:UpdatePanel ID="UpdatePanel6" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional" >
<Triggers>
<asp:AsyncPostBackTrigger ControlID="dropdownGroup" EventName="SelectedIndexChanged" />
</Triggers>
<ContentTemplate>
<ucControlName:ControlName ID="ControlName1" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
Have you tried UpdatePanel.Update (); after your databind.

Why does the Update Panel do a full post back for custom control?

I have a rather complex custom control - the custom control has a couple of update panels in it.
I am trying to use the control like this inside of an update panel:
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<asp:Button ID="btn1" runat="server" Text="Sample Button" /> <asp:Label ID="lblTime" runat="server"></asp:Label>
<cc1:MyCustomControl ID="MyCustomControl1" runat="server" >
</cc1:MyCustomControl>
</ContentTemplate>
</asp:UpdatePanel>
When I click the button in the update panel, it does an async post back and there is no screen "flicker" When I click a button in my custom control the page flickers and does a full post back.
Inside the custom control, there are update panels that are trying to do full postbacks (based on triggers).
How can I make the page level UpdatePanel not do a full postback no matter what is going in inside of the custom control?
Have you thought about explicitly setting an asp:AsyncPostBackTrigger with the btn1 control in the up1 UpdatePanel control.
<asp:UpdatePanel ID="up1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btn1" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Button ID="btn1" runat="server" Text="Sample Button" />
<asp:Label ID="lblTime" runat="server"></asp:Label>
<cc1:MyCustomControl ID="MyCustomControl1" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
Edit: How you tried to explicitly call the Update method in the button's OnClick event for the Update Panel? This includes the Update panels embedded within the custom control.
Figured out the solution similar issue to this: How can I get an UpdatePanel to intercept a CompositeControl's DropDownList
Except my control causing the postback was in an updatepanel with a full postback trigger. I was able to pull that control out so it was not nested with in update panels and that resolved it.
I would first look if there is some other issue with the custom control causing the full page postback, as in any case what should be happening is that the whole update panel refreshes (still with ajax).
After that, just look at the Nesting UpdatePanel Controls section of this:
http://msdn.microsoft.com/en-us/library/bb398867.aspx#
Also make sure to have the ScriptManager control with the property EnablePartialRendering set to true.
On the UpdatePanel, set the property ChildrenAsTriggers="true". This tells the UpdatePanel to intercept all PostBack invocations that originate from inside the UpdatePanel.
You may want to also explore the UpdateMode property, which determines what kinds of events trigger an update. (By default, an UpdatePanel will refresh if any other panel on the screen gets refreshed. This threw me for awhile until I realized what was going on.)

Resources