How do you populate a dropdown list with a viewbad passed by jason . java scripting?

Question

How do you populate a dropdown list with a viewbag passed by jason . java scripting?

Answer 1

Ok for some reason I can't post source codes.

What I am trying todo is populate a dropdown list with a view bag that was sent back to the cshtml page
using the scripting of java scripts or json.

How I am trying to make it work.

User selects value from dropdown A

That selection helps generate the list for drowndown B

a cascading drop down effect.

THe infomation graphic is the code I made. it work except for populating the drop down list with the viewbag that is created in the mvc controller

Ok I fixed the Java but it still does not populate the dropdown :(

Answer 2

The ViewBag is used to pass data from an Action to a View. The ViewBag is not needed since the design does not return a View.

var results = writeTools.DDL_REQUEST_SYSTEM(SystemFilterCode);  
return Json(results, JsonRequestBehavior.AllowGet);  

The first post shows you are using the SelectList class to populate the DropDownListFor's options using the SYS_NAME_ID (value) and SYS_NAME_DESCRIPTION (test) properties. The JavaScript design is looking for data[i].value and data[i].name. If I assume the result set has not changed then the JavaScript logic should be looking for data[i].SYS_NAME_ID and data[i].SYS_NAME_DESCRIPTION.

Lastly, I'm not sure about this line of code.

writeTools.DDL_REQUEST_SYSTEM(SystemFilterCode);  

There's no indication where SystemFilterCode comes from.

Answer 3

Hi @App Dev ，
I suggest you remove the Vie wBag process of transferring data (used for the drop-down list) from the controller to the view.
When you write javasc ript in the first dropdownlist and update (select change), perform an ajax call to the se rver to get data from the database to update the second drop-down list with this data.
This is a demo of Cascading dropdownlist:

public ActionResult LoadCountries()  
        {  
            List<SelectListItem> li = new List<SelectListItem>();  
            li.Add(new SelectListItem { Text = "Select", Value = "0" });  
            li.Add(new SelectListItem { Text = "India", Value = "1" });  
            li.Add(new SelectListItem { Text = "Srilanka", Value = "2" });  
            li.Add(new SelectListItem { Text = "China", Value = "3" });  
            li.Add(new SelectListItem { Text = "Austrila", Value = "4" });  
            li.Add(new SelectListItem { Text = "USA", Value = "5" });  
            li.Add(new SelectListItem { Text = "UK", Value = "6" });  
            ViewData["country"] = li;  
            return View();  
        }  
        [HttpPost]  
        public JsonResult GetStates(string id)  
        {  
            List<SelectListItem> states = new List<SelectListItem>();  
            switch (id)  
            {  
                case "1":  
                    states.Add(new SelectListItem { Text = "Select", Value = "0" });  
                    states.Add(new SelectListItem { Text = "ANDAMAN & NIKOBAR ISLANDS", Value = "1" });  
                    states.Add(new SelectListItem { Text = "ANDHRA PRADESH", Value = "2" });  
                    states.Add(new SelectListItem { Text = "ARUNACHAL PRADESH", Value = "3" });  
                    states.Add(new SelectListItem { Text = "ASSAM", Value = "4" });  
                    states.Add(new SelectListItem { Text = "BIHAR", Value = "5" });  
                    states.Add(new SelectListItem { Text = "CHANDIGARH", Value = "6" });  
                    states.Add(new SelectListItem { Text = "CHHATTISGARH", Value = "7" });  
                    states.Add(new SelectListItem { Text = "DADRA & NAGAR HAVELI", Value = "8" });  
                    states.Add(new SelectListItem { Text = "DAMAN & DIU", Value = "9" });  
                    states.Add(new SelectListItem { Text = "GOA", Value = "10" });  
                    states.Add(new SelectListItem { Text = "GUJARAT", Value = "11" });  
                    states.Add(new SelectListItem { Text = "HARYANA", Value = "12" });  
                    break;  
                case "2":  
                    states.Add(new SelectListItem { Text = "HIMACHAL PRADESH", Value = "13" });  
                    states.Add(new SelectListItem { Text = "JAMMU & KASHMIR", Value = "14" });  
                    states.Add(new SelectListItem { Text = "JHARKHAND", Value = "15" });  
                    states.Add(new SelectListItem { Text = "KARNATAKA", Value = "16" });  
                    states.Add(new SelectListItem { Text = "KERALA", Value = "17" });  
                    states.Add(new SelectListItem { Text = "LAKSHADWEEP", Value = "18" });  
                    states.Add(new SelectListItem { Text = "MADHYA PRADESH", Value = "19" });  
                    break;  
                case "3":  
                    states.Add(new SelectListItem { Text = "MAHARASHTRA", Value = "20" });  
                    states.Add(new SelectListItem { Text = "MANIPUR", Value = "21" });  
                    states.Add(new SelectListItem { Text = "MEGHALAYA", Value = "22" });  
                    states.Add(new SelectListItem { Text = "MIZORAM", Value = "23" });  
                    states.Add(new SelectListItem { Text = "NAGALAND", Value = "24" });  
                    states.Add(new SelectListItem { Text = "NCT OF DELHI", Value = "25" });  
                    states.Add(new SelectListItem { Text = "ORISSA", Value = "26" });  
                   
                    states.Add(new SelectListItem { Text = "WEST BENGAL", Value = "35" });  
                    break;  
                case "UK":  
                    break;  
                case "India":  
                    break;  
            }  
            return Json(new SelectList(states, "Value", "Text"));  
        }  

Best regards,
Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.