How to work with Nested Dropdown list in Asp.net MVC

Question

I Have a Dynamic Dropdown list populated with Data from Database like

for(int i=0;i<count;i++)
{
    @Html.DropDownListFor(m => m.GetTimeSheetDetails[i].PROJ_ID,
                               (SelectList)ViewBag.ProjectList,
                               "-- Choose a Project --", 
                               new { @class = "ddlProjectvalue" })
}

I have populated data by writing method like

public SelectList getProjects()
{
    IEnumerable<SelectListItem> projectslist = (from proj in res.PROJECTs 
                                                where proj.IS_DELETED == "N" 
                                                select proj
                                               ).AsEnumerable()
                                                .Select(projt => new SelectListItem() 
                                                { 
                                                    Text = projt.NAME, 
                                                    Value = projt.ID.ToString() 
                                                });

    return new SelectList(projectslist, "Value", "Text", PROJ_ID);
}

and I have called in contoller and stored in ViewBag.Projects like

ViewBag.ProjectList = timesheetModel.getProjects();
// Ex: Contain list like item1,item2,item3

Now I want in Dynamic Dropdown list like if we select a item from First Dropdowlist should not show in Second Dropdown list(Ex. if we selected item1, should not show item1 in second Dropdown list), and next in third dropdown list should not show in both. How can I do that in Asp.net MVC? Please help me, i am not getting any ideas.

///Edited

I Have Tried with Script like

    <script>
    $(document).ready(function () {
        $('.ddlProjectvalue').change(function () {

            var selectedValue = $(this).val();
            if (selectedValue != null && selectedValue != '') {
                debugger;
               @* location.href = '@Url.Action("GetDDLData", "Employer")?selectedValue=' + selectedValue;*@
                $.getJSON('@Url.Action("/Employer/GetDDLData")', { selectedValue: selectedValue }, function (jsondata) {
                    var dllSecond = $('.ddlProjectvalue');
                    dllSecond.empty();
                    alert(selectedValue);
                    $.each(jsondata, function (index, data) {

                        dllSecond.append($('<option/>', {
                            value: data.value,
                            text: data.text
                        }));
                    });
                });
            }

        });
    });
  </script>

and I Have added Json Result in Employer Controller

    public ActionResult GetDDLData(string selectedValue)
    {
        int projectid = Convert.ToInt32(selectedValue);

        IEnumerable<SelectListItem> projectslist = (from proj in db.PROJECTs where proj.IS_DELETED == "N" && proj.ID != projectid select proj).AsEnumerable().Select(projt => new SelectListItem() { Text = projt.NAME, Value = projt.ID.ToString() });
        var result= new SelectList(projectslist, "Value", "Text", tm.PROJ_ID);
        return Json(result,JsonRequestBehavior.AllowGet);
    }

Still Not Getting it, where do am Wrong?

Answer 1

simple solution for this problen is using key "alt+255" for ineer items

item
   item-1
     item-2-1
     item-2-2
item1
item2

and also for Backend and model code using for

 Display(Name = "Head")]
        farhangiAsli = 0,
        
        [Display(Name = "  a")]
        farhangi1 = 1,
        [Display(Name = "  b")]
        farhangi2 = 2,
        [Display(Name = "  c")]
        garhangi3 = 3,
        [Display(Name = "    c-1")]
        farhangi4 = 4,
        [Display(Name = "    c-2")]
        farhangi5 = 5,

Answer 2

What you are looking is cascading dropdownlist.

What you can do is on the first dropdownlist select call ajax and use your logic to filter selection of second dropdownlist.

View

@Html.DropDownListFor(m => m.GetTimeSheetDetails[i].PROJ_ID,
                               (SelectList)ViewBag.ProjectList,
                               "-- Choose a Project --", 
                               new { @id = "ddlProjectvalue" })

Filter below dropdown based on first selection.

@Html.DropDownListFor(m => m.GetTimeSheetDetails[i].PROJ_ID,
                               (SelectList)ViewBag.ProjectList,
                               "-- Choose a Project --", 
                               new { @id = "ddlSecond" })


<script type="text/javascript">
    $('#ddlProjectvalue').change(function () {
        var selectedValue = $(this).val();
        if (selectedValue != null && selectedValue != '') {
            $.getJSON('@Url.Action("/YourController/FilterSecondDDL")', { selectedValue: selectedValue }, function (jsondata) {
                var dllSecond = $('#ddlSecond');
                dllSecond.empty();
                $.each(jsondata, function (index, data) {
                    dllSecond.append($('<option/>', {
                        value: data.value,
                        text: data.text
                    }));
                });
            });
        }
    });
</script>

Controller

public ActionResult FilterSecondDDL(string selectedValue)
{
    //filter and return json.    
    return Json();
}