Dynamic Controls, Update Panels and Events - Best Way To Achieve My Result - asp.net

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.

Related

Dynamically generated Radio Button calling CheckedChanged event

This is a little difficult to explain so please bear with me.
I have a procedure that is generating some radio buttons and assigning a CheckedChanged postback event based on the level being passed through (up to 4 levels). When the first level is checked (radio button selected) the postback event rb_CheckChanged00() is called and a check is done to see if this item has any children, if it does, it will create more radio buttons and assign rb_CheckChanged01 to the CheckChanged event for these - This part is working fine.
The issue I have is when I select the second Radio Button that has been created (the child), it doesn't seem to go to the post back event at all. The page is posting back when I click on it but everything resets because it won't go into rb_CheckChanged01.
I know this info is quite vague but I am hoping someone has an idea on how the post back event works and if I am somehow using it incorrectly.
Using: ASP.NET 2.0, IIS7
Thanks.
Most of the time when the dynamically created control's events are not fired, it's because the controls are 'reset' upon postback.
To make sure the same controls get created each and every time make sure that the control's IDs are set to the same values each and every time, before the ViewState is loaded. This way, when the control is added to the control collection of the page, once the ViewState is loaded, it'll persist it's properties. (just to describe what happens, in a nutshell)
One of the best articles I've read on this topic is this one. Make sure you read it, to fully understand what's happening in the background.
Looks like the child RBs are cleaned before they are able to trigger the event. From my personal experience, it's best to keep track of those dynamically generated objects, and regenerate them in every postback. The events will start to trigger :)
Your controls and events are not registered in the ViewState because dynamic controls need to be loaded in the Page_Init. Because they're not persisted in the ViewState, they won't be registered with events. A similar question:
Problem with dynamic controls in .NET
Only 1 thing can cause this, you create the rb's on page_load and don't add them to a List<> or something similar and that object to Session. What you need to do is when you create the items, Add them to a List and add that list to Session["RadioButtons"] and if the Page.IsPostBack is true, load your controls one by one from your list which is kept in your session to your page.

in ajaxified page back button is not working

in my ajaxified page i have used several user control shifting from one user control to anothe r and then pressing the back button takes me to first page instead of previously filtered page
how to solve this
all this filters are linkbuttons i am also using listview these filters are actually filtering the content of this listview
You may take a look at the jquery history plugin. If you are using UpdatePanel to perform the AJAX requests you might find this article helpful as well as this video.

Passing data to server code from a client-side control using ASP.NET AJAX

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.

ASP.NET Dynamic Page Controls: Is it possible to bind events AFTER Page.Load?

I have a site that I am currently working on in ASP.NET 2.0 using the usual WebForm stuff and ASP.NET AJAX 1.0. Is it possible to bind an event to a dynamically created control after the Page.Load event?
I have a table <td> element that I am dynamically creating similarly to this code:
' Create Link Button
lnk.ID = String.Format("lnkDetails_{0}", dr("Id"))
lnk.Text = dr("Name").ToString()
lnk.CommandArgument = dr("Id").ToString()
AddHandler lnk.Click, AddressOf DetailsLink_Click
cName.Controls.Add(lnk)
This this code is looped over for each row in a database (and of course more cells are added to the table, including an ImageButton with an event. The events work flawlessly when I execute this code during events leading up to and including Page.Load. I need to be able to fill this table with current data, which is updated during a btnClick Event elsewhere on the page, which occurs after this Page_Load event, so I am populating with old data. If I change this code to Page.LoadComplete, events stop working.
This data is a summary display of various components of an application, things like somebody's name, which when updated on a 'detail' form, updates the database by partial postback (a requirement), then it needs to show the update in this 'summary' section after an update. Currently it takes 2 postbacks to actually see the change in the 'summary' section, so effectively the summary is 1 step behind the changes (clear as mud?)
What would be the best way for me to populate this table with current data (which is available during/after Page.LoadComplete), but still have an event fire when a link is clicked (the event causes an UpdatePanel to display the 'detail' form).
I also have jQuery at my disposal and the usual ASP.NET AJAX methods, also javascript is a requirement for the website, so I do not need to degrade for unsupported browsers.
This is my first ASP.NET web application and need some help figuring out the best way to make this happen (I'm well versed in PHP, Django and the usual ways to do web forms - things like having multiple forms on one page o_O).
Update:
There really isn't a good way to bind control events to controls after Page_Load. The overall architecture of the pages is there is one ASP.NET form encompassing the entire page, there is only 1 aspx page. I am using master pages (however it doesn't have any obvious implications to my issue).
The page is split into a left and right 'pane', the left is a summary of all the data (in an update panel), the right 'pane' has 6 'tabs' implemented each as their own user control, each with several form fields and an update button all in it's own UpdatePanel.
An update on any of these tabs only refreshes the summary panel (UpdatePanel.update()) and its own panel. The 'refreshing' and event binding of dynamic controls of the summary from the db happens during Page_Load and the Update Button event updates db data. (The control event happens after Page_Load). I want to avoid doing a double post to get the summary to update, any thoughts are helpful.
You need to postback the whole page after your data changes in the 'btnClick Event elsewhere on the page'. It sounds like you have an UpdatePanel and it sounds like this is catching the postback of your btnClick event handler. Put the btnClick outside the UpdatePanel or change its triggers so that your btnClick forces a postback/refresh of your data. Or, redesign your table so it's AJAXly-refreshed when you click on btnClick, it's hard to get you more details without knowing more about the structure of your page and controls.
Good luck!
You can bind to an event whenever you want. It's just a simple event after all. But not all places might be suitable because you have to take into account when the event fires. And in most cases this happens between Page_Load and Page_PreRender. That includes the click event on a LinkButton. In general, I would recommend to add your dynamically created controls in the Page_Init stage.
You have to add the controls before Page.Load in order to maintain ViewState between postbacks, so use the OnInit event handler for that.
But once they're added, you should be able to bind event handlers (such as OnClick) at any point during or after the Page.Load... for example in your grid's ItemDataBound (or something like) or in the Page.PreRender.

Why does a button control need to be clicked twice?

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.

Resources