How to Get back Selected Data from Cascading DropdownList to Controller

Question

I am not getting the data back (Retailer from 1ft DDL and SubRetailer from 2nd DDL) via while selected from cascading DropDownList to Controller by Submit the Form. It's always Null Value in controller.

-- Primary DDL List ParentRetailer

@Html.DropDownListFor(m => m.Retailer, new SelectList(Model.lstParentRetailsDetails, "ParentRetailerID", "ParentRetailerName"), "All Selected",
new { id = "ParentRetailerDDL", @class = "form-control" })

-- Secondary DDL List SUbRetailer

<div class="form-group">
    <label>SubRetailer</label>
    @Html.DropDownListFor(m => m.SubRetailer, Model.SubRetailerList, "All Selected", new { @class = "form-control", id = "SubParentRetailerDDL" })       
</div>

The Java Script as below

$().ready(function (msg) {
        $("#ParentRetailerDDL").bind("change", function () {
            GetNames($(this).val());
        });
});

function GetNames(ParentRetailerID) {
    if (ParentRetailerID > 0) {
         $("#SubParentRetailerDDL").get(0).options.length = 0;
        $.ajax({
            type: "POST",
            url: "Search/getSubRetailer",
            data: "{ParentRetailerID:" + ParentRetailerID + "}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                 $("#SubParentRetailerDDL").get(0).options.length = 0;            
                $.each(msg, function (index, item) {
                    $("#SubParentRetailerDDL").append("<option value='" + item.SubRetailerID + "'>" + item.SubRetailerName + "</option>");
                });
            },
            error: function () {
                $("#SubParentRetailerDDL").get(0).options.length = 0;
                alert("Failed to load SubRetailer");
            }
        });
    }
    else {
        $("#SubParentRetailerDDL").get(0).options.length = 0;
    }
}

And Search Controller

//[HttpPost]
public ActionResult Search(SearchViewModel searchViewModel)
{ 
    string ParentRetailer = searchViewModel.Retailer;
    String getSubRetailer = searchViewModel.SubRetailer;
}

MODEL---

public class SearchViewModel
{
    public string Retailer { get; set; }
    public List<DashboardGetRetailers_Result> lstParentRetailsDetails { get; set; } 

    public string SubRetailer { get; set; }
    public SelectList SubRetailerList { get; set; }
}

Controller Get the Data from Database ---

// GET: Search
public ActionResult Index()
{
    var searchViewModel = new SearchViewModel();
    searchViewModel.lstParentRetailsDetails = db.DashboardGetRetailers().ToList(); 
    return View(searchViewModel);
}


public ActionResult getSubRetailer(int ParentRetailerID)
{
    var data = db.DashboardGetSubRetailer(ParentRetailerID).ToList();
    return Json(data, JsonRequestBehavior.AllowGet);
}

-- View Submit Button..

<div class="form-group">
    <button class="btn btn-default pull-right" type="submit">
        <i class="fa fa-search"> Search</i>
    </button>
</div>

I need to get the both the selected data from List to Controller. It's always null.

Answer 1

Thanks for the Stephen Muecke. Now I am successfully received the data from both the cascading dropdownlost to controller. The final Java script and view code as below

Changes in View

 <div class="form-group">
<label>Retailer</label>      
 @Html.DropDownListFor(m => m.Retailer, new SelectList(Model.lstParentRetailsDetails, "ParentRetailerID", "ParentRetailerName"), "All Selected", new { id = "ParentRetailerDDL", @class = "form-control" })                            
</div>


<div class="form-group">
<label>SubRetailer</label>
 @Html.DropDownListFor(m => m.SubRetailer, new SelectList(Enumerable.Empty<SelectListItem>(), "SubRetailerID", "SubRetailerName"), "All Selected", new { @class = "form-control", id = "SubParentRetailerDDL" })
</div>

-- Inside Java Scripts

$().ready(function (msg) {
    $("#ParentRetailerDDL").bind("change", function () {
        GetNames($(this).val());
    });
});

function GetNames(ParentRetailerID) {
    if (ParentRetailerID > 0) {
        $("#SubParentRetailerDDL").empty();
        $.ajax({
            type: "POST",
            url: "Search/getSubRetailer",
            data: "{ParentRetailerID:" + ParentRetailerID + "}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                $.each(msg, function (index, item) {
                    $("#SubParentRetailerDDL").append("<option value='" + item.SubRetailerID + "'>" + item.SubRetailerName + "</option>");
                });
            },
            error: function () {
                $("#SubParentRetailerDDL").get(0).options.length = 0;
                alert("Failed to load SubRetailer");
            }
        });
    }
    else {
        $("#SubParentRetailerDDL").get(0).options.length = 0;
    }
}

Regards