局部视图无法正确呈现

Question

I have two drop-downs when we are selecting the first one we need to update the second one.
Below is my view:

@model HostingManager.Models.ContractManager
@{
    ViewBag.Title = "CustomCreate"; 
}
@Html.Partial("_GroupDDL" , Model)
@Html.Partial("SelectClient", Model)
@Html.Partial("SelectContract", Model)

Below is first Drop-down (Partial View: _GroupDDL )

@model HostingManager.Models.ContractManager

@using (Ajax.BeginForm("SelectClient", "Contracts", new AjaxOptions { UpdateTargetId = "IClients" }))
{ 
    @Html.DropDownListFor(
        m => m.SelectedGroupId,
        new SelectList(Model.IGroups, "id", "name"),
        string.Empty
    )
}
<script type="text/javascript">
    $('#SelectedGroupId').change(function () {
        $(this).parents('form').submit();
    });
</script> 

Below is Second Drop-down (Partial View: SelectClient )

@model HostingManager.Models.ContractManager

@if (Model.IClients != null && Model.IClients.Count() > 0)
{
    using (Ajax.BeginForm("SelectContracts", "Contracts", new AjaxOptions { UpdateTargetId = "IContracts" }))
    { 
        @Html.HiddenFor(m => m.SelectedGroupId)
        @Html.DropDownListFor(
            m => m.SelectedClientId,
            new SelectList(Model.IClients, "id", "cname"),
            string.Empty
        )
    }
}

<script type="text/javascript">
    $('#SelectedClientId').change(function () {
        $(this).parents('form').submit();
    });
</script>

Below is my Controller action:

public ActionResult CustomCreate()
{
    ContractManager CM = new ContractManager();
    CM.IGroups = db.groups.ToList();
    return View(CM);
}

[HttpPost]
public ActionResult SelectClient(int? SelectedGroupId)
{
    ContractManager CM = new ContractManager();
    CM.IClients = new List();
    if (SelectedGroupId.HasValue)
    {
        CM.IClients = db.client.ToList();
    }
    return PartialView("SelectClient", CM);
}

Now The problem:

In Debugging Mode when I'm selecting the first DDL. Control is coming to second DDL with the values but the Second DDL is not appearing on the View. ie We can't see the Second DDL on the UI.

I have already added ajax script in my Layout and also enabled in web.config . I'll filter the Second DDL the once if I can overcome this.

Answer 1

Besides of perfection the example, you can do something like this in _GroupDDL partial view with jQuery.post :

<script type="text/javascript">
    $('#SelectedGroupId').change(function () {
        $.post('@Url.Action("SelectClient", "Contracts")', {SelectedGroupId: $(this).val()}, function(data) {
           $('#SelectedClientId').html(data);
        });
    });
</script> 

It will call the SelectClient action of Controller each time you change the SelectedGroupId ddl, it will return the html of SelectedClientId with all options based on parent/master ddl selection.