Question

我正在使用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类。

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

所以我的问题是：

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

Answer 1

1）您不能使用现有的EditorFor()来指定addtional 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文件夹中。文件夹的名称必须准确，并且文件夹的位置是相关的。如果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问题中提出一个问题，而简单的Google搜索应该能够回答这个问题。但是，以下是ui-state-default和ui-widget-content的定义：

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

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

希望这有帮助。

Answer 2

As Dangerous说：

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

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

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

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

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

2 个答案: