在Razor页面中为枚举Description添加Tooltip的问题求助

问题概述 #

在MVC应用的Razor页面中，尝试为枚举值组成的自定义下拉列表添加Tooltip，参考方案使用title属性但完全不显示，直接设置title="hello"也无效。

相关代码片段 #

Razor页面代码 #

<div class="col-sm-8">
    <div class="input-group">
        @Html.DropDownListCustomFor(m => m.Charge.CreditSubType, Model.CreditSubTypeSelector, new { @class = "form-control", title=Model.Charge.CreditSubType.Description()})
    </div>
    @Html.ValidationMessageFor(m => m.Charge.CreditSubType)
</div>

枚举类片段（已设置Description特性） #

public enum CreditTypeSubFilter
{
    [Display(Name = "SLA Miss", Description = "dfd")] SLAMiss = 1,
}

自定义DropDownListCustomFor扩展方法（MvcHtmlHelpers.cs） #

public static MvcHtmlString DropDownListCustomFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, IEnumerable<SelectListItem> selectList, object htmlAttributes, string emptyValueLabel = null)
{
    var selected = htmlHelper.ValueFor(expression).ToString();
    var items = new List<SelectListItem>();
    if (emptyValueLabel != null)
    {
        items.Add(new SelectListItem
        {
            Disabled = false,
            Value = string.Empty,
            Text = emptyValueLabel,
            Selected = string.IsNullOrEmpty(selected)
        });
    }
    items.AddRange(selectList);
    var dropDownList = new DropDownList
    {
        Items = items,
        Selected = selected,
        InputId = htmlHelper.IdFor(expression).ToString(),
        InputName = htmlHelper.NameFor(expression).ToString()
    };
    var selectedItem = items.SingleOrDefault(i => i.Value == dropDownList.Selected);
    dropDownList.SelectedLabel = selectedItem != null ? selectedItem.Text : string.Empty;
    var viewData = GetViewDataForHtmlAttributes(htmlAttributes);
    return htmlHelper.Partial("DropDownList", dropDownList, viewData);
}

控制器生成下拉列表代码 #

chargeEditor.CreditSubTypeSelector = DropDownListHelper.SelectList(_chargeRepository.GetCreditSubReasons((CreditTypeFilter)chargeEditor.Charge.CreditType), chargeEditor.Charge.CreditSubType);

浏览器生成的HTML片段（未包含Description） #

<li class="Charge_CreditSubTypeitem"><a href="javascript:dropDownSetValue('Charge_CreditSubType','Charge_CreditSubType_name','ErroneousPhysicalPackageStorageCharges','Erroneous Physical Package Storage Charges','')">Erroneous Physical Package Storage Charges</a></li>

补充信息 #

• 直接设置title="hello"，Tooltip仍不显示。
• 下拉列表界面截图：

解决思路与方案 #

问题根源 #

1. 属性应用对象错误：当前代码仅给整个下拉控件设置title，但需求是给每个下拉选项添加Tooltip，两者作用对象不一致。
2. 自定义控件渲染逻辑缺失：自定义的DropDownListCustomFor方法传递了htmlAttributes，但对应的Partial视图DropDownList.cshtml未将描述信息绑定到下拉选项的title属性上；同时现有SelectListItem未携带枚举的Description字段，无法传递到前端。

具体解决步骤 #

1. 扩展SelectListItem，携带描述信息

创建自定义下拉选项类，新增Description字段存储枚举的描述：

public class SelectListItemWithDescription : SelectListItem
{
    public string Description { get; set; }
}

2. 修改控制器，生成带描述的下拉选项

调整下拉列表生成逻辑，将枚举的Description赋值给自定义选项类：

// 获取枚举列表并转换为带描述的下拉选项
var creditSubReasons = _chargeRepository.GetCreditSubReasons((CreditTypeFilter)chargeEditor.Charge.CreditSubType);
chargeEditor.CreditSubTypeSelector = creditSubReasons.Select(item => new SelectListItemWithDescription
{
    Value = item.ToString(),
    Text = item.GetDisplayName(), // 调用自定义扩展方法获取Display.Name
    Description = item.GetDescription(), // 调用自定义扩展方法获取Display.Description
    Selected = item == chargeEditor.Charge.CreditSubType
});

// 补充：获取枚举Display特性的扩展方法示例
public static string GetDescription(this Enum enumValue)
{
    var fieldInfo = enumValue.GetType().GetField(enumValue.ToString());
    var attribute = fieldInfo.GetCustomAttribute<DisplayAttribute>();
    return attribute?.Description ?? enumValue.ToString();
}

3. 修改Partial视图，绑定Tooltip到下拉选项

在DropDownList.cshtml中遍历选项时，将Description赋值给<a>标签的title属性：

@model YourNamespace.DropDownList
<div class="custom-dropdown">
    <div id="@Model.InputId_name" class="dropdown-label">@Model.SelectedLabel</div>
    <ul class="dropdown-list">
        @foreach (var item in Model.Items.Cast<SelectListItemWithDescription>())
        {
            <li class="@Model.InputId item">
                <a href="javascript:dropDownSetValue('@Model.InputId','@Model.InputId_name','@item.Value','@item.Text','')" 
                   title="@item.Description">
                    @item.Text
                </a>
            </li>
        }
    </ul>
</div>

4. 测试验证

运行项目后，鼠标悬停下拉选项时，即可显示对应的Tooltip内容。

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