ASP.Net ListBox values not posting changes after jQuery manipulation? - asp.net

I have an ASP.Net page with two ListBox components, rendered in the browser as <select> lists. I'm using jQuery to move elements from one list to another by manipulating the DOM. I then select all elements with the mouse and postback the form. That way, all the list elements are posted with the form.
When I submit the form, in my button_save() event handler, the Request.Form[<<listbox ID>>] values are correct. However the ListBox controls themselves, specifically their Items collections, do not reflect my changes.
I've also used Fiddler to modify the select items and submit the form. Same as above, the ListBox values are no different, though the Request.Form values are. Would anyone know what's going on or what incorrect assumptions I'm making?

I believe the problem is that the server constructs a ListBox object that is unaware of changes made to the select box on the client side. That is to say, it uses the ASP.NET markup to construct the list of items, rather than the information submitted from the request.
I'm not aware of any workaround to this, other than accessing the Request.Form values directly.

I believe the root issue is: the ListBox's options are stored in the page's viewstate. When you use client-side javascript / jquery to modify the list's contents, those changes are not reflected in the viewstate. Thus, when you postback, ASP.NET uses the viewstate to build the lists for your codebehind, and your client-side changes are lost.
One way to resolve this would be to manipulate the lists' content via postback, instead of client-side (javascript/jquery). By doing it that way, all changes to the listboxes are incorporated into the viewstate, and thus will remain consistent for each postback.
I am a big fan of jquery (much moreso than postbacks or MS-Ajax/partial-postbacks), so I completely understand that this approach may not be very appealing. Unfortunately, it's the only one I can think of right now. Maybe other stackoverflow'ers will have better alternatives.

Larry, in case you haven't found a solution, here is what I would do.
As other fellows stated, since you are changing DOM client-side, the changes are not reflected to ViewState and therefore you cannot access new values from code-behind.
As a solution, you can create a hidden value and set its value to a serialized form of the lists (combined value/text pairs) everytime you change a list with jQuery. Then you can access the hidden value from code behind and finally deserialize it to get all changes. The method is pretty straightforward actually.

Related

ASP.NET dynamic controls data exchange in postback

Please excuse me for a probably low quality of this question, since I'm not a web dev, so I possibly don't now some obvious things and don't know what to Google for. I think problem must have some simple solution, but I'm struggling with it for two days now, so I feel myself pretty stupid :-).
I have a custom control which is a set of checkboxes which are added dynamically based on a property which is set in OnLoad event of a page. I have two such controls on a page and second control items should be based on items selected in first control.
The problem is, I can't figure out, how to catch on autopostback which boxes were selected in first control before second contol is constructed to pass this data to it?
Take a look at this.
http://forums.asp.net/t/1440174.aspx
Since your building them dynamically, they are not as easy to find as webforms would like to be, if you added them to the page and wired up events and such.
Your going to look at the Request.Forms list, and search thru it for any controls you want.
I believe checkboxes are like radio buttons, they only return if they are checked, which is good, cause you want to know which ones were checked.
I've used same solution as in the accepted answer for this question: Dynamically Change User Control in ASP.Net , just need to assign an unique id for each dynamically created CheckBox in custom control. Not as clean solution as I want but at least it works.
You can save the data in the ViewState, QueryString or as Session before moving to the next page and you can do modifications based on it.

Repeater Control asp.net

