如何擴展Html.ValidationMessage，以便將圖像包含爲錯誤？

Question

我想減少下面的代碼。下面的代碼工作，但它是不是很整齊等

<label for="Name">Name:</label><%= Html.TextBox("Name")%><% 
    if (!string.IsNullOrEmpty(Html.ValidationMessage("Name"))) { 
     string Error = HtmlRemoval.StripTags(Html.ValidationMessage("Name")); %> 
     <img src="Error.gif" alt="Error" title="<%= Error %>" /><% 
    } 
    %> 

我已閱讀，我需要擴展HTML輔助，這樣我可以返回一個圖像，而不是包含默認元素和文本錯誤的文字。

我似乎無法找到任何文章或關於如何完成此任務的一般建議。我對ASP.NET MVC仍然很陌生。任何建議將不勝感激。

Answer 1

可以擴展的HtmlHelper，如：

public static class CustomHtmlHelper { 

    public static string ValidationImage(this HtmlHelper helper, string name) { 
    if (helper.ViewData.ModelState[name] == null || helper.ViewData.ModelState[name].Errors == null) { 
     return String.Empty; 
    } 
    TagBuilder tag = new TagBuilder("img"); 
    tag.Attributes.Add("src", "Error.gif"); 
    tag.Attributes.Add("alt", "Error"); 
    tag.Attributes.Add("title", helper.ViewData.ModelState[name].Errors[0].ErrorMessage); 
    return tag.ToString(TagRenderMode.SelfClosing); 
    } 

} 

然後在你的頁面導入包含擴展方法

<%@ Import Namespace="CustomHtmlHelperNamespace" %> 

的類，然後執行以下內容添加到您的網頁：

<label for="Name">Name:</label> 
<%= Html.TextBox("Name")%> 
<% Html.ValidationImage("Name") %> 

欲瞭解更多信息關於擴展HtmlHelper的嘗試here，但基本上這擴展了HtmlHelper，檢查ViewState的名稱解析錯誤（在您的案例中的「名稱」），如果它包含錯誤生成呈現圖像所需的HTML。圖像的標題屬性將包含字段「名稱」的驗證消息。

Answer 2

您可以擴展Html Helper來添加一個類，如下所示。不是100％，這是你在問什麼，但這裏有雲：

public class HtmlHelperExtensions { 

    public static string GetMeSomething(this HtmlHelper helper) 
    { 
     //... Do things here. ... 
    } 
} 

一旦你有類似的東西，你可以打電話Html.GetMeSomething，它會返回一個字符串或任何你聲明的返回類型。

Answer 3

滾你自己ValidationMessage助手來解析圖像標記可能是你最好的選擇...內置的助手將呈現一個標籤，如

<span class="field-validation-error">You must specify a username.</span> 

，所以如果你不打算改變這一你留給CSS和/或jQuery技巧來做這個骯髒的工作。

我不知道一個純用的，如果CSS做你的工作，但如果你能處理一個DIV標籤中有你的錯誤消息跨度，你可以嘗試這樣的：

.field-validation-error 
{ 
    background: url(x.gif) no-repeat; 
    padding-left:10px; 
    color: #ff0000; 
} 

<div style="width:10px; height:10px; overflow:hidden;"> 
    <%= Html.ValidationMessage("username") %> 
</div> 

對於10x10 gif，這將隱藏文本，但它將位於塊元素中，並且沒有錯誤消息標題/「tooltip」。不完全是最好的解決方案。我會檢查MVC源代碼中的ValidationMessage方法的代碼，並考慮根據需要調整自己的代碼以完全呈現​​它，或者再次使用JavaScript來做這個詭計。

編輯：爲了好玩，我決定從MVC源代碼開始測試我自己的驗證消息幫助器。它很髒（硬編碼的圖像路徑），但是一個有效的例子。在這種情況下，它需要你傳遞驗證消息 - 我省略了一些代碼，它可以選擇顯示默認的內置消息。

public static string MyValidationMessage(this HtmlHelper htmlHelper, string modelName, string validationMessage) 
{ 
    if (modelName == null) 
     throw new ArgumentNullException("modelName"); 

    if (!htmlHelper.ViewData.ModelState.ContainsKey(modelName)) 
     return null; 

    ModelState modelState = htmlHelper.ViewData.ModelState[modelName]; 
    ModelErrorCollection modelErrors = (modelState == null) ? null : modelState.Errors; 
    ModelError modelError = ((modelErrors == null) || (modelErrors.Count == 0)) ? null : modelErrors[0]; 

    if (modelError == null) 
     return null; 

    return "<img src=\"../../Content/x.gif\" alt=\"Error\" title=\"" + validationMessage + "\" />"; 
} 

