検証メッセージにエラーメッセージとともに画像を追加するには？

Question

検証サマリーで成功イメージ（緑の目盛り）と失敗イメージ（赤い警告）のエラーメッセージを表示したい。これを行う方法。 と私の検証の要約私はこのような文字列を渡そうとしたために太字、イタリック体などのテキストを表示する必要があります。

inValid <b>username</b> or <b>password</b> 

しかし、そのページのレンダリングはそのままです。太字のユーザー名とパスワードは表示されません。それを行う方法はありますか？コントローラでこの検証エラーメッセージが表示され、これをModelState.add（エラー）に追加しています。

Answer 1

ダーリンディミトロフの答えがベストプラクティスであることは間違いありません。しかし、初心者として、私は今View()

@if(ViewBag.Errors != null) 
{ 
    <div class="error">@Html.Raw(@ViewBag.Errors)</div> 
} 

@if(ViewBag.Success != null) 
{ 
    <div class="success">@Html.Raw(@ViewBag.Success)</div> 
} 

私は問題で立ち往生Css

.error { color: red; background-image:error_image.png; } 
.success { color:green; background-image : success_image.png; } 

Answer 2

ValidationSummaryヘルパーHTMLは、デフォルトですべてのメッセージをエンコードします。その後、

ModelState.AddModelError("user", "invalid <b>username</b> or <b>password</b>"); 

と：：

<%= Html.MyValidationSummary(true, null) %> 

public static class HtmlExtensions 
{ 
    public static MvcHtmlString MyValidationSummary(this HtmlHelper htmlHelper, bool excludePropertyErrors, string message) 
    { 
     var formContext = htmlHelper.ViewContext.ClientValidationEnabled ? htmlHelper.ViewContext.FormContext : null; 
     if (formContext == null && htmlHelper.ViewData.ModelState.IsValid) 
     { 
      return null; 
     } 

     string messageSpan; 
     if (!string.IsNullOrEmpty(message)) 
     { 
      TagBuilder spanTag = new TagBuilder("span"); 
      spanTag.InnerHtml = message; 
      messageSpan = spanTag.ToString(TagRenderMode.Normal) + Environment.NewLine; 
     } 
     else 
     { 
      messageSpan = null; 
     } 

     var htmlSummary = new StringBuilder(); 
     var unorderedList = new TagBuilder("ul"); 

     IEnumerable<ModelState> modelStates = null; 
     if (excludePropertyErrors) 
     { 
      ModelState ms; 
      htmlHelper.ViewData.ModelState.TryGetValue(htmlHelper.ViewData.TemplateInfo.HtmlFieldPrefix, out ms); 
      if (ms != null) 
      { 
       modelStates = new ModelState[] { ms }; 
      } 
     } 
     else 
     { 
      modelStates = htmlHelper.ViewData.ModelState.Values; 
     } 

     if (modelStates != null) 
     { 
      foreach (ModelState modelState in modelStates) 
      { 
       foreach (ModelError modelError in modelState.Errors) 
       { 
        var errorText = modelError.ErrorMessage; 
        if (!String.IsNullOrEmpty(errorText)) 
        { 
         var listItem = new TagBuilder("li"); 
         listItem.InnerHtml = errorText; 
         htmlSummary.AppendLine(listItem.ToString(TagRenderMode.Normal)); 
        } 
       } 
      } 
     } 

     if (htmlSummary.Length == 0) 
     { 
      htmlSummary.AppendLine(@"<li style=""display:none""></li>"); 
     } 

     unorderedList.InnerHtml = htmlSummary.ToString(); 

     var divBuilder = new TagBuilder("div"); 
     divBuilder.AddCssClass((htmlHelper.ViewData.ModelState.IsValid) ? HtmlHelper.ValidationSummaryValidCssClassName : HtmlHelper.ValidationSummaryCssClassName); 
     divBuilder.InnerHtml = messageSpan + unorderedList.ToString(TagRenderMode.Normal); 

     if (formContext != null) 
     { 
      // client val summaries need an ID 
      divBuilder.GenerateId("validationSummary"); 
      formContext.ValidationSummaryId = divBuilder.Attributes["id"]; 
      formContext.ReplaceValidationSummary = !excludePropertyErrors; 
     } 
     return MvcHtmlString.Create(divBuilder.ToString(TagRenderMode.Normal)); 
    } 
} 

は今、あなたはあなたの検証メッセージにHTMLタグを使用する可能性を持っている：あなたは、HTMLエンコードをしないカスタムヘルパーを書くことができます

明らかにこれを行うことで、エラーメッセージに有効なHTML構造が含まれていることを確認する必要があります。