Wenden Sie den Twitter-Bootstrap-Validierungsstil und die Nachricht auf die ASP.NET MVC-Validierung an

Wie kann ich die integrieren ASP.NET MVC unauffällig Validierung und Twitter Bootstrap? Ich möchte alle diejenigen, die Validierung Nachrichten und Stile angemessen.

InformationsquelleAutor der Frage SiberianGuy | 2012-07-13

  1. 17

    Ich schlage vor, zu zählen Bootstrapper in weniger format und das gleiche tun wie Iridio vorgeschlagen aber .weniger.
    Auf diese Weise konnte man so etwas wie:

    .validation-summary-errors
{
    .alert();
    .alert-error();
}
.field-validation-error 
{
    .label();
    .label-important();
}

    so, als bootstrapper wird sich ändern, Sie Holen sich die änderungen automatisch.
    Regelmäßige Stile, Griff Sichtbarkeit von MVC-Standard Site.css wird, Aufenthalt in Stelle und Griff Sichtbarkeit.

    InformationsquelleAutor der Antwort Shaddix

  2. 40

    Einer netten Art und Weise des Umgangs mit diesen, wenn Sie mit Bootstrap 2 ist...

    Fügen Sie diese zu Ihrem _Layout.cshtml:

    <script type="text/javascript">

jQuery.validator.setDefaults({
    highlight: function (element, errorClass, validClass) {
        if (element.type === 'radio') {
            this.findByName(element.name).addClass(errorClass).removeClass(validClass);
        } else {
            $(element).addClass(errorClass).removeClass(validClass);
            $(element).closest('.control-group').removeClass('success').addClass('error');
        }
    },
    unhighlight: function (element, errorClass, validClass) {
        if (element.type === 'radio') {
            this.findByName(element.name).removeClass(errorClass).addClass(validClass);
        } else {
            $(element).removeClass(errorClass).addClass(validClass);
            $(element).closest('.control-group').removeClass('error').addClass('success');
        }
    }
});

$(function () {

    $("span.field-validation-valid, span.field-validation-error").addClass('help-inline');
    $("div.control-group").has("span.field-validation-error").addClass('error');
    $("div.validation-summary-errors").has("li:visible").addClass("alert alert-block alert-error");

});

</script>

    Diese posts gefunden, wo ich die Codeschnipsel oben:

    Die Integration von Bootstrap-Fehler-styling mit MVC ist Unauffällig Fehler Validierung

    Twitter Bootstrap-Validierung Stile mit ASP.NET MVC

    MVC Twitter Bootstrap unauffällig Fehlerbehandlung

    UPDATE

    Jetzt musste ich das gleiche tun, wenn mit Bootstrap 3. Hier sind die änderungen notwendig, da die Namen der Klassen geändert:

    <script type="text/javascript">

    jQuery.validator.setDefaults({
        highlight: function (element, errorClass, validClass)
        {
            if (element.type === 'radio')
            {
                this.findByName(element.name).addClass(errorClass).removeClass(validClass);
            } else
            {
                $(element).addClass(errorClass).removeClass(validClass);
                $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
            }
        },
        unhighlight: function (element, errorClass, validClass)
        {
            if (element.type === 'radio')
            {
                this.findByName(element.name).removeClass(errorClass).addClass(validClass);
            } else
            {
                $(element).removeClass(errorClass).addClass(validClass);
                $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
            }
        }
    });

$(function () {

    $("span.field-validation-valid, span.field-validation-error").addClass('help-block');
    $("div.form-group").has("span.field-validation-error").addClass('has-error');
    $("div.validation-summary-errors").has("li:visible").addClass("alert alert-block alert-danger");

});

</script>

    InformationsquelleAutor der Antwort Leniel Macaferi

  3. 23

    Kopieren Sie die css von den Prüfern in der css-Datei und ändern Sie die Farbe accordinlgly.
    So etwas sollte tun

    .field-validation-error {
    color: #b94a48;
    display: inline-block;
    *display: inline;
    padding-left: 5px;
    vertical-align: middle;
    *zoom: 1;
}

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

.input-validation-error {
    /*
    border: 1px solid #ff0000;
    background-color: #ffeeee;
    */
    color: #b94a48;
    border-color: #b94a48;
}

.input-validation-error:focus {
  border-color: #953b39;
  -webkit-box-shadow: 0 0 6px #d59392;
  -moz-box-shadow: 0 0 6px #d59392;
  box-shadow: 0 0 6px #d59392;
}

