I have an Panel control that I need to maintain position across postbacks. I am able to do this by maintaining a cookie which is read each time the page is loaded to get the position of the Panel before the page is loaded.
The problem is, the page is loaded, then repositioned which causes this brief flash where the control is at its default location and jumps to the location it was at prior to postback.
Is there a way to prevent this? I want the control to move to its position first, THEN have it displayed to prevent this "flash".
*edit: I am adding a DragPanel ajax control extender to reposition this. I have a pageLoad that is called and the Panel is repositioned after pageLoad is called. There's gotta be a really simple solution to this.
Could you register the function that positions the panel in the pageLoad event of the ASP.NET client-side library?
This link may be helpful: ASP.NET AJAX Client Life-Cycle Events
Because you're storing the panel's location in a cookie, you could update the panel's location during the server side postback event.
Since you already have code to reposition the panel during pageLoad, you can add code on server side to hide the panel when IsPostback.
On pageLoad, you'll need to add step to set panel.style.display='' after panel after reposition.
Related
I would like to embed a ListBox into an UpdatePanel. The ListBox needs to have multi select enabled, with a post back triggered on item selection. My problem is the scroll bar on postback. It gets back to the top everytime an item is clicked. I have tried different ways to back up the scroll position, there is just always something wrong with it (at least in IE8, the browser I have to focus on). Either I get a flicker, or as soon as the user uses his mouse wheel after post back, the scroll bar will then jump back to the top. This does not happen in Chrome and Mozilla.
I was thinking, maybe there is something that should work - posting back without ever redrawing my ListBox / udpating the containing UpdatePanel ? Is this possible ?
Any full postback will necessarily repaint a list view so maintaining the scroll position of the listview is going to be problematic
Smart Nav
If it is the position of the page scroll position you are struggling with then you could try smart navigation
http://msdn.microsoft.com/en-us/library/system.web.ui.page.maintainscrollpositiononpostback.aspx
I don't think browser coverage is going to be hugely reliable for this (for example see http://forums.asp.net/p/1094179/1651390.aspx)
Update Panels and postback controls
If you are just updating the content in the update panel then it shouldn't lose it's page position. Make sure you are doing the partial post back and not the full. The listbox and the control triggering the postback should both be within the update panel.
There are caveats to this though - if you have a button outside of the update panel it can trigger the partial postback if it is in the triggers collection of the panel (http://msdn.microsoft.com/en-us/library/system.web.ui.updatepanel.triggers.aspx)
JQuery AJAX
The nuclear option would be to use JQuery AJAX or similar e.g. proper AJAX not the strange fake halfway house stuff that the update panels use (not to say that they aren't very useful - just need to be used judiciously). JQuery AJAX is a swine to get working within the postback architecture so I wouldn't necessarily recommend.
Maintaining the ListBox scroll position
Note - if it is the listbox scroll position that you are concerned about them this question
Maintain scroll position in listboxes in updatepanels, NOT the page
gives some good advice
Hope that helps some
I think flickers could always happen whatever you do (flickering is actually the browser that renders contents in several phases).
You should start by trying the MaintainScrollPositionOnPostBack page's property.
http://msdn.microsoft.com/en-us/library/system.web.ui.page.maintainscrollpositiononpostback.aspx
Why do you need to postback on every item selection ? Don't you mean an async postback ?
I had a similar issue with a ListBox inside a user control, and who in turn was in an UpdatePanel. I used jQuery to deal with click events on two buttons that were selecting and unselecting all items in the listbox.
Try this:
Create a .js file (e.g. select.js) and insert your jQuery code in there. Something like:
function pageLoad() {
//insert code here
}
Important to use pageLoad() instead of (document).ready.
Then, insert the script reference in your ScriptManager:
<asp:ScriptManager ID="sm" runat="server" EnablePartialRendering="True">
<Scripts>
<asp:ScriptReference Path="~/Scripts/Select.js" />
</Scripts>
</asp:ScriptManager>
I dynamically load a User Control, with an Update Panel inside a Place Holder.
When I click a button from the User Control, should refresh the Update Panel contents, but it refresh the entire page instead, and the User Control is disappearing from the page, because the page's Page_Load does not load anything if it's a PostBack.
How I can fix it?
Whenever a partial or full postback happen , Automatically all update() method of all updatepanels fire . For preventing such this behavior you need to set UpdateMode="Conditional" property . In this situation you need to specify asynchronous trigger Or ChildrenAsTriggers=true .
for preventing a dynamically loaded-usercontrol to be disappear ,It's good to save it in ViewState , Here is a tutorial and sample application
I think you'll need to reinject the control in page_load or pre_render. Dynamically created controls don't live through postback.
Make sure you are creating the control EVERY page request, regardless of GET/POST. Also, make sure you are giving it the same ID.
I like to override the CreateChildControls method.
You need to add the control page to the page in the page_init method. It has to be added on each post back. The control will retain all the values even after adding it back.
There is a full working example at this link.
Been pulling my hair out and doing a bit of looking on the web to try and figure out an elegant solution to my issue.
I have a ProductImages.aspx page. It shows all of the images associated with that product in a dynamically created list. Events are wired up to each picture to allow you to update it.
This works fine.
However, I have an option at the end which lets me add a new image. This is a button which fires off a call to the AddImage method.
Now what is happening is that the original controls are being create and added to the page with events. Then the button event if fired which recreates all of the existing image controls and a new one. Add this point the new image control create after the OnInit does not have events attached due to the events being added AFTER the OnInit.
I can do a Response.Redirect to reload the page and fire the OnInit to wire up the events again but this seems very inelegant and destroys the point of using update Panels.
Any ideas?
I'm thinking you could always load the picture upload control in a div and have a Javascript link to toggle the display attribute of the div.
Or perhaps use CollapsiblePanels from the AjaxToolKit to hide and show the upload form.
I think either of those ways would be more elegant than doing a post back (even if it's in an UpdatePanel) just to retrieve the picture upload form.
Your questions makes it sound like you're saying that you can't put the controls in OnInit because it is only fired on the first load of the page. This is not the case - OnInit is fired each time the page is loaded (including postbacks), so you can re-create your controls there even when using an update panel.
One property that is different between the initial load and the postbacks is the Page.IsPostback property, which you can use to just perform actions on the first load of the page.
I have a ListView on a page that displays a list of widgets. When a user clicks on one of the items in the list, I want to display a ModalPopup that contains controls allowing the user to operate on the item they selected.
I could easily accomplish this by placing a Panel and a ModalPopupExtender in the ListView's ItemTemplate, but this mean one set of hidden controls for each and every widget, which would massively bloat the page size. (There are going to be some rather heavyweight controls in there.) Instead I want to reuse a single ModalPopup for each of the widgets in the list.
I've done some searching but I haven't found anything that applies directly to my situation before. From what I've been able to figure out, however, I have to do something like this:
Place a Panel and a ModalPopupExtender on the page inside an UpdatePanel.
Build a custom WidgetManipulator user control that has a WidgetID property. Put this in the Panel, along with a couple OK/Cancel buttons.
In Javascript on the page, attach a click handler to each widget in the ListView that triggers a postback on the UpdatePanel.
On the UpdatePanel_Load event on the server, display the ModalPopup and then set the WidgetID propety on the WidgetManipulator to the ID of the clicked widget.
On the OKButton_Click event or CancelButton_Click event on the server, hide the ModalPopup. If OKButton was clicked, call WidgetManipulator.SaveChanges() first.
The part I haven't figured out is: How the heck do I know what widget was clicked on, and how do I pass that back to the server when I refresh the UpdatePanel? Is this even the right approach at all?
If you can use jQuery instead you could do something along the lines of these two posts:
Modal Delete Confirmation Version
Two Using jQuery SimpleModal Plugin
Demo
Inserting Content Using
jQuery SimpleModal Plugin Demo
When I need to pass data from client to server in ASP.NET AJAX, I generally use an asp:HiddenField with runat="server". Both can see it freely, but beware potential postback asynchronicity.
Sounds like you need to notify the server the widget was clicked - You may use a Timer to postback; or I'd go with option 5.
I've got a web application working using VB and Ajax. I'm using updatepanels to avoid the irritating "flicker" on postbacks to the server.
I would like to have a button control defined within the updatepanel itself (tried moving it outside and got some catastrophic error, so left it there) that makes the current panel not visible and a sibling panel visible. This works with the exception that the button must be clicked twice. Not double clicked, but clicked once than clicked again.
In setting breakpoints I discovered the code behind that's attached to the button is actually being executed on the first click, but the panels don't switch as expected. If I click the same button OR worse yet, a different button, the expected behavior of the second panel appearing occurs. However, with the second button being clicked there's an unwanted bonus of a third panel being displayed, the third panel being made visible due to the second button being clicked.
I'm assuming this behavior is due to the updatepanel and its Ajax nature. Is there a way to avoid the second click? Am I misusing the updatepanel? I really wanted to use a modal popup (right out of the AjaxToolKit) but had problems with posting back the data so I opted for this approach. Any insights, assistance, even criticism would be welcome as this has plagued me long enough. Thanks
If you get rid of the UpdatePanels do things work as expected with PostBacks? Chances are something in your Page_Load or other event higher up the chain are "resetting" things in some way before it gets to your click event. Could this be the case?
I think your problem is that only the update panel is receiving data from the server after the method executes. The panel your are trying to change is outside of the update panel so it does not know that its properties have changed.
You either need to do a full page postback or have the panel you wish to modify inside the update panel.
I have run into this before and resolved it, I just can't remember how. I will try to find my old code and get back to you. one thought, do you have EnablePartialRendering enabled in your scriptmanager? maybe try wrapping both containers in a third panel.
Your update panel is sitting inside the other panels.
Should that be the other way around? AFAIK only controls within the update panel will get updated in via the AJAX call.
Here's a fairly simple solution. (I was having the same problem this morning.)
The UpdatePanel can't render stuff outside itself. So, as you noticed, the updates are happening, but you're not seeing the result.
The easiest solution is to force a full postback. You can do that like this:
protected override void OnInit(EventArgs e)
{
var scriptManager = ScriptManager.GetCurrent(this);
// or this.Page in a UserControl, etc.
scriptManager.RegisterPostBackControl(someButton);
scriptManager.RegisterPostBackControl(someOtherButton);
// etc. for each control that needs to update something outside the UpdatePanel
}
This still allows the buttons themselves to be updated in the UpdatePanel by Ajax (e.g. changing their state to disabled or enabled). The full postback only happens if the buttons are clicked.
Like others have said an update panel only updates its contents, thats one of the main benefits of using it.
Panel2 and pnlPrvCmt need to be inside your update panel for your button click method to work. Another option would be to put Panel2 inside one update panel and pnlPrvCmt inside a second update panel. Then any control inside either update panel will cause both to refresh, as long as the UpdateMode=Always (which it is by default).
Try giving the dynamic control an ID when it is created. For some reason this is required by .net for a dynamic control to work in this context.
myControl.id="newID"
I have found this to occur under 2 different scenerios:
No ID set on the control. Either the ID is left off of the markup or the the ID was not set when a dynamic control was created. ASP.Net uses the ID to track actions.
Nested UpdatePanels. Scenerio: When using a Masterpage, you might have a content placeholder that you wrap in an UpdatePanel so that an UpdatePanel is not needed in the content on the page. Then, in developing your page you might, as a habit, add an UpdatePanel.