locked
Right approach to Create Dynamic Dropdown lists RRS feed

  • Question

  • User283528319 posted

    Hi all,

    Please help me to solve the (simplified sample) scenario <g class="gr_ gr_22 gr-alert gr_gramm gr_inline_cards gr_run_anim Style multiReplace" id="22" data-gr-id="22">below .</g>

    we have 2 dropdowns (inputs with <g class="gr_ gr_18 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="18" data-gr-id="18">datalists</g>). First is Countries Second is States when the first is selected the second is prepared by filtering for <g class="gr_ gr_19 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins doubleReplace replaceWithoutSep" id="19" data-gr-id="19">country</g>.

    My approach is below but <g class="gr_ gr_28 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="28" data-gr-id="28">dont</g> know how to do it or not sure it is the best.

    1- At page load download countries (using entity framework model) and make them <g class="gr_ gr_30 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling" id="30" data-gr-id="30">datalist</g> of countries input

    2- At page load download states and append them in a kind of data list (<g class="gr_ gr_31 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling" id="31" data-gr-id="31">json</g> or something like that or as a model)

    3- When the user <g class="gr_ gr_32 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling" id="32" data-gr-id="32">keyup</g> in <g class="gr_ gr_41 gr-alert gr_gramm gr_hide gr_inline_cards gr_run_anim Grammar multiReplace replaceWithoutSep replaceWithoutSep" id="41" data-gr-id="41">the states input</g>, I want to filter states with "<g class="gr_ gr_29 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="29" data-gr-id="29">Startwith</g>" and "Selected Country"

    and so on. 

    How can I do this or should I do this?

    (I didn't want to solve this with entity framework to not overload the server in every key up event and wanted to solve it client side)

    thanks.

    Saturday, January 19, 2019 6:39 AM

Answers

  • User-2054057000 posted

    This is the concept of Cascading drop down controls. In your states dropdown change event you call jQuery that will fill the city dropdown based on the selected states in the states dropdown.

    Kindly check this reference tutorial - How to Populate Cascading Dropdownlist with AJAX in ASP.NET

    If you want to filter out all the cities based on states ddl selected value, then you have to keep all the cities with there states in json format in some hidden text box. Then you filter the cities values from the json and bind the city ddl with it. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 21, 2019 12:55 PM

All replies

  • User1724605321 posted

    Hi fathbarut ,

    Your approach need to retire all the countries and states to client side  , recreate the dropdownlist in javascript each time after section changed of countries . IMO that is big risk in performance and should avoid that . I would suggest dynamically load the states dropdownlist based on the section of country :

    https://www.c-sharpcorner.com/article/dynamically-bind-the-dropdownlist-on-change-event-in-asp-net-mvc-5/

    Best Regards,

    Nan Yu 

    Monday, January 21, 2019 6:35 AM
  • User-2054057000 posted

    This is the concept of Cascading drop down controls. In your states dropdown change event you call jQuery that will fill the city dropdown based on the selected states in the states dropdown.

    Kindly check this reference tutorial - How to Populate Cascading Dropdownlist with AJAX in ASP.NET

    If you want to filter out all the cities based on states ddl selected value, then you have to keep all the cities with there states in json format in some hidden text box. Then you filter the cities values from the json and bind the city ddl with it. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 21, 2019 12:55 PM