I'm using VS2010,C# to develop my ASP.NET web app. I have some a combo box for selecting province and another combo box for selecting cities, when user selected a province, the city combo box should immediately display cities belonging to that province.
I have inserted an AJAX script manager into my page, also an AJAX update panel (both from toolbox) in which I've inserted my combo boxes. Then I enabled province combo box autopostback property so that when user changes his selection, I can detect it and change contents of city combo box accordingly.
It works fine, as I load province and city names from my database into a list at page startup (of course this load process is performed in a if(!IsPostback) statement so that data is loaded only once). I think the time needed to update city combo box is a bit more than what is required, as there is a postback when user changes province combo box selection, what is the best (and correct) way of performing this operation? is it ok? are there any better ways of doing it? how can I IMMEDIATELY update city combo box after province combo box selection is changed, as currently there is a short delay.
thanks
You're always going to have a delay if you do it on the server side with an ASP.NET postback.
Another option would be to output some JSON to your page on initial load which contains an array of all your provinces with a nested array for each province containing its respective cities.
Then you can remove the auto postback and do everything client side with JavaScript. Whenever the selected province changes you just need to parse your JSON and add all the associated cities to the second dropdown list.
Related
I’m working on an asp.net page that simplified looks like this: A group of radiobuttons at the top, some asp dropdownlists in the middle and an asp button labled ”save” at the bottom. I want the page to work like this: When one radiobutton in the group has focus you should be able select one of the others by pressing the up and down arrow keys. At the same time different dropdownlists should be disabled or enabled depending on which radiobutton is selected. Then you select values from the enabled dropdownlists. Finally, by clicking ”save” values should be fetched both from the radiobuttons and the dropdownlists and passed via a procedure to a database. I’ve tried out html input radiobuttons, asp radiobutton and asp radiobuttonlist but have not managed to get the page to work the way I want it to. I’ll be very glad for help to a solution.
Write a project to display the flags of four different countries, depending on the setting of the radio buttons. In addition, display the name of the country in the large label under the flag picture box. The user also can choose to display or hide the form's title, the country name, and the name of the programmer. Use check boxes for the display/hide choices.
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.
I have several combo boxes and labels. when a user select any item from the combo box, the corresponding value will be retrieved from database and will be shown on the label. I have done these part successfully.
But my query is, when I select any item from the combo box, the whole page posts back to the server (AutoPostBack set to True.)
is it possible to post back only a part of page not the whole page (i.e. only combo box controls may be posted back to server instead of whole page)?
You could use AJAX to achieve that. In ASP.NET there is the UpdatePanel control which might help you.
In my application, I have a list box(list of stores), Add and Remove buttons and another list box (selected stores).
I have Following requirements:
1. On click of Add button, copy selected items from the master stores list to the selected store list and clear the selection from master store list.
2. On Click of Remove button, remove the selected stores from the selected stores list.
I have added my master store list box and selected store list boxes to 2 different update panels and added triggers for each of the update panel. Things are working fine but one thing I have observed that it is taking unusually long to move selected stores from master list to selected list. I have around 5000 entries in the master list of stores.
If I remove the update panel for master store list, things are normal but I am not able to clear the selection. Am I doing something wrong? Is there a way to clear selection of listbox outside the update panel.
It sounds like your using UpdatePanels to move ListItems between 2 ListBox controls. This creates a overhead as each time you trigger the 'add' event it has to postback and render the UpdatePanel again (including the viewstate).
Have you looked into using jQuery to move your list items between your ListBox controls thus all the moving between boxes is handled by the browser. This will speed up the experience for the user?
You should also be able to use jQuery to clear the selection. If you can provide me a little snippet of your markup I can help you get it written up (or shoot me a message).
Brian =)
How do I handle selection of multiple items with autocomplete? The objects I return from my JSON web service contain an ID and a Label - the ID is the ID of the entity in the database, and the Label is some text to display for the user.
At the moment, when I select an item in the autocomplete dropdown, the value of the item's ID is stored in a hidden field, and the label is displayed. When I remove the label, I clear the ID of the hidden field - this is done by adding an anchor element to the DOM that handles this.
Now, I want to have multiple selections. I want to be able to enter some text, get an autocomplete dropdown, select an item and some other options, then be able to click an 'Add New' button or the likes to be able to select another instance.
For example, I'd type in a person's name and get an autocomplete selection. I'd select a person, and then enter their age, and click 'Add'. The person's id, name, and age will be stored somewhere so that I can retrieve it on the server side when I post back.
I'm not quite sure how to do it? I'm thinking of a hidden field - I assume that many hidden fields of the same name/id turn up on the server side as an array, which I can then use. But I haven't tried this yet in ASP.NET.
How have you gone about this problem?
Well, no suggestions. I did it eventually by, in the autocomplete selection, creating a nicely styled span. It's text contains the label, it contains an anchor element that I bind a click event to that removes the element if necessary, and I use the jQuery data API to store the ID value on the span. This span gets added to a container div, before the textbox that I'm using to autocomplete. I also bind a keyup event to the textbox to check for backspace - when it's pressed and the textfield is empty, then I remove the last autocomplete item. It's a little more complex though, since by the time the keyup event is pressed, the character that was being removed from the textbox has already been removed, so I store the actual value in the keydown event too using the jQuery API and check this in the keyup event.
There is a hidden field on the form, that I keep populated with a comma-separated list of ID values extracted from the span's data. This can be kept in sync when adding/removing items, or only when I post back - it's simplest to just clear it and repopulate it, and is quite efficient as far as I can tell.
When loading the page, the spans and hidden field must be generated.
Hope this helps anyone else looking for a solution.