ASP.NET MVC多DropDownListFor加载过慢，如何延迟绑定或共享选项？

这个场景我太熟了！当合同列表每行都重复渲染相同选项的下拉框时，大量重复的DOM节点肯定会拖慢页面加载，甚至让浏览器卡顿。核心解决思路就是只生成一次选项集合，让所有下拉框复用这份内容，下面给你几种实用的实现方式，都是项目里验证过的：

1. 预渲染模板+JS克隆（首推方案） #

这种方式是把选项只渲染一次作为模板，然后用JavaScript把模板里的选项克隆到所有需要的下拉框中，能直接砍掉90%以上的重复DOM节点，性能提升非常明显。

具体步骤： #

首先在视图里渲染隐藏的模板下拉框（只用来提供选项，不显示给用户）：

<!-- Contract选项模板 -->
<select id="contractTemplate" style="display: none;">
    @foreach (var item in ViewBag.ContractOptions)
    {
        <option value="@item.Value">@item.Text</option>
    }
</select>

<!-- Payee选项模板 -->
<select id="payeeTemplate" style="display: none;">
    @foreach (var item in ViewBag.PayeeOptions)
    {
        <option value="@item.Value">@item.Text</option>
    }
</select>

<!-- Currency选项模板 -->
<select id="currencyTemplate" style="display: none;">
    @foreach (var item in ViewBag.CurrencyOptions)
    {
        <option value="@item.Value">@item.Text</option>
    }
</select>

然后在合同列表里，只需要渲染空的下拉框，并通过data属性保存当前行的选中值：

@foreach (var contract in Model.Contracts)
{
    <tr>
        <td>
            <select class="contract-dropdown" data-selected-value="@contract.ContractId"></select>
        </td>
        <td>
            <select class="payee-dropdown" data-selected-value="@contract.PayeeId"></select>
        </td>
        <td>
            <select class="currency-dropdown" data-selected-value="@contract.CurrencyId"></select>
        </td>
    </tr>
}

最后在页面加载完成后，用JS把模板选项克隆到对应的下拉框，并设置选中值：

$(document).ready(function() {
    // 先获取模板里的选项节点
    const contractOpts = $('#contractTemplate').children();
    const payeeOpts = $('#payeeTemplate').children();
    const currencyOpts = $('#currencyTemplate').children();

    // 处理Contract下拉框
    $('.contract-dropdown').each(function() {
        $(this).empty().append(contractOpts.clone());
        // 设置当前行的选中值
        const selectedVal = $(this).data('selected-value');
        if (selectedVal) {
            $(this).val(selectedVal);
        }
    });

    // 处理Payee下拉框
    $('.payee-dropdown').each(function() {
        $(this).empty().append(payeeOpts.clone());
        const selectedVal = $(this).data('selected-value');
        if (selectedVal) {
            $(this).val(selectedVal);
        }
    });

    // 处理Currency下拉框
    $('.currency-dropdown').each(function() {
        $(this).empty().append(currencyOpts.clone());
        const selectedVal = $(this).data('selected-value');
        if (selectedVal) {
            $(this).val(selectedVal);
        }
    });
});

这个方案我在多个项目里用过，不管列表有多少行，DOM里只保留3份选项，加载速度和浏览器流畅度提升特别明显。

2. 用HTML5原生<datalist>复用选项 #

如果不需要复杂的下拉样式（或者可以通过CSS自定义），<datalist>是原生的复用方案，浏览器会自动把下拉框和选项列表关联起来，不需要写太多JS。

实现方式： #

先在页面顶部定义三个<datalist>，把选项放进去：

<datalist id="contractOptions">
    @foreach (var item in ViewBag.ContractOptions)
    {
        <option value="@item.Value" label="@item.Text"></option>
    }
</datalist>

<datalist id="payeeOptions">
    @foreach (var item in ViewBag.PayeeOptions)
    {
        <option value="@item.Value" label="@item.Text"></option>
    }
</datalist>

<datalist id="currencyOptions">
    @foreach (var item in ViewBag.CurrencyOptions)
    {
        <option value="@item.Value" label="@item.Text"></option>
    }
</datalist>

然后在合同行的下拉框里通过list属性关联对应的datalist：

@foreach (var contract in Model.Contracts)
{
    <tr>
        <td>
            <select class="contract-dropdown" list="contractOptions">
                <option value="@contract.ContractId" selected>@contract.ContractName</option>
            </select>
        </td>
        <td>
            <select class="payee-dropdown" list="payeeOptions">
                <option value="@contract.PayeeId" selected>@contract.PayeeName</option>
            </select>
        </td>
        <td>
            <select class="currency-dropdown" list="currencyOptions">
                <option value="@contract.CurrencyId" selected>@contract.CurrencyName</option>
            </select>
        </td>
    </tr>
}

注意：部分旧浏览器对<select>和<datalist>的关联支持不太完美，如果需要兼容IE这类旧浏览器，还是优先用第一种方案。

3. 服务器端预生成选项HTML字符串 #

如果不想依赖JS，也可以在服务器端把选项集合转换成完整的HTML字符串，然后在每个下拉框里直接输出这个字符串，避免多次遍历相同的选项集合，减少服务器端的计算开销。

实现方式： #

在控制器里把选项转换成HTML字符串：

public ActionResult ContractList()
{
    // 获取选项集合
    var contractOptions = GetAllContracts();
    var payeeOptions = GetAllPayees();
    var currencyOptions = GetAllCurrencies();

    // 转换为HTML字符串
    ViewBag.ContractOptsHtml = string.Join("", 
        contractOptions.Select(item => $"<option value=\"{item.Id}\">{item.Name}</option>"));
    ViewBag.PayeeOptsHtml = string.Join("", 
        payeeOptions.Select(item => $"<option value=\"{item.Id}\">{item.Name}</option>"));
    ViewBag.CurrencyOptsHtml = string.Join("", 
        currencyOptions.Select(item => $"<option value=\"{item.Id}\">{item.Code}</option>"));

    // 传递合同列表数据
    var model = GetContractList();
    return View(model);
}

然后在视图里直接输出预生成的HTML字符串，并设置选中值：

@foreach (var contract in Model.Contracts)
{
    <tr>
        <td>
            <select class="contract-dropdown">
                @Html.Raw(ViewBag.ContractOptsHtml)
                <script>
                    // 给当前下拉框设置选中值
                    document.querySelector('.contract-dropdown:last-child').value = "@contract.ContractId";
                </script>
            </select>
        </td>
        <td>
            <select class="payee-dropdown">
                @Html.Raw(ViewBag.PayeeOptsHtml)
                <script>
                    document.querySelector('.payee-dropdown:last-child').value = "@contract.PayeeId";
                </script>
            </select>
        </td>
        <td>
            <select class="currency-dropdown">
                @Html.Raw(ViewBag.CurrencyOptsHtml)
                <script>
                    document.querySelector('.currency-dropdown:last-child').value = "@contract.CurrencyId";
                </script>
            </select>
        </td>
    </tr>
}

这个方案能减少服务器端的循环次数，但页面里还是会重复输出相同的HTML字符串，DOM节点数量和原来一样，只是服务器端压力小一点，所以优先级不如第一种方案。

额外优化小技巧 #

• 给所有同类型的下拉框加统一的class，避免用复杂的DOM选择器，提升JS执行效率。
• 如果选项数量特别多（比如上千条），可以用Select2、Chosen这类带虚拟滚动的下拉组件，进一步优化渲染和交互性能。
• 页面加载时可以先显示加载遮罩，等JS克隆完成后再显示下拉框，提升用户体验。

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