Cascading dropdown empty after postback - asp.net

A form contains 2 cascading dropdowns. When an item is selected in the first dropdown, jQuery retrieves a list (json) from the server and fills the 2nd dropdown.
The user posts the page to the server, and when the page is returned the dropdown is empty because its not stored in viewstate.
What do you do in this situation? Is this the point where cascading dropdowns using jQuery and trying to make your page a little more stateless gets tedious?

You could always just set it up to pull the json from the server on page load as well, assuming that the first dropdown list has an item selected. The other option would be to pre-fill the second dropdown server-side if you know that the first dropdown has a value.

Related

How to generate a dropdown list from another?

I want to generate a drop down list from another drop down list. That is I have a dropdown of countries. When selecting a country,another dropdown must come with values as states of that specific country. How to do that in asp.net using c#?
for each country you have, add a new list item to the drop down list, with text the country and the value some id of the country. On the second drop down list, set the auto post back property to true and add an event to the on selected item change. In the event code, get the selected item and by the second ddl.
Try it!
Tip: add a hidden field on the page, and on the selected item changed event from the first ddl, set the value of the hidden field, the selected value. On the page_load event, verify if the value is string.empty and if is an id in the value. If it is, bind the second ddl.
The technology you're looking for is called a Cascading Dropdown.
If you are using WebForms then Ajax Control Toolkit then this has one built in:
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/CascadingDropDown/CascadingDropDown.aspx
Otherwise you might need to do a further search if you are using MVC.
PS I'm not particularly proud of posting a link to the Ajax Control Toolkit as its not the best library out there but it is an easy drop in for what you want. If you're serious about doing a good job then I'd search for better options for cascading dropdowns.

How to keep options in listbox after a postback?

I have (1) dropdown list, (2) listboxes, (1) button on a page.
The listboxes start out empty, but it is filled via jquery/ajax on the dropdown list change.
When i click the button it causes a postback and every time it does the contents (options) within the listboxes are removed.
Questions:
1) WHY does this happen?
2) HOW do i keep the contents of the listbox from being removed? No options in the listboxes are selected
The content/state of form controls are stored in view state that is created on server side by asp.net engine. The elements added on client wont be accessible on server side. You can put the content data in the hidden field in javascript and get the data back on server side from the hidden field and assign to control like listbox, dropdown etc. This is how asp.net also works.
This happends because since you add the values with AJAX, they are not added to the ViewState, which is what asp.net uses to persist the state of the form. Your best option is probably to use AJAX to avoid a postback or load the values on your page load event only if it's a postback.

How to control strange behavior of Ext.NET ComboBox controls?

I have few Ext.NET ComboBox controls on a Web Form. Selecting an item from the first fires the ValueChanged event to populate the second, and so on.
Except Force Selection property, I have not altered other properties of the ComboBox control.
I am experiencing odd behavior of Combo Box controls. As all controls get filled via AJAX request, I find it difficult to set focus on any control. As soon as I bring focus on any control, the cursor disappears after it gets filled.
Secondly, one of the ComboBox is not permitting me to select an item from the list. Even if I try to select an item, it automatically brings back the default item back, which is actually a sixth item in the list.
I double checked the queries and there is no way through which sixth item should get selected.
If I try to open the DropDown list using mouse, it opens for few seconds and collapses automatically.
Is there any way to fix these strange issue? Any other third-party open-source control?
I guess that combos are rebinded in each ajax requests
I suggest to rebind combos in Select direct event handler
Also see the following sample
http://examples1.ext.net/#/Form/ComboBox/Ajax_Linked_Combos/

How Does ASP.NET Knows Which Button Caused a PostBack?

I'm using ASP.NET 4 to create a page with elements that are used in a jQuery UI Sortable plugin.
All of these elements contain a button (implemented as a submit button) with the name SubmitButton. All but one of these buttons are hidden in the page's Load event. But if I drag the element to another position, and then submit the page using that button, ASP.NET gets confused.
ASP.NET thinks I've clicked a different button, one that wasn't even visible on the page, but is associated with content at the position where the clicked button was before the move. (If I don't move the element, it works fine.)
I can't seem to determine how this is happening. As I understand it, ASP.NET knows which submit button caused a postback because the button's name and value is included in the postback data. (__EVENTTARGET plays no role here and is empty.) So how can it think a different button submitted the page?
How could ASP.NET get confused about which button submitted the page?
(Sorry, it's not possible to put this page on a public website.)
I worked through this issue and here's what I found.
First of all, buttons by default are rendered as <input> tags with type = submit. The postback mechanism in this case has nothing to do with ASP.NET. The postback data includes, among other things, the name of the submit button that caused the postback along with the button's text (in the form name=text).
But ASP.NET button names, by default, include the names of all parent controls. When those controls are unnamed, they are given an ID like ctl00, ctl01, ctl02, etc. The result is that all my buttons are guaranteed to have a unique name.
The problem is when these buttons and parent controls are all created dynamically. On the postback, these controls are reconstructed in the load event but in the new order. Because the order affects the name (ctl01 vs ctl02), this means my submit button has a different name than it did when the page was originally rendered.
The result is that ASP.NET sees the wrong name associated with the submit button used to trigger the postback.

How do I populate one listbox from another listbox using JavaScript?

Can anyone tell me how to populate one listbox from another listbox item using JavaScript or ASP.NET 2.0?
Duplicate
How would I move one list box items to another listbox items in JavaScript?
For ex--My 1st listbox is Region then accourding to region selection the second listbox country will be display and accourding to country seletion state listbox will display all will come from database depends on Region Id or Country id n all
You may be interested in the 'Cascading Dropdown' control from the ASP.net AJAX Control Toolkit. http://www.asp.net/AJAX/AjaxControlToolkit/Samples/CascadingDropDown/CascadingDropDown.aspx
You could also probably do this without the toolkit, using the standard UpdatePanel from ASP.net AJAX and specifing the "onChange" event of the first dropdown as a "trigger" for that UpdatePanel to be updated. Be sure you set AutoPostback="true" on the dropdown so it is fired properly is you go this route also.
Your question leaves out a lot of detail, but basically you would wire a function to the onchange event of the first listbox, that would populate the second listbox. If the contents would need to be dynamically loaded, you would then need to use AJAX (or similar) to pull them from the server and push them into the second box; alternatively if your contents are statically defined and not too weighty, it would be more responsive to serve them with the original document (perhaps as an associative array keyed on the values of the first listbox) and then update the second listbox based on an array lookup.

Resources