Please see my other AJAX articles.

Using AJAX to update a table from a dropdown

In this article I’ll demonstrate using AJAX to update an HTML table based on a dropdown selection.

First I’ll define the ViewModel to contain data for this exercise.

Next, I’ll define the dropdown to be populated.

Now, I’ll populate the dropdown.

To attached AJAX, I’ll add a reference to my JavaScript file.

Once the page loads, I set the selected index of the dropdown.
Then, I attach a function to it to fire when the user changes their selection.
If they select the first (default) choice, the first (header) row is removed and the controls are cleared of their values.

If the user selects a valid choices, PopulateTable() is called passing the selected value, returning the select text, selectedID, and the return value, which is then assigned to the controls.