I have a repeater control that displays a playlist for my users, this control can sometimes hold say 1000 or more songs. This is a great feature, I was previously using jQuery to do client side sorting, but that has limitations. So I implemented server side sorting which works great, the only issue i am seeing is that when playlist are this long it takes a second or 2 before the postback and sorting is actually started.
I have watched the actions in firebug and done some research and understand that the databound values are not preserved, which makes sence. My question is, When watching in Firebug, it looks like the repeater control removes all the items in the collection before it starts the postback? is this true have others experienced this?
The repeater control ceases to exist entirely between postbacks. The repeater control is called into existance when you make a page request. It is populated, etc. then rendered to the browser. Once done, ASP.NET will delete all the objects on the page (or rather the garbage collector will get them when required. Either way, you can't get them any more).
When the postback happens it has to re-create the entire repeater all over again. There are some mechanisms, such as viewstate, that try to make this as seamless as possible (i.e. recreating controls just as you left them in the previous request) but they sometimes don't work the way you might expect.

asp.net event related problem

hello friends i have a check box list which contains all the courses kept in the data base(on page load) now i want that on some event of check box list all branches corresponding to each checked box of course check box list should be list in another check box list(that is the business logic i will do my own) but the problem is that i am not finding any event where i can send all selected check box list value and can generate appropriate result, if any alternate control or solution you can suggest then please suggest me this.
Set the AutoPostBack property to true and in the SelectedIndexChanged event you can loop over the elements that are selected and then bind your second control depending on that.
Another option would be to go for an ajax solution. For this I suggest you take a look at the change event in jQuery to bind to your checkboxlist and use the ajax stack to retrieve the extra information as html and plug that into a span as innerHtml.
I think you need to clarify where your logic sits, and where the information required for that logic to work sits - in order to even know whether you're dealing with a client-side or a server-side technology question
There's two basic possibilities:
Either all required inforamtion is already in the loaded page. In that case, this is basically a javascript problem. I'd dive a bit into jQuery here which has excellent capabilities of finding elements based on properties, and manipulating them
Alternatively, some of your logic and/or data remains on the server. In that case, you can
go with the AutoPostBack property XIII mentioned, resulting, as you correctly assume, in a reload after every click.
Have the user click all the checkboxes they like, and then have them click on a "do something now" button which performs a single postback
Transmit the information about the checkbox click to the server via javascript, get a response, and select other boxes accordingly. Again, XIII already mentioned that by "ajax solution".
So I'm just trying to elaborate on what different approaches do for you, and what questions you need to answer yourself before you can proceed to a concrete technical solution.

ASP.NET and Javascript DOM manipulation

I have an aspx page with a set of controls.
A small JS script written on top of jQuery allows the user to drag "li" elements from one list to another.
What I would like now is for my C# code to be able to figure out which items the user has placed in which list after the page is posted back to the server.
Does anyone know how I can do this?
Thanks.
Without some specifics, its hard to get into details. But for ASP.NET server-side controls, the trick is properly maintaining viewstate (or just bypassing it). So strategically you've got two fundamental options:
1) Track the changes server-side by using AJAX to push updates to the server.
2) Track the data client-side by updating some element ASP.NET could understand. My personal favorite is to use a hidden form field that I add a user's "moves" to in a format that can be replayed in my web form.
The easiest way to do it would be to add a HiddenField to your page. Whenever the lists change, populate the HiddenField's value accordingly. When a postback occurs, the HiddenField's value will be available on the server side.
What i've done in the past with drag & drop functionality in ASP.NET, is read the DOM elements via jQuery, and do an AJAX postback with the values in those DOM elements as a parameter.

How to retrieve data from dynamically added textboxes?

Im adding textboxes (not a fixed number of textboxes) dynamically to a form on ASP.NET page, how do i read back data from these textboxes?
Assuming you're wanting to access the controls on the postback you'd probably re-create the dynamic controls exactly as they were created on the initial load, then use the page's FindControls method to find the controls. It would probably help to create the textboxes with IDs like Textbox1, Textbox2, etc.
Look at Request.Params and extract them from there. You will, of course, have to give them ids to be able to tell them apart.
From all the ASP.NET apps I've worked with, .NET likes to use the following algorithm when generating the Id for server controls:
ctl00$cphBody$[ControlID]
Try using this algorithm when accessing your data from the dynamically generated textboxes.
When you add them you should be giving them names/ids, and you can use those to reference them.
If not, walk your DOM in javascript to find them inside the form you made - they'll be in the same order you inserted them.
Lastly, they're all available as post/get inputs to your page, so you should be able to look at them all as long as you assigned them different names.
-Adam
When creating textboxes dynamically (presumably using JavaScript, but same goes for ASP.NET controls) give them names in a specific pattern. The one you will be able to recognize later.
On server-side, in any event handler occurring after Page_Init you can iterate through Request.Form collection.
Do not be tempted to use Request.Param because it can be used to apply cross-site request forgery on your application (an attacker could lure user into issuing a GET request which your application would interpret the same as it would interpret a POST one, which is usually not a good thing).
If you are adding dynamic ASP.NET controls (in Page_Render for example) you can also reconstruct controls and use their properties.
You can use FindControl and pass the textbox ID to get an instance of the textbox when post back. The Text property contains the data, given that we are at page load stage or later in the cycle.
When adding dynamic controls, override the CreateChildControls method and add the dynamic controls to control hierarchy at this stage of the cycle.
Remember that in ASP.Net, every postback is a new instance of your class. If you created these controls during a previous postback or on the first view then they were garbage collected with the rest of that previous instance. So to use the controls in this new instance, you need to create them again. If you need the state information loaded for those controls (including any value entered by the user), you also need to create before the viewstate is loaded, meaning you do it during the Init event, rather than the load event.
To create dynamic controls, I would usually use a ASP.NET PlaceHolder Control and add the dynamic controls to this container.
I would give each dynamic control an ID.
You can then subsequently use FindControl on the PlaceHolder to access the dynamic controls.
I say "dynamic controls" to mean controls you add at run-time

Resources