如何在驗證摘要中添加圖像以及錯誤消息？

Question

我想在驗證摘要中顯示成功圖像（綠色勾號）和失敗圖像（紅色警告）的錯誤消息。這個怎麼做。 和我驗證總結我將不得不顯示一些粗體，斜體等文字，因爲我試圖傳遞字符串這樣。

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

但在頁面中它的渲染效果。它沒有以粗體顯示用戶名和密碼。有沒有辦法做到這一點。我在控制器中得到這個驗證錯誤消息並將其添加到ModelState.add（error）;

Answer 1

毫無疑問，@Darin Dimitrov的答案是最好的做法。但作爲一個新手，我正在使用ViewBag
內Controller

if(true) //All is well and success msg is to be sent 
{ 
    ViewBag.Errors = null; 
    ViewBag.Success = "<b>Login</b> is Successful"; 

    //Redirect 
} 
else 
{ 
    ViewBag.Errors = "<b>Some Error messages</b>"; 
    ViewBag.Success = null; 
} 

內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默認編碼所有消息。你可以寫一個自定義的助手，其不HTML編碼：

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標記的可能性：

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

然後：

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

很明顯，通過這樣做你應該確保你的錯誤消息包含有效的HTML結構。