在MVC中,可以更改@ Html.DropDownListFor中每个列表项的字体(创建类似于MS office的字体下拉列表

在MVC 4中,我有类似下面的代码,

@for (int i = 0; i < Model.dropDownControl.Count; i++) { @List fonts = (List)ViewBag.vFontlIst; @Html.DropDownListFor( model => model.dropDownControl[i].Font, fonts, new { style = "width: 100px; font-family:"+Model.dropDownControl[i].Font+"", id = "ddlFontDropDownList" }) } 

在这里我尝试创建类似于我们在MS Office中用于字体选择的下拉列表,在上面的代码下拉字体样式对于完整列表总是相同的,这里selectlist包含所有可用字体控制器的列表,其具有以下代码:

 List liFonts = new List(); foreach (FontFamily font in System.Drawing.FontFamily.Families) { liFonts.Add(new SelectListItem { Text = font.Name, Value = font.Name }); } ViewBag.vFontlIst = liFonts; 

我想在这里下拉列表表现得像MS Office的字体下拉列表。

你可以用Javascript做到这一点。 Jquery脚本可以迭代selectoption元素,并将每个元素的值用作font-family

 $("#ddlFontDropDownList option").each(function(){ $(this).css("font-family":$(this).val()); }); 

编辑:

我错了,你不能改变option标签的字体。 你需要用一个使用ol / li的javascript小部件替换select语句。

这是一个HTML / Javascript的工作示例。

http://jsfiddle.net/6jnLD/
(根据这篇文章中的答案)

您只需要在视图中输出ol列表。 那部分应该很容易。

EDIT2

这到底是什么,这里也是View代码。

 // Model public List Fonts { get; set; } // Controller List liFonts = new List(); foreach (FontFamily font in System.Drawing.FontFamily.Families) { liFonts.Add(font.Name); } 

然后是观点

 // View  

Choose Language

    @foreach(System.Drawing.FontFamily font in fonts) {
  1. @font.Name
  2. }

谢谢大家,

在做了一些解决方法之后,现在能够找到在mvc(Browser-Chrome)中执行此操作的方法,

我已经编写了一个自定义的html帮助器,它扩展了@ Html.DropDownListFor,并且我在HTML中进行了一些自定义以进行渲染,

视图,

  //Reference for customcontrol class @using WEB_PDD_MVC.CustomHelpers 
@{ List fonts = (List)ViewBag.vFontlIst; foreach (SelectListItem item in fonts) { if (item.Text == Model.Font) { item.Selected = true; } else { item.Selected = false; } } } @Html.ExtendedDropDownListFor(model => model.Font, fonts,null, new { style = "width: 100px;", id = "ddlFontDropDownList" })

控制器,

  List liFonts = new List(); liFonts.Add(new SelectListItem { Text = "nimbus-sans-condensed", Value = "nimbus-sans-condensed" }); //For now selecting only 10 fonts. foreach (FontFamily font in System.Drawing.FontFamily.Families.Take(10)) { liFonts.Add(new SelectListItem { Text = font.Name, Value = font.Name }); } ViewBag.vFontlIst = liFonts; 

对于customdropdown类创建一个新文件夹CustomHelpers并在其中添加新的类文件CustomDropDownList,在其中添加以下方法,他们将完成其余的工作,

  public static MvcHtmlString ExtendedDropDownListFor(this HtmlHelper htmlHelper, Expression> expression, IEnumerable selectList, string optionLabel, object htmlAttributes) { return SelectInternal(htmlHelper, optionLabel, ExpressionHelper.GetExpressionText(expression), selectList, false /* allowMultiple */, HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes)); } private static MvcHtmlString SelectInternal(this HtmlHelper htmlHelper, string optionLabel, string name, IEnumerable selectList, bool allowMultiple, IDictionary htmlAttributes) { string fullName = htmlHelper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(name); if (String.IsNullOrEmpty(fullName)) throw new ArgumentException("No name"); if (selectList == null) throw new ArgumentException("No selectlist"); object defaultValue = null; // If we haven't already used ViewData to get the entire list of items then we need to // use the ViewData-supplied value before using the parameter-supplied value. if (defaultValue == null) defaultValue = htmlHelper.ViewData.Eval(fullName); if (defaultValue != null) { IEnumerable defaultValues = (allowMultiple) ? defaultValue as IEnumerable : new[] { defaultValue }; IEnumerable values = from object value in defaultValues select Convert.ToString(value, CultureInfo.CurrentCulture); HashSet selectedValues = new HashSet(values, StringComparer.OrdinalIgnoreCase); List newSelectList = new List(); foreach (SelectListItem item in selectList) { item.Selected = (item.Value != null) ? selectedValues.Contains(item.Value) : selectedValues.Contains(item.Text); newSelectList.Add(item); } selectList = newSelectList; } // Convert each ListItem to an