58

「アラートエラー」ブートストラップスタイルのValidationSummarymcv3を表示したいと思います。

Razorビューを使用しており、次のコードでモデルエラーを表示しています。

 @Html.ValidationSummary(true, "Errors: ")

次のようなHTMLコードを生成します。

<div class="validation-summary-errors">
   <span>Errors:</span>
   <ul>
      <li>Error 1</li>
      <li>Error 2</li>
      <li>Error 3</li>
   </ul>
</div>

私もこれで試しました：

@Html.ValidationSummary(true, "Errors:", new { @class = "alert alert-error" })

正常に動作しますが、閉じるボタン（X）はありません

次のようなHTMLコードを生成します。

<div class="validation-summary-errors alert alert-error">
   <span>Errors:</span>
   <ul>
      <li>Error 1</li>
      <li>Error 2</li>
      <li>Error 3</li>
   </ul>
</div>

ただし、ブートストラップアラートには次のボタンがdivに含まれている必要があります。

<button type="button" class="close" data-dismiss="alert">×</button>

誰か助けてもらえますか？

これはうまくいきます！-ありがとうリックB

@if (ViewData.ModelState[""] != null && ViewData.ModelState[""].Errors.Count() > 0) 
{ 
   <div class="alert alert-error"> 
      <a class="close" data-dismiss="alert">×</a> 
      <h5 class="alert-heading">Ingreso Incorrecto</h5> 
      @Html.ValidationSummary(true)
   </div>
}

また、クラス「.validation-summary-errors」を「site.css」から削除する必要がありました。これは、そのスタイルが他のフォントの色と太さを定義しているためです。

4

16 に答える 16

54

再編集

私は最初あなたの質問を誤解しました。私は以下があなたが望むものだと思います：

@if (ViewData.ModelState[""] != null && ViewData.ModelState[""].Errors.Count > 0)
{ 
    <div class="alert alert-error">
        <button type="button" class="close" data-dismiss="alert">×</button>
        @Html.ValidationSummary(true, "Errors: ")
    </div>
}
于 2012-12-13T19:59:07.853 に答える
39

この答えはRickBのものに基づいています

  • 最新のブートストラップ用に更新==>>alert-errorを支持して存在しませんalert-danger。

  • Key String.Empty（ ""）だけでなく、すべての検証エラーに対して機能します

Bootstrap 3を使用していて、見栄えの良いアラートを取得しようとしている人の場合：

if (ViewData.ModelState.Keys.Any(k=> ViewData.ModelState[k].Errors.Any())) { 
    <div class="alert alert-danger">
        <button class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
        @Html.ValidationSummary(false, "Errors: ")
    </div>
}

RickBが提供するソリューションは、（String.Empty key）に手動で追加されたエラーに対してのみ機能し、ModelStateによって生成されたエラーに対しては機能しません（通常、これは最初にjavascriptを介してトリガーされますが、たとえばHtml.ValidationMessageFor、行方不明または他の多くの状況。

于 2013-08-29T01:41:59.103 に答える
33

代替ソリューション。=）

@if (ViewData.ModelState.Any(x => x.Value.Errors.Any())) 
{ 
   // Bootstrap 2 = "alert-error", Bootstrap 3 and 4 = "alert-danger"
   <div class="alert alert-danger alert-error"> 
      <a class="close" data-dismiss="alert">&times;</a> 
      @Html.ValidationSummary(true, "Errors: ")
   </div>
}
于 2013-09-05T19:16:39.577 に答える
18

箇条書き（順序付けされていないリスト）を使用してValidationSummaryがどのようにレンダリングされるかが気に入らなかった。エラーリストの下に不要なスペースがたくさんありました。

この問題の解決策は、単にエラーをループして、エラーを希望どおりにレンダリングすることです。段落を使用しました。例えば：

@if (ViewData.ModelState.Any(x => x.Value.Errors.Any()))
{
    <div class="alert alert-danger" role="alert">
        <a class="close" data-dismiss="alert">×</a>
        @foreach (var modelError in Html.ViewData.ModelState.SelectMany(keyValuePair => keyValuePair.Value.Errors))
        {
            <p>@modelError.ErrorMessage</p>
        }
    </div>
}

私の場合、結果は次のようになります。 ここに画像の説明を入力してください

于 2015-07-25T03:26:40.673 に答える
13 
@Html.ValidationSummary("", new { @class = "alert alert-danger" })
于 2014-10-01T13:49:31.057 に答える
6

次のように、HtmlHelperに拡張メソッドを作成することを検討してください。

public static class HtmlHelperExtensions
{
    public static HtmlString ValidationSummaryBootstrap(this HtmlHelper htmlHelper)
    {
        if (htmlHelper == null)
        {
            throw new ArgumentNullException("htmlHelper");
        }

        if (htmlHelper.ViewData.ModelState.IsValid)
        {
            return new HtmlString(string.Empty);
        }

        return new HtmlString(
            "<div class=\"alert alert-warning\">"
            + htmlHelper.ValidationSummary()
            + "</div>");
    }
}

次に、ul-liスタイルをスタイルシートに合わせる必要があります。

于 2013-10-16T08:39:04.783 に答える
6

MVC 5では、ViewData.ModelState[""]常にnull値を返しました。IsValid私はその命令に頼らなければならなかった。

if (!ViewData.ModelState.IsValid)
{
   <div class="alert alert-danger">
      <a class="close" data-dismiss="alert">×</a>
      <strong>Validation Errors</strong>
      @Html.ValidationSummary()
   </div>
}
于 2014-04-24T14:02:42.520 に答える
3

