Auto-populating Select Boxes using jQuery & AJAX in asp.net MVC

Question

1-problem: I need to enable users to select one or more things from a large amount of information that is grouped into a hierarchical structure for selection, data entry, were data could have a depth of 4, 5 parent categories.

2-functionality I´m looking for: Similar to eBay shows cascading lists when selecting an item’s category. When the page is displayed, you only get the first list box. After selecting one in the first, the second is displayed. The process continues until the selected category does not have sub-categories.

} ebay example

3-actual table and query: table:

-int Id

-string Name

-int ParentId

query:

public IList<CategoryTable> listcategories(int parentId)

            {
            var query = from c in categorytable
                        where c.ParentId == parentId
                        select c;

                var result= query.ToList();
                return result;
}

4-I dont know how to start, any guideline, live example jsfiddle, demo or tutorial would be greatly appreciated. brgds

UPDATE: I believe that this functionality is not very developed in webtutorials and questions. consequently I started a bounty for a great answer. I will asign the bounty for a live example of the functionality previous commented. thanks!

Try different wording in your searches. What it sounds like you're looking for is called cascading DropDowns. That may get more specific information using these terms. — Nick Albrecht, Apr 05 '13 at 14:08
thanks @Yarx . I found some results for cascading dropdowns, but mainly focused on different tables, example [country, city, states], no reference for same table [like treeview but with selectobxes or dropdowns] I found information in php http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/ but nothing in c# . it seems that this functionality coud be achieved with select boxes and I feel it provides a better UX when you have to serve many categories with many parent categories. brgds! — s_h, Apr 05 '13 at 14:12
The actual implementation will likely be different since you are looking to drill into cetegories that pull from one table but the client side HTML and javascript I would expect to be fairly generic. But what you're looking for is a very broad question about an entire feature (Cascading dropdowns for category drilldown using hierarchical data in one table via MVC and ajax). This covered a lot of different aspects and is actually a very open question that's difficult to answer. — Nick Albrecht, Apr 05 '13 at 14:24
@Yarx thanks, yes based on what i search in google it doesnt seems to be a simple feature. the idea to request a http://jsfiddle.net/ example or similar was with the idea to avoid supporters the work to create a very large concept and to point directly to the functionality.. but yes you are right, probably the answer will not be fullfilled. thank you once again! — s_h, Apr 05 '13 at 14:33

score 2 · Answer 1 · edited Apr 05 '13 at 13:57

What I have learned by handling large amounts of data is:

don't try to load all data at once to the client
load only the data the client actually needs
do the filtering, searching and sorting in the database, e.g. by stored procedures. Especially for data, which are distributed across multiple tables.
optimize your database queries, indexes are good
keep always in mind how many simultanious queries do you expect
linq is good but not for everything when handling large data
spend time to think and plan what data are really needed

To display the data on your webpage there many jQuery plugins to list data where you could bind functions to an "selected"-event. For example knockOut.js, which comes with MVC4. You may don't need a fully loaded jQuery "hierachical-data-list-display"-plugin. Perhaps you can realize it by using "seleted"-events, ajax loading and show/hide functions.

According to your comments I would think of a combination of jQuery and MVC:

in MVC I would create a patial view like

@model MvcApplication.Models.DataModel

<ol id="@Model.DataCategorieLevel">

@for (var i = 0; Model.Data.Count > i; i++)
{
    <li value="@Model.Data[i].ItemId" onclick="itemSelected(@Model.Data[i].ItemId, @Model.DataCategoryLevel);" >@Model.Data[i].ItemName</li>
}

</ol>

the javascript could be something like:

    function itemSelected(selectedItemId, itemCategoryLevel) {
        // ajax call to an action which loads the next categorie items into the partial view and returns them
        // on success remove all lists with an category - level lower than itemCategoryLevel
        // append the returned List to the HTML-container which holds the lists
    }

in the called MVC-Action I would determine if it is the last category level or not. If it is the last level, I would return a different partial view with other onclick event bindings