Answer 4

David Glenn很好的回答。非常感謝在Mvc中創建自定義Html幫助程序，讓我走上正軌。

但是，也有與大衛的擴展了幾個問題，開箱即用（在MVC3 W /剃刀）：

• 返回只是一個字符串將無法正常工作;它將實際顯示字符串，標籤和所有內容，除非用MvcHtmlString.Create（）將其包裝在視圖（UI）上。更優雅的方法是將輔助函數的返回類型更改爲MvcHtmlString。您也可以重載Helper函數以適應兩種返回類型。

• 如果您在 做其他錯誤模式單一領域，如正則表達式 檢查等，輔助方法將 失敗，因爲最初的「If..Then ..」 未能檢查錯誤計數; 只是檢查它是否爲「空」 不夠。錯誤對象將 不爲空，但它的所有 屬性將在非失敗的 字段中。

所以下面是重構，以適應上述兩個問題的CustomHtmlHelper類，也注入了正確的CSS類名：

#Region "Imports" 

Imports System.Runtime.CompilerServices 

#End Region 

Namespace Laddawn.Web.Mvc.Extensions 

    Public Module CustomHtmlHelpers 

     <Extension()> 
     Public Function ValidationImage(ByVal helper As HtmlHelper, ByVal name As String) As MvcHtmlString 

      If helper.ViewData.ModelState(name) Is Nothing _ 
      OrElse helper.ViewData.ModelState(name).Errors Is Nothing _ 
      OrElse helper.ViewData.ModelState(name).Errors.Count = 0 Then 
       Return MvcHtmlString.Empty 
      End If 

      Dim tag As New TagBuilder("img") 

      With tag 
       .Attributes.Add("src", "/Content/Images/Mobile/alert.png") 
       .Attributes.Add("alt", helper.ViewData.ModelState(name).Errors(0).ErrorMessage) 
       .Attributes.Add("title", helper.ViewData.ModelState(name).Errors(0).ErrorMessage) 
       .Attributes.Add("class", HtmlHelper.ValidationMessageCssClassName) 
      End With 

      Return MvcHtmlString.Create(tag.ToString(TagRenderMode.SelfClosing)) 

     End Function 

    End Module 

End Namespace 

在你的CSS文件，創建一個類，如：

img.field-validation-error 
{ 
    vertical-align:   text-bottom; 
    margin-left:   5px; 
} 

現在你的Css可以獨立於按摩CSS來操縱圖像了。

注意：不要忘記改變圖像路徑以適合您的項目需求。這是另一個領域，你可能會添加一個額外的參數imagePath和使用默認的助手方法，如果一個不通過。 VB/NET，如果你想使用上面的代碼，只需在Telerik使用轉換器（http://converter.telerik.com/）

Answer 5

不幸的是，我的自定義驗證圖像助手類不適用於客戶端驗證。

如果有人想在可以/將支持客戶端驗證的版本中進行破解，那就試試吧！ :)

Answer 6

擴展在埃德的答案，這是因此它可以使用模型工作：

public static MvcHtmlString ValidationImageFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression) 
    { 
     string propertyName = ExpressionHelper.GetExpressionText(expression); 
     string name = helper.AttributeEncode(helper.ViewData.TemplateInfo.GetFullHtmlFieldName(propertyName)); 

     if (helper.ViewData.ModelState[name] == null || 
      helper.ViewData.ModelState[name].Errors == null || 
      helper.ViewData.ModelState[name].Errors.Count == 0) 
     { 
      return MvcHtmlString.Empty; 
     } 

     TagBuilder tag = new TagBuilder("span"); 
     tag.Attributes.Add("class", "field-validation-error"); 
     tag.Attributes.Add("data-valmsg-for", name); 
     tag.Attributes.Add("data-valmsg-replace", "true"); 
     return MvcHtmlString.Create(tag.ToString(TagRenderMode.SelfClosing)); 
    } 

我被渲染成一個跨度..這MVC呈現同樣的方式。我在CSS類中設置了我的背景圖像。例如：

@Html.ValidationImageFor(x => x.FieldNameHere) 

HTH

Answer 7

最好將是MVC開發改變ModelError.ErrorMessage的類型的MvcHtmlString或在其.NET4新對應物（HtmlString）