cascading dropdown not working

Question

i am trying to use cascading dropdown list in mvc. some how it is working but having some problem. actually when first view is rendered i have a dropdown Account Type on the basis of this dropdown i have to populate the group dropdown. but when the first dropdown is rendered it has to option realtor and sponsor by default realtor is the first option selected and then all the group who are associated with it sholud be rendered. but can not able to get the value at the very first time. what is the issue can anyone suggest me .

here is my code

public class ViewModel
{
 [Required]
        public SelectList AccountType { get; set; }
        public string SelectedAccountType { get; set; }
        public IEnumerable<SelectListItem> Group { get; set; }
        public string SelectedGroup { get; set; }
}


[HttpGet]
        public ActionResult Index(ViewModel viewModel)
        {  



            List<SelectListItem> groups = sDbContext.Groups
                    .Where(o => o.GroupId > 1 && o.Deleted == false && o.AccountSubId == 1).OrderBy(uu => uu.GroupName)
                    .Select(o => new SelectListItem()
                    {
                        Value = o.GroupId.ToString(),
                        Text = o.GroupName
                    }).ToList();
            groups.Insert(0, new SelectListItem() { Value = "0", Text = "All" });
            viewModel.Group = groups;
            viewModel.AccountType = new SelectList(sDbContext.AccountTypes.Where(o => o.AccountTypeId != 0), "AccountTypeId", "AccountName");                          
            reportService.GetReportsListGrid();
            return View(viewModel);           
    }

view :

@model App1.ViewModels.ViewModel
@{
    List<SelectListItem> list = new List<SelectListItem>();   
}
@using (Html.BeginForm("Index", "routee", FormMethod.Post, new { @id = "appForm" }))
{
 Account Type
                                @Html.DropDownListFor(m => m.SelectedAccountType, (IEnumerable<SelectListItem>)Model.AccountType, new { @class = "form-control" })
 @Html.DropDownListFor(model => model.SelectedGroup, list, new { @class = "form-control" })
                                @Html.ValidationMessageFor(model => model.SelectedGroup)

}

and here is my script..

<script type="text/javascript">
 $('#SelectedAccountType').change(function () {
        OnAccountTypeChange();
    });

    function OnAccountTypeChange() {
        var id = $("#SelectedAccountType :selected").val();
        var groupId = $('#SelectedGroup').val();
        if (id != "") {
            alert(id);
            $.ajax({
                type: "GET",
                contentType: "application/json; charset=utf-8",
                url: '@Url.Action("GetGroupsByAccountSubTypeId", "Common", new { area = "" })',
                data: { "AccountSubId": id },
                dataType: "json",
                beforeSend: function () {
                    //alert(id);
                },
                success: function (data) {
                    var items = "<option value='0' selected='selected'>-All-</option>";
                    $.each(data, function (i, groups) {
                        items += "<option value='" + groups.Value + "'>" + groups.Text + "</option>";
                    });
                    $('#SelectedGroup').html(items);
                    if (groupId != undefined || groupId != null || groupId != "")
                        $('#SelectedGroup').val(groupId);
                },
                error: function (result) {
                    console.log('Service call failed: ' + result.status + ' Type :' + result.statusText);
                },
                complete: function () {
                    $('#SelectedGroup').prop('disabled', false);
                }
            });
        }
        else {
            $('#SelectedGroup').html(items);
        }
    }
</script>

Answer 1

just a simple mistake. why are you using list here

@Html.DropDownListFor(model => model.SelectedGroup, list, new { @class = "form-control" })

your code should be like :

@Html.DropDownListFor(model => model.SelectedGroup, (IEnumerable<SelectListItem>)Model.Group, new { @class = "form-control" })