I am looking to create a cascading dropdown list in C# MVC that pulls data from various SQL tables. How can I achieve

I am currently working on a C# MVC web application and facing a challenge in implementing a cascading drop-down list. While I have come across various articles discussing this topic, the uniqueness of my requirements makes it difficult for me to figure out how to proceed.

The data that needs to populate the dropdown lists is stored in multiple SQL tables. The first dropdown should display information from one table (which lists available tables). Upon selecting an option, a second dropdown should be generated with data from the chosen table.

How can I create a cascading dropdown list that can pull data from different tables dynamically?

I suspect AJAX/javascript will play a key role here, but I don't have much experience with them.

To provide some context on my data structure, the application serves as a tool for administrators to maintain relevant information. There are several tables like Employees, CompaniesWorkedWith, ProjectsBeingDeveloped, BudgetItems, etc., each listed in a lookup table. The first dropdown will be populated with entries from this lookup table. When a user selects a category (e.g., Employee), the second dropdown should fetch data from the corresponding table for display. Subsequently, the user can select an item (e.g., individual employee) to view detailed information - which should be straightforward. My primary concern is enabling the dropdowns to cascade through multiple tables seamlessly, allowing easy addition of new tables to the system without any disruption.

Answer №1

One effective way to update the data sources for cascaded controls is by implementing callbacks. Utilize update panels to avoid full page post-backs. If you are using frameworks like DevExpress, Telerik, or ASP.NET, there are various options and sample source codes available for reference.

Click here for more information

UPDATE: For a second data-source that relies on a more dynamic source, consider creating your own data-source by implementing IEnumerable. There may be a helpful sample code out there that you can refer to.

UPDATE 2: After reviewing similar code (albeit not identical), here's a simplified approach:

  1. Create a generic container to hold values for subsequent dropdown lists, such as a List<string> or List<MyGenericClass> with relevant properties representing column values.

  2. Utilize SqlConnection and SqlCommand to fetch results and populate the list (or a custom class implementing IEnumerable).

  3. Set the IEnumerable object as the data source for your dropdown list.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to replicate the functionality of "npm run x" without including a "scripts" entry?

If you want to run a node command within the "context" of your installed node_modules, one way to do it is by adding an entry in the scripts field of your package.json. For example: ... "scripts": { "test": "mocha --recursive test/**/*.js --compiler ...

Text validation in ASP.NET not triggering for custom textbox control

I'm having trouble getting my custom validator to fire properly for a textbox validation. The required field validator is working fine, but the custom one isn't triggering as expected. <asp:TextBox ID="txtPRI" runat="server" Width="295" /> ...

Transitioning the height of a Vue component when switching routes

I've been struggling to implement a transition slide effect on my hero section. The height of the hero is set to 100vh on the homepage and half of that on other pages. Despite trying various methods, I haven't been able to get it working properly ...

Troubleshooting: No data being retrieved from MySQL database using Jquery AJAX and PHP (PHP script not functioning

I've been facing a problem with my AJAX request. I double-checked all my PHP code in a separate file and everything appears to be functioning properly. The JSON encoding of the array I created also looks good, with all the correct field names and valu ...

What can be done to prevent Leaflet from processing markers that fall outside of its bounding box?

I recently set up a Leaflet map with GeoDjango and rest_framework_gis, but I am facing issues with limited results and pagination. The map seems to process every marker it receives cumulatively, leading to lagging and browser crashes. I was advised in a co ...

Add a sub-modal window inside a separate container

Is there a way to attach this modal to an external div? The current setup involves nesting it within a container that has a fixed height. I'm looking to move it outside of that container. Here is the JavaScript code for the modal: client.fetchQuery ...

Tips for avoiding a button reverting to its original state upon page refresh

I have a button with the ID #first that, when clicked, is replaced by another button with the ID #second. However, if I refresh the page after clicking on the second button, it goes back to displaying the first button. Is there a way to make sure that th ...

Using Javascript to Manuever an Element via Arrow Inputs

Currently, I am in the process of developing a Tetris game with a rotating Tetris piece controlled by pressing the space bar. My next objective is to enable the movement of objects to the left and right using the arrow keys. After exploring various simila ...

Is there a way for me to discover the identity of the victor?

There are 4 divs that move at different, random speeds each time. I am trying to determine which one is the fastest or reaches the goal first. Additionally, there is a betting box where you can choose a horse to bet on. I need to compare the winner with my ...

Displaying minute scale from right to left using jQuery technology

I successfully created a minute scale that is functioning well, but now I am encountering an issue with displaying my scale. Instead of being oriented left to right, I would like it to be displayed from right to left. Can anyone suggest what might be wron ...

I'm interested in using JavaScript to create a URL for the current page with two additional parameters

Currently, I am utilizing the sharethis plugin within a smarty template. When sharing on Twitter, the link appears as follows: <span class='st_twitter_large' st_via="mediajobscom" st_url="MY URL HERE" displayText='Tweet'> My goa ...

Making rapid formatting changes by rearranging the positioning of words in Javascript

Struggling to untangle my complex code, I'm unable to make the necessary adjustments. Here's what I have: var stocks= [ ["Beef (80/20) raw","oz",115.4451262,3.293742347,72,"4.85 gallons","5.65 pounds","0 - ",2.142,19,20,"0.0001275510204"," ...

Access a webpage whose URL has been dynamically assigned using JavaScript

I have a website that consists of a single page and features four tabs. Whenever a tab is clicked, it displays the corresponding content in a div while hiding the other three divs along with their respective content. To ensure a smooth user experience, I u ...

Guide: Extracting a targeted input field value from an external webpage with Javascript

After successfully retrieving the webpage content from an external website using ajax, my next goal is to develop a function that can extract a specific input field value which is already pre-filled. The structure of the webpage content looks something li ...

Error: The object #<HTMLCollection> does not support the 'tags' method

While trying to troubleshoot this issue, it seems like I haven't been able to pinpoint the simple solution. This particular javascript menu works perfectly in IE, however in Chrome, there is an error when trying to open the menu with a first-level cli ...

The Controller is failing to pass JSON Data to the AJAX Call

When trying to access JSON data in the Controller, it is not being retrieved in the Success function and instead showing an error message "Failed to load resource: the server responded with a status of 406 (Not Acceptable)" or executing the Error function. ...

Vuetify's v-text-field not properly aligning text to the center

The alignment of the text in v-text-field is causing issues for me, as I am unable to center it. Despite attempting various solutions, I have not been successful. 1. <v-text-field type="number" class="mr-2 text-center"></v-te ...

How can I add a new entry to the MySQL echo database table?

After setting up an echo mysql table for my contacts, I found that I needed a button to add a new contact. I experimented with various solutions and here is what I came up with (all code is within the same file): PHP: //create record if (isset($_POST[&ap ...

Enhancing UI Design with Styled-Components and Material Components using Media Queries

Struggling to grasp media queries with MUI and styled components. Take a look at the following syntax using styled-components: Syntax 1: const Video = styled.video` width: 860px; @media ${device.mobileSM} { width: 90%; } `; Additionally, there ...

I wish to adjust the font size as well as resize the table elements simultaneously

Adjusting the height and width of the table should automatically adjust the font size as well. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Resizable - Default functiona ...