私は少し異なるルートを取りました：JQueryを使用してフォーム送信にフックします：

$('form').each(function() {
    var theForm = $(this);
    theForm.submit(function() {
        if ($(this).valid()) {
            if ($(this).find('.validation-summary-valid').length) {
                $('.validation-summary-errors').hide();
            }
        } else {
            if ($(this).find('.validation-summary-errors').length) {
                $('.validation-summary-errors')
                    .addClass('alert alert-error')
                    .prepend('<p><strong>Validation Exceptions:</strong></p>');
            }
        }
    });
});

私はこれを自己実行型のjavascriptモジュール内に設定しているので、作成した検証サマリーにフックします。

HTH

チャック

于 2013-03-21T17:50:50.520 に答える
2

jqueryを使用できます：

$(function(){
 $('.validation-summary-errors.alert.alert-error.alert-block').each(function () {
     $(this).prepend('<button type="button" class="close" data-dismiss="alert">×</button>');
 });
});

ブートストラップから指定されたエラークラスを含むすべてのdivを探し、divの先頭にhtmlを書き込みます。.alert-blockブートストラップページにあるように、クラスを追加しています。

メッセージが長い場合は、.alert-blockを追加して、アラートラッパーの上部と下部のパディングを増やします。

于 2012-12-13T22:52:37.100 に答える
2

このソリューションはSassを使用して機能させますが、基本的なcssでも同じことを実現できます。これをクライアント側の検証で機能させるために、ポストバックが発生したことを前提としているため、ModelStateのチェックに依存することはできません。すぐに使用できるMVCクライアント側の検証では、適切なタイミングで物事が表示されるようになっているので、それを実行して、検証サマリーのリストアイテムのスタイルを設定し、ブートストラップアラートのようにレンダリングします。

かみそりのマークアップ：

@Html.ValidationSummary(false, null, new { @class = "validation-summary-errors-alerts" })

サス

.validation-summary-errors-alerts{
ul{
    margin: 0;
    list-style: none;
    li{
        @extend .alert;
        @extend .alert-danger;
    }
}}

私のプロジェクト用に作成されたCSSは次のようになりました-あなたのものは異なります：

.validation-summary-errors-alerts ul li {
min-height: 10px;
padding: 15px 20px 15px 62px;
position: relative;
border: 1px solid #ca972b;
color: #bb7629;
background-color: #fedc50;
font-family: Arial;
font-size: 13px;
font-weight: bold;
text-shadow: none;}
于 2016-07-06T23:41:03.450 に答える
2

ここでの回答に基づく：

@if (!ViewData.ModelState.IsValid)
{
    <div class="alert alert-danger">
        <button type="button" class="close" data-dismiss="alert">×</button>
        @Html.ValidationSummary(false, "Errors: ")
    </div>
}

（私はBootstrap 4を使用しています）

于 2019-12-06T09:28:48.683 に答える
1

TwitterBootstrapMVCは、これを1行で処理します。

@Html.Bootstrap().ValidationSummary()

重要なのは、サーバー側とクライアント側（無害）の検証中に同じように動作することを保証するために、それを処理するjavaScriptファイルを含める必要があります。

妥当と思われる拡張メソッドを使用して、検証ヘルパーをカスタマイズできます。

免責事項：私はTwitterBootstrapMVCの作者です。Bootstrap 3で使用するには、ライセンスが必要です。

于 2013-09-19T18:12:34.503 に答える
1

純粋なjavascript（jQuery）を使用した代替ソリューション。私はMVC4+Bootstrap3を使用していますが、完璧に機能します。

$(function () {
        $(".validation-summary-errors").addClass('alert alert-danger');
        $(".validation-summary-errors").prepend('<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>')
    });

サーバー側のロジックを記述したくない場合は、代替ソリューションとして最適です。

于 2013-11-27T20:37:08.557 に答える
0

DanielBjörkのソリューションを拡張して、ValidationSummary()出力に含まれるCSSを調整するための小さなスクリプトを含めることができます。結果として得られたブートストラップアラートは、validation-summary-errorsクラスを削除するまでレンダリングの問題を示していました。

@if (ViewData.ModelState.Any(x => x.Value.Errors.Any())) {
   <div class="alert alert-danger">
      <a href="#" class="close" data-dismiss="alert">&times;</a>
      <h4>Validation Errors</h4>
      @Html.ValidationSummary()
   </div>
}

<script>
$(".validation-summary-errors").removeClass("validation-summary-errors");
</script>

エラーのあるフィールドにブートストラップのハイライトを簡単に与えることもできます。http://chadkuehn.com/convert-razor-validation-summary-into-bootstrap-alert/を参照してください

于 2014-09-03T16:31:05.930 に答える
0

ブートストラップ4で同じことを実現するには、次を使用します。

 @if (ViewData.ModelState[""] != null && ViewData.ModelState[""].Errors.Count() > 0)
        {
            <div class="col-auto alert alert-danger" role="alert">
                @Html.ValidationSummary(true)
            </div>
        }
于 2019-02-11T06:49:45.493 に答える
0

クライアントサイドのJavaScriptで動作する必要がある場合は、次のことをお勧めします。

  .validation-summary-valid {
    display: none;
  }

引き続きブートストラップクラスを割り当てることができます 

@Html.ValidationSummary(null, new {@class= "alert alert-danger" })

ただし、実際にエラーが発生した場合にのみ表示されます。

于 2019-06-13T10:43:52.277 に答える