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?

score 1 · Answer 1 · answered Apr 07 '14 at 10:14

1

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();
}

answered Apr 07 '14 at 10:14

Ashwini Verma

7,477
6
36
56

Thanks, but this case is for two dropdown lists,I have multiple dropdown lists with same id, What to do?@ – Sanjay Apr 07 '14 at 10:37
I have just shown you example. You should do same process as for second. It's mean, on the second dll select again call ajax and return filtured json string which would be for third dll. – Ashwini Verma Apr 07 '14 at 10:57
Ya. But problem is "Id" of ddl changes every row, how can i get that, i have class id, but not working.. – Sanjay Apr 07 '14 at 11:08
what's problem in that. Use common class name for all dll and find selected id on change event of that. Here is the example how you can do that. http://jsfiddle.net/369tU/ – Ashwini Verma Apr 07 '14 at 11:22
Thanks, it is getting, but how to filter and bind to dynamic ddls? – Sanjay Apr 07 '14 at 11:35
You have already data for dll (IEnumerable projectslist). After ajax call, in controller FilterSecondDDL(string selectedValue), filter projectslist based on selected value you get and return it as json result. Use this link for return json correctly for ddl. http://stackoverflow.com/questions/5497524/easiest-way-to-create-a-cascade-dropdown-in-asp-net-mvc-3-with-c-sharp – Ashwini Verma Apr 07 '14 at 11:42
Still not getting it, i am geting confused that how it works? I have edited my question which was i have tried with your clue, please check it and help me please. – Sanjay Apr 07 '14 at 12:38

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

1 Answers1