This is what I would try to realize, before I start searching for some plugins

thanks, Ive been checking knockout js nested dropdown from cart example. but I cannot find the way to make it work with deep nested categories. typical examples are select country -> select state. but i dont know what i have to do to select category -> display child -> display child, etc.. in ko. brgds! — s_h, Mar 30 '13 at 11:31
here is an example but with data populated from different tables-> http://jsfiddle.net/abritez/ttyhE/2/ — s_h, Mar 30 '13 at 11:32

score 1 · Accepted Answer · answered Apr 08 '13 at 13:26

I'm using knockout and Webapi to power cascading dropdowns in an app I'm developing at the moment.

View I've got a basic dropdown list like below.

<select data-bind="options: CurrentList, 
                   optionsText: 'name',                                                        
                   value: CurrentListSelectedItem,
                   optionsCaption: 'Please Select...'"></select>

View Model

self.CurrentList = ko.observableArray(CurrentListData);
self.CurrentListSelectedItem = ko.observable();
self.CurrentListSelectedItem.subscribe(function () {
    //ajaxcall to populate list 2
});

Server side I've got a simple rest service that take an Id of a point in the tree and returns all its children, this way you can just chain as many of these dropdowns together as you wish (as long as your hierarchy has the levels to match.

See fiddle of working example with mocked data http://jsfiddle.net/tgriley1/vEBGS/

Hope it helps, good luck :). I've got my fingers crossed for the bounty haha. — Tom Riley, Apr 09 '13 at 08:04

score 1 · Answer 3 · edited May 23 '17 at 12:03

I recently had a similar problem when using Cascading Drop-downs and I did something like this.

Firstly, write some jquery on the view so that when you select the first item it sends an ajax request to the server, and brings back a JSON or xml response.

I did something like

<script>
$(function () {
        $("select#ParentId").change(function (evt) {

                $.ajax({
                    url: "/Home/GetChildItems",
                    type: 'Post',
                    data: { ParentId: $("select#ParentId").val() },
                    success: function (data) {
                        var items = "";
                        $.each(data, function (i, val) {
                            items += "<option value='" + val.ChildId + "'>" + val.ChildName + "</option>";
                        });
                        $("select#ChildDropDown").empty().html(items);
                    }
                });

        });
    });
</script>

On the Controller, something like

Public JsonResult GetChildItems(int ParentId)
{
 //code to retrieve the data

  JsonResult result = new JsonResult();
                result.Data = **object that contains the child data**;
                return result;
}

I'm a beginner myself, so I'm not sure how good this code is, but it worked for me when creating cascading drop-downs using jquery.

Hope it helps.

Link to the cascading drop down question : Populating dropdown with JSON result - Cascading DropDown using MVC3, JQuery, Ajax, JSON

hi @jundev im trying with the knockoutjs example, if i cannot solve it with that approach i will work in yours, brgds! — s_h, Apr 09 '13 at 05:43

score 1 · Answer 4 · answered May 06 '13 at 12:40

Hi I had the same scenario , What I used is, a autocomplete list with with web API, after specific number of characters , it calls the Web API and loads the data for the particular wild card. Apart from this when I found that data returned is still large , I added pagination at SQL server end

score 0 · Answer 5 · answered Apr 08 '13 at 16:58

The telerik demo is always a good place to learn MVC from

http://demos.telerik.com/aspnet-mvc/razor/combobox/cascadingcombobox

This does not exactly use listboxes as per your screenshots but it could very easily be changed to use them. With a few javascript modifications you could have unlimited levels.

Here is another one:

http://weblogs.asp.net/raduenuca/archive/2011/04/03/asp-net-mvc-cascading-dropdown-lists-tutorial-part-5-1-cascading-using-jquery-ajax-ajax-and-dom-objects.aspx

thanks @carlosmartinezt but telerik display examples using different tables, brgds — s_h, Apr 09 '13 at 05:44

Auto-populating Select Boxes using jQuery & AJAX in asp.net MVC

5 Answers5

Linked