.validation-summary-errors {
    /*font-weight: bold;*/
    color: #b94a48;
}

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

    InformationsquelleAutor der Antwort Iridio

  4. 8

    Bootstrap 3 müssen Sie hinzufügen:

    .validation-summary-errors
{
    .alert();
    .alert-danger();
}
.field-validation-error 
{
    .label();
    .label-danger();
}

    sehen Sie etwas wie das:

    Wenden Sie den Twitter-Bootstrap-Validierungsstil und die Nachricht auf die ASP.NET MVC-Validierung an

    InformationsquelleAutor der Antwort Roman Pushkin

  5. 7

    Warum nicht einfach css verwenden !wichtig und nennen es einen Tag:

    /* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
    color: #f00 !important;
}

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

.input-validation-error {
    border: 1px solid #f00 !important;
    background-color: #fee !important;
}

.validation-summary-errors {
    font-weight: bold;
    color: #f00;
}

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

    InformationsquelleAutor der Antwort meffect

  6. 4

    Integrieren Sie MVC3-Validierung mit dem Bootstrap-framework, indem Sie den folgenden javascript auf Ihrer Seite (Ansicht)

    <script>
$(document).ready(function () {
/* Bootstrap Fix */
$.validator.setDefaults({
    highlight: function (element) {
        $(element).closest("div.control-group").addClass("error");
    },
    unhighlight: function (element) {
        $(element).closest("div.control-group").removeClass("error");
    }
});
var current_div;
$(".editor-label, .editor-field").each(function () {
    var $this = $(this);
    if ($this.hasClass("editor-label")) {
        current_div = $('<div class="control-group"></div>').insertBefore(this);
    }
    current_div.append(this);
});
$(".editor-label").each(function () {
    $(this).contents().unwrap();
});
$(".editor-field").each(function () {
    $(this).addClass("controls");
    $(this).removeClass("editor-field");
});
$("label").each(function () {
    $(this).addClass("control-label");
});
$("span.field-validation-valid, span.field-validation-error").each(function () {
    $(this).addClass("help-inline");
});
$("form").each(function () {
    $(this).addClass("form-horizontal");
    $(this).find("div.control-group").each(function () {
        if ($(this).find("span.field-validation-error").length > 0) {
            $(this).addClass("error");
        }
    });
});
});
</script>

    Außerdem auf die Aussicht (zum Beispiel "Erstellen.cshtml") stellen Sie sicher, dass die Felder in der form formatiert sind, wie die folgenden...

        <div class="editor-label">
        @Html.LabelFor(Function(model) model.Name)
    </div>
    <div class="editor-field">
        @Html.EditorFor(Function(model) model.Name)
        @Html.ValidationMessageFor(Function(model) model.Name)
    </div>

    InformationsquelleAutor der Antwort Max

  7. 4

    Für die ValidationSummary verwenden, können Sie die überladung, die Sie angeben können htmlAttributes. Dies ermöglicht Ihnen, es zu verwenden, die Twitter Bootstrap alert css-Stile.

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

    Einer ähnlichen überlastung besteht für die ValidationMessage und ValidationMessageFor helper-Methoden.

    InformationsquelleAutor der Antwort Richard Everett

  8. 1

    Für diejenigen, die sich mit Bootstrap 3, die css-Klassen geändert haben und die oben genannten Lösungen benötigen Anpassungen an der Arbeit mit Bootstrap 3. Ich habe Folgendes mit Erfolg mit MVC 4 und Bootstrap 3. Sehen diese SO thread für mehr: 

    $(function () {
 //any validation summary items should be encapsulated by a class alert and alert-danger
    $('.validation-summary-errors').each(function () {
        $(this).addClass('alert');
        $(this).addClass('alert-danger');
    });

    //update validation fields on submission of form
    $('form').submit(function () {
        if ($(this).valid()) {
            $(this).find('div.control-group').each(function () {
                if ($(this).find('span.field-validation-error').length == 0) {
                    $(this).removeClass('has-error');
                    $(this).addClass('has-success');
                }
            });
        }
        else {
            $(this).find('div.control-group').each(function () {
                if ($(this).find('span.field-validation-error').length > 0) {
                    $(this).removeClass('has-success');
                    $(this).addClass('has-error');
                }
            });
            $('.validation-summary-errors').each(function () {
                if ($(this).hasClass('alert-danger') == false) {
                    $(this).addClass('alert');
                    $(this).addClass('alert-danger');
                }
            });
        }
    });

    //check each form-group for errors on ready
    $('form').each(function () {
        $(this).find('div.form-group').each(function () {
            if ($(this).find('span.field-validation-error').length > 0) {
                $(this).addClass('has-error');
            }
        });
    });
});

var page = function () {
    //Update the validator
    $.validator.setDefaults({
        highlight: function (element) {
            $(element).closest(".form-group").addClass("has-error");
            $(element).closest(".form-group").removeClass("has-success");
        },
        unhighlight: function (element) {
            $(element).closest(".form-group").removeClass("has-error");
            $(element).closest(".form-group").addClass("has-success");
        }
    });
}();

    InformationsquelleAutor der Antwort Ben Ripley

  9. 1

    Können Sie ein paar Klassen, um Ihre Website.css-Datei:

    /* styles for validation helpers */
.field-validation-error {
    color: #b94a48;
}

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

input.input-validation-error {
    border: 1px solid #b94a48;
}

select.input-validation-error {
    border: 1px solid #b94a48;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #b94a48;
}

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

    FYI: http://weblogs.asp.net/jdanforth/form-validation-formatting-in-asp-net-mvc-5-and-bootstrap-3

    InformationsquelleAutor der Antwort Darren Fang

  10. 0

    Diese konvertieren ValidationSummary() zu einer boostrap-Alarm. Sie können ein kleines Skript zu entfernen unnötiger Klassen und geben ein highlight auf Felder mit Problemen.

    @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");
$(".input-validation-error").removeClass("input-validation-error").parent().addClass("has-error");
</script>

    Weitere Informationen unter http://chadkuehn.com/convert-razor-validation-summary-into-bootstrap-alert/

    InformationsquelleAutor der Antwort Chad Kuehn

  11. 0

    Dies ist eine saubere Lösung, die Ihnen mehr Kontrolle über wie ValidationSummary macht Fehler in der Ansicht. Die Ungeordnete Liste, die es produziert haben, die nicht richtig Aussehen, im inneren der Alarm. Daher habe ich einfach durchgeschleift der Fehler und machte Ihnen, wie ich wollte - mit Absätzen in diesem Fall. Zum Beispiel:

    @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>
}

    Die Ergebnisse in einer ordentlichen Validierung Zusammenfassung Warnung:
    Wenden Sie den Twitter-Bootstrap-Validierungsstil und die Nachricht auf die ASP.NET MVC-Validierung an

    InformationsquelleAutor der Antwort Donal

  12. 0

    Folgendes bei mir funktioniert:

    $(function () {
    //any validation summary items should be encapsulated by a class alert and alert-danger
    $('.validation-summary-errors').each(function () {
        $(this).addClass('alert');
        $(this).addClass('alert-danger');
    });

    //update validation fields on submission of form
    $('form').submit(function () {
        if ($(this).valid()) {
            $(this).find('div.control-group').each(function () {
                if ($(this).find('span.field-validation-error').length == 0) {
                    $(this).removeClass('has-error');
                    $(this).addClass('has-success');
                }
            });
        }
        else {
            $(this).find('div.control-group').each(function () {
                if ($(this).find('span.field-validation-error').length > 0) {
                    $(this).removeClass('has-success');
                    $(this).addClass('has-error');
                }
            });
            $('.validation-summary-errors').each(function () {
                if ($(this).hasClass('alert-danger') == false) {
                    $(this).addClass('alert');
                    $(this).addClass('alert-danger');
                }
            });
        }
    });

    //check each form-group for errors on ready
    $('form').each(function () {
        $(this).find('div.form-group').each(function () {
            if ($(this).find('span.field-validation-error').length > 0) {
                $(this).addClass('has-error');
            }
        });
    });
});

var page = function () {
    //Update the validator
    $.validator.setDefaults({
        highlight: function (element) {
            $(element).closest(".form-group").addClass("has-error");
            $(element).closest(".form-group").removeClass("has-success");
        },
        unhighlight: function (element) {
            $(element).closest(".form-group").removeClass("has-error");
            $(element).closest(".form-group").addClass("has-success");
        }
    });
}();

    Entnommen http://www.benripley.com/development/javascript/asp-mvc-4-validation-with-bootstrap-3.

    InformationsquelleAutor der Antwort Appulus

Schreibe einen Kommentar