如何使MVC3編輯器模板匹配jQueryUI主題

我正在使用MVC3，我想使我的視圖與jQueryUI主題完全集成。這意味着對於標準的@Html.EditorFor字段，我希望他們的css類實現我選擇的jQueryUI主題，並且如果我切換主題，那麼我的標準MVC3輸入會相應地改變，即使沒有使用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()，包括「新{@class =」 ...「}」我選擇的CSS類，它呈現與適當的jQueryUI的類，但我真的很喜歡的靈活性EditorFor用於任何類型的輸入。但是，即使只使用TextBoxFor，我也不喜歡每次都包含jQueryUI類。

要努力克服這一點，我試圖創建一個共享EditorTemplate從System.String派生並在CSS類，它們的工作手動推杆，但後來我失去所有的驗證特性的自動功能，似乎「虛情假意」。似乎有必要有一種更簡單的方法來自動將自定義CSS全局應用於EditorFor helpers。

所以我的問題是：

我怎麼能告訴EditorFor使用自定義的CSS類？
如何覆蓋EditorFor（或至少TextBoxFor）全局應用CSS類，所以我不必再重複它們？
作爲獎勵，是否有任何引用在那裏，以用於什麼jQueryUI的類別（例如，當我應該申請UI狀態默認與UI的小部件內容），使我的所有標準MVC3輸入看起來像使用jQueryUI增強裝飾的輸入？

來源

2012-01-04 bigmac

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

在瀏覽文件夾

文件夾。文件夾的名稱必須準確，並且該文件夾的位置是相關的。例如，如果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）在理想情況下，你應該只真正問一個簡單的問題在一個堆棧溢出問題，一個簡單的谷歌搜索應該能夠回答這個問題。然而，在這裏是ui-state-default和ui-widget-content定義：

的.ui狀態默認：類被施加到可點擊按鈕狀元件。將「可點擊默認」容器樣式應用於元素及其子文本，鏈接和圖標。

.ui-widget-content：要應用於內容容器的類。將內容容器樣式應用於元素及其子文本，鏈接和圖標。（可以應用於母公司或兄弟姐妹頭）

希望這會有所幫助。

來源

2012-01-04 17:51:36 Dangerous

危險，謝謝，但正如我所說，我已經知道我可以像這樣使用TextBoxFor。我的問題是，如果可以實現並覆蓋EditorFor以獲得我正在查找的結果（包括css類）以及如何防止必須包含「new {@class =」ui-widget ui-state -default ui-widget-content「}」每次我調用這個方法時（即使我必須使用TextBoxFor）。 – bigmac 2012-01-04 18:34:22

@bmccleary - 不要試圖聽起來迂腐，你的問題的第一部分問你怎麼能告訴EditorFor（如在現有的EditorFor）使用自定義的CSS類，我的答案是，你不能。這是你的問題的第二部分，被問到關於壓倒性的EditorFor，我沒有回答。我現在已經更新了我的答案，以反映問題的所有三個部分。 – Dangerous 2012-01-04 20:51:18

@危險......謝謝。這爲我提供了我需要的方向。是的，你對細節的關注是值得讚賞的！ ;） – bigmac 2012-01-04 22:16:54

As Dangerous說：

1）你不能這樣做。 EditorFor沒有辦法做到這一點。您可以嘗試基於源代碼實現自己的EditorFor方法（MVC源代碼可從codeplex下載），但是當新版本的MVC被引入時，這會增加您的維護。

2）默認的EditorFor模板可供下載。你可以下載這些，並根據你的需要修改它們。下載MVC3 Futures，並且默認模板在那裏。

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

獲得非模板函數有不同的風格，唯一的方法是寫自己的HTML幫手，又可以基於它的源代碼並修改它爲您的需求。

來源

2012-01-04 21:02:02

如何使MVC3編輯器模板匹配jQueryUI主題

回答

相關問題