Zum Inhalt springen

Archiv

Kategorie: ASP.NET MVC

Wie man die Server-Validierung für Bootstrap 3 ein wenig aufhübschen kann, habe ich ja bereits erklärt.

Nun wollte ich auch schauen, dass die Client-Variante etwas _bootstrappiger_ aussieht und bin auf folgenden Beitrag gestoßen. Sehr gut finde ich, dass hier sämtliche Standardmethoden genutzt werden und das Rad nicht neu erfunden wird. Das ganze ist nur für Bootstrap 2, daher habe ich noch ein wenig dran geschraubt.

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').each(function () {
        $(this).addClass('help-block');
    });
});

Im Prinzip habe ich wieder nur die CSS-Klassen angepasst und aus den Kommentaren die letzte Methode gezogen, um die Bootstrap-CSS-Klasse für die Hinweise anzufügen.
Damit das ganze auch funktioniert, muss darauf geachtet werden, dass der Code nach dem Laden der jQuery-Methoden erfolgt. Dazu habe ich in der BundleConfig.cs einfach das ScriptBundle angepasst:

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
	"~/Scripts/jquery.unobtrusive*",
	"~/Scripts/jquery.validate*").Include("~/Scripts/wys.jquery.validate.bootstrap3.js"));

Ich habe die Datei bewusst mit einem Prefix versehen, denn nur mit dem Namen „jquery.validate.bootstrap3.js“ wäre die Datei vor den anderen jquery.validate-Javascript-Dateien geladen worden und hätte zu einem Javascript-Fehler geführt.

Update: Es gab noch einen kleinen Bug im Code, den ich noch mal eben behoben habe!


Ursprünglicher Beitrag:

Ich habe mal spaßeshalber ein MVC Projekt angefangen und dort ebenfalls das vor wenigen Tagen erschienene Bootstrap 3 implementiert. Nun wollte ich die bekannte ValidationSummary von MVC ein wenig mit Bootstrap stylen, jedoch scheint dies nicht so einfach.

Bei stackoverflow (wo auch sonst) bin ich auf eine eigene Implementierung der ValidationSummary-Ausgabe speziell für Bootstrap gestoßen. Diese ist jedoch nur für die Server-seitige Validierung geeignet, und da ich mich sowieso noch nicht entschlossen hatte, welche Validierung ich nutzen möchte, habe ich kurzerhand die Client-seitige deaktiviert.

Neben der bootstrap-gestylten ValidationSummary zeigte „PeteGo“ noch, wie er seine Eingabefelder für den Benutzer fehlerhaft markiert. Dies ist mir allerdings zu aufwendig, da man natürlich mit jedem neuen Feld auch auch an die Prüfung denken muss. Ja ich weiß, ich kann ja Editor-Templates nutzen, will ich aber nicht 😉

Da ich die Erweiterung von PeteGo sowieso anfassen musste, sie war nur für Bootstrap 2 geeignet, habe ich die einzelnen Fehlermeldungen auch noch einem data--Attribute versehen und markiere per jQuery die Felder als fehlerhaft.

Die Erweiterung:

using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace System.Web.Mvc
{
    public static class HtmlExtensionMethods
    {
        /// <summary>
        /// Returns an error alert that lists each model error, much like the standard ValidationSummary only with
        /// altered markup for the Twitter bootstrap styles.
        /// </summary>
        public static MvcHtmlString ValidationSummaryBootstrap(this HtmlHelper helper, bool closeable)
        {
            string errorMessage = "Please fix the errors listed below and try again.";
            string validationTitle = "Validation error";

            ModelStateDictionary modelErrors = helper.ViewContext.ViewData.ModelState;

            if (!modelErrors.Any(error => error.Value.Errors.Any()))
            {
                return new MvcHtmlString(string.Empty);
            }

            StringBuilder divContent = new StringBuilder();
            
            if (closeable)
            {
                TagBuilder button = new TagBuilder("button");
                button.AddCssClass("close");
                button.MergeAttribute("type", "button");
                button.MergeAttribute("data-dismiss", "alert");
                button.SetInnerText("x");
                divContent.Append(button);
            }

            TagBuilder validationTitleTag = new TagBuilder("strong");
            validationTitleTag.SetInnerText(validationTitle);
            divContent.Append(validationTitleTag);

            divContent.Append(" ");
            divContent.Append(errorMessage);

            StringBuilder ulContent = new StringBuilder();
            
            foreach (KeyValuePair<string, ModelState> modelError in modelErrors)
            {
                string id = modelError.Key;
                foreach(ModelError item in modelError.Value.Errors)
                {
                    TagBuilder li = new TagBuilder("li");
                    li.SetInnerText(item.ErrorMessage);
                    li.MergeAttribute("data-bootstrap-has-error", id);
                    ulContent.Append(li);
                }
            }
            TagBuilder ul = new TagBuilder("ul") {InnerHtml = ulContent.ToString()};
            divContent.Append(ul);

            TagBuilder div = new TagBuilder("div");
            div.AddCssClass("alert");
            div.AddCssClass("alert-error");
            div.AddCssClass("alert-block");
            div.InnerHtml = divContent.ToString();

            return new MvcHtmlString(div.ToString());
        }

        /// <summary>
        /// Overload allowing no arguments.
        /// </summary>
        public static MvcHtmlString ValidationSummaryBootstrap(this HtmlHelper helper)
        {
            return ValidationSummaryBootstrap(helper, true);
        }
    }
}

