Click here to Skip to main content
14,971,553 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi
When I click on the first dropdown it finds the children for that category, but the values is showing in plain text and not in my partial views dropdown. What am I doing wrong??

I want to make cascading dropdowns with the partial view, so when I click on the dropdown list it will automatic fill the dropdown list with the children of that category. But I am a little bit stuck on this one.

I am really new on this one.

This is my code that I have been trying.
My Controller :
C#
[HttpGet]
        public JsonResult CategoryList(int catId)
        {
            var subcategories = (from s in db.Categories where s.ParentCategoryId == catId select new SelectListItem {
                Text = s.Name, Value = s.ParentCategoryId.ToString()
            });
    
                return Json(subcategories, JsonRequestBehavior.AllowGet);   
        }


My partial view :
C#
@model ASPNetMarketplace.Models.Listing

        @Html.DropDownList("dynamicContent", new SelectList(string.Empty, "Value", "Text"), "Please select a Subcategory", new { @class = "form-control" })


My Indexview :
C#
@Html.DropDownList("CategoryId", ViewBag.CategoryId as SelectList, "Select a Category", new { id = "CategoryId", @class = "form-control" })<br />

                    <div id="dynamicContent">
                    @{
                        Html.RenderPartial("DropDownList", Model);
                    }
                </div>


The script on the indexview :

JavaScript
<script>
    //Run Jquery script
    jQuery(document).ready(function ($) {
       //Dropdownlist Selectedchange event
        $("#CategoryId").change(function () {
            //Take the Id from the dropdown list when selected an item
            var id = $(this).val()           
            //Send the information to the controller
            $.ajax({
                type: 'GET',
                url: '@Url.Action("CategoryList", "Manage")', // we are calling json method
                data: { catId: id },               
                //here we are get value of selected item and passing same value
                // to input to the json method CategoryList.
                success: function (data) {

                    $.each(data, function (id, data) {                    (($('#dynamicContent').html($('<option></option>').val(data.Value).html(data.Text));
                    });                  
                }
            });
        });
    });  
</script>
Posted

1 solution

Your code is sort of messed up here.
As you've bound the model with the partial view, load dropdown list items from that model.

Please read this, how you can user the partial views with the cascading dropdowns,
Simple Implementation of MVC Cascading Ajax Drop Down[^]
Cascading DropDownLists and PartialViews[^]

-KR
   
Comments
tina_overgaard 6-Nov-15 2:10am
   
I Will look into these links. But in these links they have a fixed number of dropdowns, I do not know how many dropdowns I need maybee 5 or maybee more. Is that possible to make?
Krunal Rohit 9-Nov-15 23:37pm
   
Yes you can.

-KR

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900