如何在foreach循环中为DropDownListFor设置选中值

我尝试为foreach循环里的下拉列表项设置选中值，试过直接指定selectedValue属性，也想过在下拉列表加载时调用函数，但始终找不到正确的属性或事件。

相关代码 #

@using GSET.Helpers
@model GSET_DAL.GSETDB.Model.KitConfiguration
@{
    ViewBag.Title = "KIT CONFIGURATION (LOCKED)";
    ViewBag.SubTitle = "<a class='btn btn-sm float-right btn-warning href='" + Url.Action("Index", "KitConfiguration") + "'><i class='fas fa-backspace fa-lg' title='Back To Quote' data-toggle='tooltip' data-custom-class='tooltip-warning' data-placement='left'></i> Back To Kit Configuration</a>";

    decimal TotalCost = 0.0M;
}
<div class="card">
    <div class="card-header bg-gset">
        <span class="card-title"><i class="fas fa-lock mr-2"></i> CONFIGURATION #@Html.DisplayFor(m => m.ConfigurationNumber)</span>
    </div>
    <div class="card-body">
        <div class="row mt-1">
            <div class="col-md-6">
                <fieldset>
                    <legend>Assigned Components</legend>
                    <div id="divAssignedComponents" style="overflow-y: auto">
                        @foreach (var kitComponentConfiguration in Model.KitComponentConfigurations.OrderBy(x => x.PartNumber))
                        {
                            var bgColor = kitComponentConfiguration.IsDisabled ? "bg-gray-dark" : "bg-dark";
                            <div class="card @bgColor rounded mb-2 drag-drop-item" data-is-assembly="@kitComponentConfiguration.IsAssembly" data-pk="@kitComponentConfiguration.PKID" data-part-number="@kitComponentConfiguration.PartNumber">
                                <div class="card-body p-3 border rounded">
                                    <div class="media">
                                        <div class="media-body">
                                            <div class="row">
                                                <div class="col-md-3">
                                                    @Html.DropDownListFor(m => kitComponentConfiguration.ServiceTabDisplay,
                                                        ViewBag.ServiceComponentDisplayLocations as IEnumerable<SelectListItem>,
                                                        new
                                                        {
                                                            @class = "form-control",
                                                            id = $"tab{kitComponentConfiguration.KitComponentConfigurationID}",
                                                            onchange = $"SaveServiceValues({kitComponentConfiguration.KitComponentConfigurationID});"
                                                            //selectedValue = kitComponentConfiguration.ServiceTabDisplay
                                                            //or
                                                            //onload =  $"SetTabSelectedValue({id, kitComponentConfiguration.ServiceTabDisplay});"
                                                        })
                                                </div>
                                                <div class="col-md-4"></div>
                                                <div class="col-md-3">
                                                    @Html.DropDownListFor(m => kitComponentConfiguration.ServiceDisplayType, 
                                                        ViewBag.ServiceComponentDisplayTypes as IEnumerable<SelectListItem>, 
                                                        new { 
                                                            @class = "form-control", 
                                                            id=$"type{kitComponentConfiguration.KitComponentConfigurationID}", 
                                                            onchange = $"SaveServiceValues({kitComponentConfiguration.KitComponentConfigurationID});"
                                                            //selectedValue = kitComponentConfiguration.ServiceDisplayType
                                                            //or
                                                            //onload =  $"SetTypeSelectedValue({id, kitComponentConfiguration.ServiceDisplayType});"
                                                        })
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        }
                    </div>
                </fieldset>
            </div>
        </div>
    </div>
</div>

<script src="~/Scripts/dlightful.js"></script>
<script type="text/javascript">
    function SaveServiceValues(kitComponentConfigurationID) {
        debugger;
        var tabDisplay = $("#tab" + kitComponentConfigurationID.toString()).val();
        var displayType = $("#type" + kitComponentConfigurationID.toString()).val();

        //alert("id=" + kitComponentConfigurationID + ", tab=" + tabDisplay + ", Type=" + displayType);

        var saveIt = "@Url.Action("SaveComponentServiceSettings", "KitConfiguration")"+ "?kitComponentConfigurationID=" + kitComponentConfigurationID+ "&tabDisplay=" + tabDisplay + "&displayType=" + displayType;
        var response = callAjaxSync(saveIt);
        if (response.message !== "") {
            alert(response.message);
        }
    }

    $(document).ready(function () {

    });
</script>

解决方案 #

方法1：让DropDownListFor自动绑定选中值（推荐） #

DropDownListFor本身会根据绑定的模型属性值自动匹配选中项，但当前foreach循环的写法无法让Razor正确跟踪模型属性。改用for循环（需确保KitComponentConfigurations是IList<T>类型），Razor会生成正确的表单字段名称，同时自动选中匹配的值：

@{
    // 先排序并转成List，方便for循环索引访问
    var sortedComponents = Model.KitComponentConfigurations.OrderBy(x => x.PartNumber).ToList();
}
@for (int i = 0; i < sortedComponents.Count; i++)
{
    var kitComponentConfiguration = sortedComponents[i];
    var bgColor = kitComponentConfiguration.IsDisabled ? "bg-gray-dark" : "bg-dark";
    <div class="card @bgColor rounded mb-2 drag-drop-item" data-is-assembly="@kitComponentConfiguration.IsAssembly" data-pk="@kitComponentConfiguration.PKID" data-part-number="@kitComponentConfiguration.PartNumber">
        <div class="card-body p-3 border rounded">
            <div class="media">
                <div class="media-body">
                    <div class="row">
                        <div class="col-md-3">
                            @Html.DropDownListFor(m => m.KitComponentConfigurations[i].ServiceTabDisplay,
                                ViewBag.ServiceComponentDisplayLocations as IEnumerable<SelectListItem>,
                                new
                                {
                                    @class = "form-control",
                                    id = $"tab{kitComponentConfiguration.KitComponentConfigurationID}",
                                    onchange = $"SaveServiceValues({kitComponentConfiguration.KitComponentConfigurationID});"
                                })
                        </div>
                        <div class="col-md-4"></div>
                        <div class="col-md-3">
                            @Html.DropDownListFor(m => m.KitComponentConfigurations[i].ServiceDisplayType, 
                                ViewBag.ServiceComponentDisplayTypes as IEnumerable<SelectListItem>, 
                                new { 
                                    @class = "form-control", 
                                    id=$"type{kitComponentConfiguration.KitComponentConfigurationID}", 
                                    onchange = $"SaveServiceValues({kitComponentConfiguration.KitComponentConfigurationID});"
                                })
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
}

方法2：用JavaScript在页面加载后设置选中值 #

如果不想修改循环方式，可在$(document).ready中遍历所有下拉列表，根据模型值设置选中状态：

$(document).ready(function () {
    @foreach (var kitComponentConfiguration in Model.KitComponentConfigurations.OrderBy(x => x.PartNumber))
    {
        <text>
            $("#tab@(kitComponentConfiguration.KitComponentConfigurationID)").val("@(kitComponentConfiguration.ServiceTabDisplay)");
            $("#type@(kitComponentConfiguration.KitComponentConfigurationID)").val("@(kitComponentConfiguration.ServiceDisplayType)");
        </text>
    }
});

内容的提问来源于stack exchange，提问作者BenG