ASP.NET MVC单表存主副账户，如何实现下拉列表分组绑定？

一、后台数据处理 #

首先从单表中查询并组织主账户与子账户的层级关系，同时标记账户类型、处理排序：

1. 自定义ViewModel（可选但更清晰）

public class AccountSelectItem
{
    public int ID { get; set; }
    public string DisplayName { get; set; }
    public bool IsMainAccount { get; set; }
}

2. Controller中处理数据

public ActionResult YourAction()
{
    // 从DbContext获取所有账户
    var allAccounts = db.Accounts.ToList();
    
    // 获取所有主账户ID（用于标记）
    var mainAccountIds = allAccounts.Where(a => !a.MainAccountID.HasValue).Select(a => a.ID).ToList();
    
    // 组织下拉选项：主账户在前，对应子账户按名称排序跟随
    var accountOptions = allAccounts
        .OrderBy(a => a.MainAccountID ?? a.ID) // 主账户按自身ID排序，子账户按主账户ID分组
        .ThenBy(a => a.AccountName)
        .Select(a => new AccountSelectItem
        {
            ID = a.ID,
            // 子账户添加缩进，同时对名称做HTML编码防止XSS
            DisplayName = !a.MainAccountID.HasValue 
                ? HttpUtility.HtmlEncode(a.AccountName) 
                : $"  {HttpUtility.HtmlEncode(a.AccountName)}",
            IsMainAccount = !a.MainAccountID.HasValue
        })
        .ToList();

    // 加入默认选项（可选）
    accountOptions.Insert(0, new AccountSelectItem { ID = 0, DisplayName = "请选择账户", IsMainAccount = false });
    
    ViewBag.AccountOptions = accountOptions;
    return View();
}

二、前端View渲染 #

由于默认Html.DropDownList无法直接给选项添加样式，需手动渲染<select>标签：

<style>
    /* 主账户加粗样式 */
    .main-account-option {
        font-weight: bold;
    }
    /* 子账户缩进样式 */
    .sub-account-option {
        padding-left: 20px;
    }
</style>

<select id="SelectedAccountId" name="SelectedAccountId" class="form-control">
    @foreach (var item in ViewBag.AccountOptions as List<AccountSelectItem>)
    {
        <option value="@item.ID" class="@(item.IsMainAccount ? "main-account-option" : "sub-account-option")">
            @(item.IsMainAccount ? item.DisplayName : Html.Raw(item.DisplayName))
        </option>
    }
</select>

关键说明 #

1. 排序逻辑：通过OrderBy(a => a.MainAccountID ?? a.ID)确保主账户与对应的子账户连续分组，再按账户名称排序保证可读性。
2. XSS防护：用HttpUtility.HtmlEncode处理账户名称，避免用户输入的恶意HTML代码被执行。
3. 样式控制：通过自定义CSS类区分主/子账户样式，子账户的缩进用padding-left而非硬编码空格，更符合CSS规范。

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