Asp.net mvc 3 如何使MVC3编辑器模板与jQueryUI主题匹配_Asp.net Mvc 3_Jquery Ui_Mvc Editor Templates

Asp.net mvc 3 如何使MVC3编辑器模板与jQueryUI主题匹配

asp.net-mvc-3 jquery-ui

Asp.net mvc 3 如何使MVC3编辑器模板与jQueryUI主题匹配,asp.net-mvc-3,jquery-ui,mvc-editor-templates,Asp.net Mvc 3,Jquery Ui,Mvc Editor Templates,我正在使用MVC3，我想让我的视图与jQueryUI主题完全集成。这意味着对于标准的@Html.EditorFor字段，我希望他们的css类实现我选择的jQueryUI主题，如果我切换主题，我的标准MVC3输入也会相应地改变，即使没有用jQueryUI增强来修饰默认情况下，当我调用@Html.EditorFor（x=>Model.FirstName）时，输出如下： <input class="text-box single-line" data-val="true" data-val-l

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

为了克服这个问题，我尝试创建一个从

System.String

派生的共享EditorTemplate，并手动输入css类，这很有效，但随后我失去了验证属性的所有自动功能，它似乎是“hokey”。似乎有一种更简单的方法可以自动将自定义CSS全局应用到EditorFor助手

因此，我的问题是：

如何告诉EditorFor使用自定义CSS类

如何覆盖EditorFor（或至少覆盖TextBoxFor）以全局应用CSS类，从而不必重复它们

作为奖励，是否有任何关于jQueryUI类用于什么的参考（例如，我应该在什么时候应用ui状态默认值与ui小部件内容），以便我的所有标准MVC3输入看起来像是用jQueryUI增强装饰的输入

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文件夹中（如果存在），则该模板将仅对相关的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" })

@继承System.Web.Mvc.WebViewPage
@TextBoxFor（m=>m，新的{@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）理想情况下，你应该在堆栈溢出问题中只问一个问题，一个简单的谷歌搜索应该能够回答这个问题。但是，以下是和的定义：

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

.ui小部件内容：应用于内容容器的类。应用元素及其子文本、链接和链接的内容容器样式图标。（可应用于标头的父级或同级）

希望这有帮助。

1）您不能使用现有的

EditorFor（）

来指定附加的html参数。示例中使用的参数用于其他视图数据，而不是html属性。

EditorFor（）