Question

我正在开发一个asp.net mvc Web应用程序。我有以下代码创建一个包含服务器列表的viewBag： -

 ViewBag.Servers = repository.AllServer().Where(a => a.TechnologyRole.Name.ToLower() == "hypervisor").ToList();

在我的视图中，我显示的是包含viewBag项目的下拉列表，如下所示： -

 @Html.DropDownListFor(model =>model.VirtualMachine.ServerID, ((IEnumerable<TMS.Models.TMSServer>)ViewBag.Servers).Select(option => new SelectListItem {
        Text = (option == null ? "None" : option.Technology.Tag), 
        Value = option.TMSServerID.ToString(),
        Selected = (Model != null) && (Model.VirtualMachine != null) && (option.TMSServerID == Model.VirtualMachine.ServerID)
    }), "Choose...")

目前我需要显示下拉项目的额外信息，并将其显示在工具提示中。所以任何人都可以建议最好的方法是什么？谢谢

Answer 1

如果您正在寻找一个简单的工具提示（默认为Html），您可以尝试以下代码。

创建自定义Dropdown辅助方法并为标题添加atttribute。使用javascript mouseover，您可以显示项目标题。

"onmouseover","this.title=this.options[this.selectedIndex].title"

 public static MvcHtmlString DropDownList(this HtmlHelper htmlHelper, string name, IEnumerable<YourType> selectList)
        {
            var select = new TagBuilder("select");

            var options = "";
            TagBuilder option;

            foreach (var item in selectList)
            {
                option = new TagBuilder("option");
                option.MergeAttribute("value", item.Id.ToString());
                option.MergeAttribute("text", item.Title);
                option.MergeAttribute("title", item.Title);
                option.SetInnerText(item.Title);
                options += option.ToString(TagRenderMode.Normal) + "\n";
            }

            select.MergeAttribute("id", name);
            select.MergeAttribute("name", name);
            select.MergeAttribute("onmouseover","this.title=this.options[this.selectedIndex].title");
            select.InnerHtml = options;

            return new MvcHtmlString(select.ToString(TagRenderMode.Normal));
        }

Answer 2

你必须使用javascript / jquery来加载额外的信息。这并不困难。你只需要在js中通过id或classname找到html元素，然后使用ajax或razor加载每个选项的额外信息。

添加html.dropdownlist的工具提示

2 个答案: