on select change事件 - Html.DropDownListFor

Question

我有两个下拉列表.第一个选定的值加载另一个.当我在控制器中有辅助方法时,我该怎么做？

@using (Html.BeginForm())
{
<div>
    <table width="100%" cellpadding="0" cellspacing="0">
        <tr>
            <td><b>Select a District:</b></td>
            <td>@Html.DropDownListFor(m => m.DistrictId, ViewData["DMManagers"] as IEnumerable<SelectListItem>, "Select One")</td>
        </tr>
        <tr>
            <td><b>Select a TM:</b></td>
            <td>@Html.DropDownListFor(m => m.TMId, ViewData["TMManagers"] as IEnumerable<SelectListItem>, "Select One")</td>
        </tr>
    </table>
</div>
}

private void LoadDistrictManagers()
{
    var _DMS = (from c in SessionHandler.CurrentContext.ChannelGroups
                join cgt in SessionHandler.CurrentContext.ChannelGroupTypes on c.ChannelGroupTypeId equals cgt.ChannelGroupTypeId
                where cgt.Name == "District Manager"
                select new { c.ChannelGroupId, c.Name }).OrderBy(m => m.Name);
    ViewData["DMManagers"] = new SelectList(_DMS, "ChannelGroupId", "Name");
}

private void LoadTerritoryManagers(int districtId)
{
    var _TMS = (from c in SessionHandler.CurrentContext.ChannelGroups
                join cgt in SessionHandler.CurrentContext.ChannelGroupTypes on c.ChannelGroupTypeId equals cgt.ChannelGroupTypeId
                where cgt.Name == "Territory" && c.ParentChannelGroupId == districtId
                select new { c.ChannelGroupId, c.Name }).OrderBy(m => m.Name);
    ViewData["TMManagers"] = new SelectList(_TMS, "ChannelGroupId", "Name");
}

public ActionResult SummaryReport()
{
    DistrictManagerModel model = new DistrictManagerModel();
    LoadDistrictManagers();
    return View("AreaManager", model);
}

Answer 1

使用HTTPAttributes字段为两个下拉列表提供唯一ID:

@Html.DropDownListFor(m => m.DistrictId, ViewData["DMManagers"] as IEnumerable<SelectListItem>, "Select One", new {@id="ddlDMManagers"})

第二个下拉列表应初始化为空列表:

@Html.DropDownListFor(m => m.TMId, Enumerable.Empty<SelectListItem>(), new {@id="ddlTMManagers"})

如果您不介意在第一个下拉列表中触发'更改'事件时使用jQuery ajax更新第二个下拉列表:

$(function() {
    $('select#ddlDMManagers').change(function() {
        var districtId = $(this).val();


        $.ajax({
            url: 'LoadTerritoryManagers',
            type: 'POST',
            data: JSON.stringify({ districtId: districtId }),
            dataType: 'json',
            contentType: 'application/json',
            success: function (data) {
                $.each(data, function (key, TMManagers) {
                    $('select#ddlTMManagers').append('<option value="0">Select One</option>');
                    // loop through the TM Managers and fill the dropdown
                    $.each(TMManagers, function(index, manager) {
                        $('select#ddlTMManagers').append(
                            '<option value="' + manager.Id + '">'
                            + manager.Name + 
                            '</option>');
                    });
                });
            }
        });
    });
});

将此类添加到控制器命名空间:

public class TMManager
{
    public int Id {get; set;}
    public string Name {get; set;}
}

您需要更新控制器操作LoadTerritoryManagers(),以响应ajax请求并返回{Id,Name}对象的JSON数组.

    [HttpPost]
    public ActionResult LoadTerritoryManagers(int districtId)
    {
        var _TMS = (from c in SessionHandler.CurrentContext.ChannelGroups
                join cgt in SessionHandler.CurrentContext.ChannelGroupTypes on c.ChannelGroupTypeId equals cgt.ChannelGroupTypeId
                where cgt.Name == "Territory" && c.ParentChannelGroupId == districtId
                select new TMManager(){ Id = c.ChannelGroupId, Name = c.Name }).OrderBy(m => m.Name);

        if (_TMS == null)
            return Json(null);

        List<TMManager> managers = (List<TMManager>)_TMS.ToList();
        return Json(managers);
    }