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.

}

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!

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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/

Answer 5

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