Und nun die paar Zeilen Javascript, welche dann die Felder entsprechend markieren:

$(function () {
    $('div.alert').each(function () {
        $(this).find('li[data-bootstrap-has-error]').each(
            function () {
                var id = $(this).attr('data-bootstrap-has-error');
                $('input[id=' + id + '],select[id=' + id + ']').parent().addClass('has-error');
            });
    });
});

Vielleicht kann es ja jemand gebrauchen 🙂

Ach ja, falls jemand ein paar Pros / Contras bezüglich Client-/Server-Validierung hat, kann er diese gerne in den Kommentaren hinterlassen.

Ich hatte gerade das Problem, dass ich mit dem WYSIWYG-Editor CKEditor Bilder hoch laden möchte, um sie direkt in meinen Text einzupflegen.
Dazu wird irgendwo im View der Editor definiert:

  <script type="text/javascript">
      window.onload = function() {
          CKEDITOR.replace('ckEditor', {
            skin: 'office2003',            
            filebrowserUploadUrl: '<%=Url.Action("UploadImage") %>'
      });
  };
  
</script>

Wichtig ist hier der Parameter „filebrowserUploadUrl“. Dies ist der Pfad, wohin das Bild beim Upload gesendet wird.
Im Controller wird das ganze nun verarbeitet:

        [AcceptVerbs(HttpVerbs.Post)]
        public string UploadImage()
        {
            // Datei speichern
            var identifier = Guid.NewGuid();
            string[] fileExt = Request.Files[0].FileName.Split('.');
            string safeFile = identifier + "." + fileExt[fileExt.Length - 1];
            Request.Files[0].SaveAs(Path.Combine(HostingEnvironment.MapPath("~/UploadedImages/"), safeFile));
            
            // Daten an CKEditor zurück geben
            string result = "<script type=\"text/javascript\">";
            result += "window.parent.CKEDITOR.tools.callFunction(" + Request.QueryString["CKEditorFuncNum"] + ", \"" +
                      Path.Combine(Url.Content("~/UploadedImages/"), safeFile) + "\",\"\");</script>";
            return result;
        }

Erst speicher ich das Bild irgendwo und gebe dann den Pfad per Javascript zurück. Da ich nur das JS ausführen lassen muss, gebe ich kein komplettes View zurück. Die Url wird dann korrekt an CKEditor übergeben (siehe Screenshots). Der letzte Parameter des callFunction()-Aufrufes kann für Fehlermeldungen genutzt werden, Bild zu groß o.ä.
Mich hat dieser kleine Aufruf bestimmt eine Stunde gekostet!

CKEditor - Datei auswählen, Hochladen CKEditor - Datei hochgeladen und Pfad übergeben

Da ich nun einen eigenen MembershipProvider nutze, möchte ich auch entsprechenden meinen RoleProvider anpassen.
Dies ist eigentlich ähnlich einfach, wie der MembershipProvider. Dazu wird eine eigene Klasse von System.Web.Security.RoleProvider abgeleitet. Auch könnt ihr hier wieder mit dem Überschreiben der Methode „Initialize()“ Werte aus der „web.config“ übergeben. Wo ihr die Daten ablegt, bleibt euch auch hier wieder überlassen.

Das Einbinden in die „web.config“ erfolgt über folgenden Eintrag:

    <roleManager enabled="true" defaultProvider="MyPersonalRoleProvider">
      <providers>
        <clear />
        <add name="MyPersonalRoleProvider" type="MyApp.PersonalRoleProvider" connectionStringName="MSPConnString" />
      </providers>
   </roleManager>

Wichtig ist die erste Zeile. Standardmäßig steht „enabled“ nämlich auf false!
Der RoleProvider ist nun fertig zum Einsatz! In eurem ASP.NET Projekt könnt ihr auf die Daten über die Standardmethoden wie etwa „Role.IsUserInRole()“ etc. zugreifen. Mehr dazu steht in der MSDN.

Manchmal kann es Sinn machen, nicht den standardmäßigen ASP.NET MembershipProvider zu nutzen. Daher möchte ich euch kurz erklären, wie ihr einen eigenen MembershipProvider schreiben könnt. Dabei ist es letztendlich euch überlassen, wo die Daten gespeichert sind.

Ich benutze bei einem Projekt etwa eine SQL-Datenbank und speicher bzw. lese die Daten per Stored-Procedures. Man könnte die Daten aber auch in einer XML-Datei speichern oder direkt hardcoded in der Klasse.
weiter lesen…