1

我正在使用 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()“new { @class = "..." }" 并将其包含在我选择的 css 类中，它会使用正确的 jQueryUI 类呈现，但我真的很喜欢 EditorFor 的灵活性，可以与任何输入类型。然而，即使只使用 TextBoxFor，我也不喜欢每次都包含 jQueryUI 类。

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

所以我的问题是：

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

2 回答 2

4

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()可以使用编辑器模板覆盖模板。这个链接演示了如何。

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

编辑器模板

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

在 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：应用于内容容器的类。将内容容器样式应用于元素及其子文本、链接和图标。（可以应用于标题的父级或兄弟级）

希望这可以帮助。

于 2012-01-04T17:51:36.683 回答
0

正如危险所说：

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

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

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

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

于 2012-01-04T21:02:02.580 回答