周圍一的ValidationSummary通過CSS

一個對話框默認情況下Html.ValidationSummary（）產生這樣的HTML：周圍一的ValidationSummary通過CSS

<span class="validation-summary-errors">There were some errors...</span> 
<ul class="validation-summary-errors"> 
    <li>First Name too long</li> 
    <li>Invalid Email Address</li> 
</ul>

我想選擇整個驗證摘要，並通過CSS周圍添加邊框，所以我增加了CSS類是這樣的：

.validation-summary-errors{ 
background-color:#D9FFB2; 
border: 1px solid #5CBA30; 
color:#000000; 
margin-top:15px; 
margin-bottom:15px; 
}

現在的問題是，這周圍繪製驗證摘要信息和每個錯誤消息單獨的盒子。當然不是我想到的。

，我可以添加一個div周圍像這樣的總結，而這將導致一個空的紅盒子，如果沒有驗證錯誤，所以這是沒有辦法的辦法：

<div class="my-validation-summary"> 
     <h2> 
      <%=Model.Message%> 
     </h2> 
     <%= Html.ValidationSummary("There were some errors...")%> 
    </div>

我能想到的幾個的方式來解決這個問題：

有條件地添加邊界DIV與服務器端代碼
通過jQuery
添加邊界格寫我自己的HtmlHelper包裝日在打印CSS友好ValidationSummary

但是，所有這些看起來相當尷尬解決這樣一個簡單的任務。必須有更好的方法來做到這一點。也許還有其他一些編寫CSS類的方法，這樣當沒有驗證摘要時，我不會得到一個空框？

編輯：只是爲了澄清，我打電話的HTML輔助這樣的：

<%=Html.ValidationSummary("There were some errors...") %>

編輯2：這個問題的範圍是看看我是否忽略了一些死容易，明顯。看起來我沒有，所以我只需添加我自己的HtmlHelper函數，以滿足我的需求。我投票結束我自己的問題。

來源

2009-06-02 Adrian Grigore

您是否定製了您的驗證摘要控件？默認情況下，它不會像您發佈它一樣呈現相同的方式。 – RSolberg 2009-06-02 17:12:59

不，我只是使用重載ValidationSummary方法（請參閱上面的第一個編輯） - 阿德里安格里戈爾13秒前 – 2009-06-02 17:18:26

我喜歡MVC源碼是如何可用的 - 打開它並編寫自己的。祝你好運 – 2009-06-02 17:39:04

下面是一些CSS，將工作：

.validation-summary-errors { 
    background-color: #D9FFB2; 
    border:1px solid #5CBA30; 
    width: 400px; 
    } 
span.validation-summary-errors { 
    border-bottom-color: #D9FFB2; 
    display:block; 
    } 
ul.validation-summary-errors { 
    margin:0; 
    padding:0; 
    border-top:none; 
    }

您可能必須與這取決於你的其他的CSS寬度周圍玩耍。

編輯點評

後，我改變了ul.validation-彙總誤差零出margin和padding和刪除的寬度。它現在應該可以跨瀏覽器工作。

來源

2009-06-02 16:13:13 Emily

差不多:-)！這在Firefox 3中正常工作，但在IE 7中中斷。請參閱 http://content.screencast.com/users/sandra123/folders/Jing/media/a8523c9c-dfc7-44a4-8461-05d0e159677c/2009-06-02_1928 .png – 2009-06-02 17:33:00

如果你有一個包裝div，就像你提供的第二個代碼示例。然後，使用jQuery將錯誤類從「& ul」移動到該外部div很容易。

<html> 
<head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $(function() { 
     var className = "validation-summary-errors"; 
     $("." + className).removeClass(className).closest("div").addClass(className); 
    }); 
    </script> 
    <style type="text/css"> 
    .validation-summary-errors { border: solid 1px red; }, 
    </style> 
</head> 

<body> 
    <div> 
    <h2>My Modal Message</h2> 
    <span class="validation-summary-errors">There were some errors...</span> 
    <ul class="validation-summary-errors"> 
     <li>First Name too long</li> 
     <li>Invalid Email Address</li> 
    </ul> 
    </div> 
</body> 
</html>

此代碼將操縱HTML看起來像這樣...

<div class="validation-summary-errors"> 
    <h2>My Modal Message</h2> 
    <span class="">There were some errors...</span> 
    <ul class=""> 
     <li>First Name too long</li> 
     <li>Invalid Email Address</li> 
    </ul> 
    </div>

來源

2009-06-02 16:22:29 jessegavin

如果我讀這個權利，你只需要在span.validation-summary-errors邊框（而不是在內部內容），那麼：

.validation-summary-errors  {border: 0 none transparent; /* set defaults for inner */ 
           } 

span.validation-summary-errors {background-color:#D9FFB2; /* sets the span */ 
           border: 1px solid #5CBA30; 
           color:#000000; 
           margin-top:15px; 
           margin-bottom:15px; 
           }

應該這樣做。

或者，略少可靠：

.validation-summary-errors  {background-color:#D9FFB2; 
           border: 1px solid #5CBA30; 
           color:#000000; 
           margin-top:15px; 
           margin-bottom:15px; 
           } 

.validation-summary-errors > .validation-summary-errors, 
.validation-summary-errors .validation-summary-errors 
           {border: 0 none transparent; /* should apply styles to */ 
           }       /* the children/descendants */ 
                  /* with the same name - untested though... */

來源

2009-06-02 17:39:14

另一個和所需的解決方案。

@Html.ValidationSummary(false, "", new { @class = "YOUR CSS CLASS" })

來源

2017-11-01 20:07:14

周圍一的ValidationSummary通過CSS

回答

相關問題