在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脚本可以迭代select
的option
元素,并将每个元素的值用作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) { - @font.Name
}
谢谢大家,
在做了一些解决方法之后,现在能够找到在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