Question

当我们选择第一个需要更新第二个时，需要两个下拉菜单以下是我的观点：

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

以下是第一个下拉列表（部分视图：_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>

下面是第二次下拉（部分视图：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>

以下是我的控制器操作：

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

现在问题：

在我选择第一个DDL时的调试模式。控制是使用值进入第二个DDL，但第二个DDL没有出现在视图上。即我们无法在UI上看到第二个DDL。

我已在布局中添加了ajax脚本，并在web.config中启用了该脚本。如果我能克服这个问题，我会过滤掉第二次DDL。

Answer 1

除了完美的例子之外，您可以使用jQuery.post在_GroupDDL局部视图中执行类似的操作：

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

每次更改SelectedGroupId ddl时，它都会调用Controller的SelectClient操作，它将返回SelectedClientId的html以及基于父/主ddl选择的所有选项。

部分视图无法正确呈现

1 个答案: