MVC4-Validierung mit razor und twitter bootstrap

Haben Sie versucht, das script?

http://blog.ijasoneverett.com/2013/05/asp-net-mvc-validation-with-twitters-bootstrap/

Ich benutze etwas ähnliches für die erste bootstrap-und mvc-Validierung zu spielen schön

InformationsquelleAutor Slicksim

Ändern validator defaults:

//Override jquery validate plugin defaults in order to utilize Twitter Bootstrap 3 has-error, has-success, etc. styling.
$.validator.setDefaults({
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error').removeClass('has-success');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function (error, element) {
        if (element.parent('.input-group').length || element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

Erstellen Sie eine neue Validierung Zusammenfassung teilweise (so haben Sie die vollständige Kontrolle über markup):

@model ModelStateDictionary

<div class="@(Html.ViewData.ModelState.IsValid ? "validation-summary-valid" : "validation-summary-errors") panel panel-danger" data-valmsg-summary="true">
    <div class="panel-heading">
        Please, correct the following errors:
    </div>
    <div class="panel-body">
        <ul>
            @foreach (var modelError in Model.SelectMany(keyValuePair => keyValuePair.Value.Errors))
            {
                <li>@modelError.ErrorMessage</li>
            }
        </ul>
    </div>
</div>

Fügen Sie einen Stil, um Ihr CSS zu verstecken, die Validierung Zusammenfassung auf der ersten laden, ohne zu hängen, client-side-scripting, um es zu verstecken nach der Tat):

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

Und machen Ihre alternative Validierung Zusammenfassung Ihrer Ansicht nach anstelle von @Html.ValidationSummary():

   @{Html.RenderPartial("_HtmlValidationSummary", ViewData.ModelState);}

Und du bist gut zu gehen. Oh, und das schöne styling für checkbox und radio, je nach Ihrem setup, das Skript zu fangen, aber die einfachste ist, einfach ändern Sie Ihre also Boolean.cshtml teilweise zu sein, wie die folgenden (wobei Html.FormGroupFor ist nur eine leicht aktualisierte version von https://github.com/erichexter/twitter.bootstrap.mvc/blob/master/src/Bootstrap/BootstrapSupport/ControlGroupExtensions.cs - ändern Sie einfach "control-group" Referenzen "form-group" und fügen Sie " controlGroupWrapper.AddCssClass("muss-Fehler");" on line 58 ' ish):

@using Bctf.Web.HtmlHelpers
@model bool?

@using (Html.FormGroupFor(x => Model))
{
    <label class="checkbox">
        @Html.CheckBox("", Model.HasValue && Model.Value, new { @class = "tickbox-single-line" }) @ViewData.ModelMetadata.DisplayName
    </label>
    @Html.ValidationMessageFor(x => Model, string.Empty, new { @class = "help-block" })
}

Alle der oben genannten ist die Zusammenstellung verschiedener Lösungen, die ich gefunden habe, die aus vielen verschiedenen Orten, die haben die richtige Mischung. Ben ' s Lösung oben funktioniert, aber es macht einen fair-bit-client-Seite, die Ursachen einer Abweichung, wenn eine Methode, in der es aufgerufen wird (z.B. post, laden der Seite, Validierungs-Fehler). Das vorstehende gilt allen, die Sie benötigen, ohne dass Sie alle, die DOM-looping.

Den verschiedenen Antworten auf Bootstrap 3 mit jQuery Validation Plugin decken viele der oben genannten (und Anerkennung für ein bedeutsames Stück der oben genannten zu den verschiedenen Plakaten gibt, obwohl niemand die Antwort deckt es alle).

InformationsquelleAutor Ted

Ich möchte hinzufügen, dass die Klasse auf der server-Seite, und nicht client-Seite, also, meine Lösung ist nicht javascript (in meinem Fall, es ist ein einfaches system mit nur 2 oder 3 Felder auf dem Formular).

Dies ist die Verwendung der gleichen Struktur, von Form -> Validierung Staaten von Bootstrap-Dokumentation in http://getbootstrap.com/css/#forms-control-validation

Zuerst habe ich eine Html Helper um zu überprüfen, ob der ModelState Valide ist und wenn ein Fehler auf dem Spielfeld, die einen string zurückgeben (Klasse name). Ich konnte dies getan haben, direkt auf der Ansicht, aber ich mag eine sauberere Ansicht. Also, meine Klasse:

public static class ErrorHelper
{
    private static string GetPropertyName<TModel, TValue>(Expression<Func<TModel, TValue>> expression)
    {
        //Get field name
        //Code from: https://stackoverflow.com/a/2916344/4794469
        MemberExpression body = expression.Body as MemberExpression;
        if (body != null) return body.Member.Name;

        UnaryExpression ubody = expression.Body as UnaryExpression;
        if (ubody != null) body = ubody.Operand as MemberExpression;

        return body?.Member.Name;
    }

    public static MvcHtmlString ReturnOnError<TModel, TValue>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TValue>> expression, string @class)
    {
        var propertyName = GetPropertyName(expression);
        if (propertyName == null)
            return MvcHtmlString.Empty;

        if (htmlHelper.ViewData.ModelState.IsValid || !htmlHelper.ViewData.ModelState.ContainsKey(propertyName))
            return MvcHtmlString.Empty;

        return htmlHelper.ViewData.ModelState[propertyName].Errors.Any()
            ? MvcHtmlString.Create(@class)
            : MvcHtmlString.Empty;
    }
}

Importe:

using System;
using System.Linq;
using System.Linq.Expressions;
using System.Web.Mvc;

Nun, meiner Ansicht nach, ich muss nur um die Klasse zu verwenden, wie:

<div class="form-group @Html.ReturnOnError(m => m.Name, "has-error")">
    @Html.LabelFor(m => m.Name, new { @class = "control-label" })
    @Html.TextBoxFor(m => m.Name, new { @class = "form-control" })
    @Html.ValidationMessageFor(m => m.Name, null, new { @class = "help-block" })
</div>

InformationsquelleAutor Roberto Correia