如何使 MVC3 编辑器模板匹配 jQueryUI 主题答案

【问题标题】：How to Make MVC3 Editor Templates Match jQueryUI Theme如何使 MVC3 编辑器模板匹配 jQueryUI 主题
【发布时间】：2012-01-04 17:01:03
【问题描述】：

我正在使用 MVC3，我想让我的视图与 jQueryUI 主题完全集成。这意味着对于标准 @Html.EditorFor 字段，我希望他们的 css 类实现我选择的 jQueryUI 主题，并且如果我切换主题，我的标准 MVC3 输入会相应更改，即使没有使用 jQueryUI 增强功能进行装饰？

默认情况下，当我调用@Html.EditorFor(x => Model.FirstName)时，输出如下：

<input class="text-box single-line" data-val="true" data-val-length="The First Name field must be between 3 and 50 characters in length" data-val-length-max="50" data-val-length-min="3" data-val-required="The FirstName field is required." id="FirstName" name="FirstName" type="text" value="John" />

这很好而且很干净，因为我包含了所有的验证属性。但是，如果我尝试调用 @Html.EditorFor(x => Model.FirstName, new { @class = "ui-widget ui-state-default ui-widget-content" }) 来应用 jQueryUI 样式，则 CSS 类不会应用于输入字段（它们保持“文本框单行”）。

我确实发现，如果我将 @Html.EditorFor() 更改为 @Html.ListBoxFor() 并在我选择的 css 类中包含“new { @class= “...”}”，它会使用正确的 jQueryUI 类呈现，但我真的就像 EditorFor 与任何类型的输入一起使用的灵活性。然而，即使只使用 TextBoxFor，我也不喜欢每次都包含 jQueryUI 类。

为了克服这个问题，我尝试创建一个从 System.String 派生的共享 EditorTemplate 并手动放入 css 类，这很有效，但随后我失去了验证属性的所有自动功能，这似乎“做作”。似乎必须有一种更简单的方法来自动将自定义 CSS 全局应用于 EditorFor 助手。

所以我的问题是：

如何告诉 EditorFor 使用自定义 CSS 类？
如何覆盖 EditorFor（或至少是 TextBoxFor）以全局应用 CSS 类，这样我就不必重复它们了？
作为奖励，是否有任何关于 jQueryUI 类的用途的参考资料（例如，我应该何时应用 ui-state-default 与 ui-widget-content ) 让我所有的标准 MVC3 输入看起来都像带有 jQueryUI 增强功能的输入？

【问题讨论】：

标签： asp.net-mvc-3 jquery-ui mvc-editor-templates

【解决方案1】：

1) 您不能使用现有的EditorFor() 来指定额外的 html 参数。您在示例中使用的参数用于附加视图数据，而不是 html 属性。 EditorFor() 将创建自己的 HTML 属性。

或者，您可以改用TextBoxFor() 并使用htmlAttributes 参数：

@Html.TextBoxFor(m => m.UserName, new { @class = "ui-widget ui-state-default ui-widget-content" })

2) 可以使用编辑器模板覆盖EditorFor() 模板。这个link 演示了如何。

基本上，要创建 EditorTemplate，您需要创建一个名为

的文件夹

编辑器模板

在“视图”文件夹中。文件夹的名称必须准确，并且文件夹的位置是相关的。例如，如果 EditorTemplates 文件夹放置在 Views/Account 文件夹中（如果存在的话），那么模板将仅可用于相关的帐户视图。如果您将它放在 Shared 文件夹中，那么它将可供所有视图使用。

在 EditorTemplates 文件夹中，您应该创建一个以要处理的数据类型命名的局部视图。例如，我假设您只希望使用 EditorFor 处理字符串，因此我将其命名为 String.cshtml。

然后在局部视图中我定义了以下内容：

@inherits System.Web.Mvc.WebViewPage<string>

@Html.TextBoxFor(m => m, new { @class = "ui-widget ui-state-default ui-widget-content" })

就是这样。 EditorFor 现在处理字符串的任何地方都应该得到类似的东西：

<input class="ui-widget ui-state-default ui-widget-content" data-val="true" data-val-required="The User name field is required." id="UserName" name="UserName" type="text" value="" />

3) 理想情况下，您应该只在 Stack Overflow 问题中真正提出一个问题，并且简单的谷歌搜索应该能够回答这个问题。但是，这里是ui-state-default 和ui-widget-content 的定义：

.ui-state-default: 应用于可点击按钮的类元素。将“可点击的默认”容器样式应用于元素及其子文本、链接和图标。

.ui-widget-content：应用于内容容器的类。适用元素及其子文本、链接和图标。（可以应用于 header 的父级或兄弟级）

希望这会有所帮助。

【讨论】：

危险，谢谢，但正如我所说，我已经知道我可以像这样使用 TextBoxFor。我的问题是是否有可能实现并覆盖 EditorFor 以获得我正在寻找的结果（包括 css 类）以及如何防止必须包含“new { @class=”ui-widget ui-state -default ui-widget-content" }" 每次我调用这个方法时（即使我必须使用 TextBoxFor）。
@bmccleary - 没有试图听起来迂腐，你的问题的第一部分问你如何告诉 EditorFor（如在现有的 EditorFor 中）使用自定义 css 类，我的回答是你不能.这是您问题的第二部分，询问了关于覆盖 EditorFor 的问题，我没有来得及回答。我现在更新了我的答案以反映问题的所有三个部分。
@Dangerous...谢谢。这为我提供了我需要的方向。是的，感谢您对细节的关注！ ;)

【解决方案2】：

正如 Dangerous 所说：

1) 你做不到。 EditorFor 无法做到这一点。您可以尝试基于源代码实现自己的 EditorFor 方法（MVC 源代码可从 codeplex 下载），但是当引入新版本的 MVC 时，这会增加您的维护。

2) 默认的 EditorFor 模板可供下载。您可以下载这些，并根据您的需要进行修改。下载 MVC3 Futures，默认模板就在那里。

http://aspnet.codeplex.com/releases/view/58781

让非模板化函数具有不同样式的唯一方法是编写自己的 Html 帮助程序，同样您可以基于源代码并根据需要对其进行修改。

【讨论】：