Archiv für den Monat Februar 2014

ASP.NET MVC – Model Binding und Postback für eine Liste mit Einträgen


Wenn man eine Liste z.B. mit Personen hat und man möchte die Liste in einer Tabelle darstellen und alle Felder sollen bearbeitbar sein, dann ist hier die Lösung mit ASP.NET MVC wahrscheinlich viel einfacher als man zuerst denken würde. Zumindest war ich überrascht wie einfach das ganze doch ist, wenn man die “richtige” Schleife zum Anzeigen der Werte benutzt.

Denn wenn man das ganze mit Hilfe einer “for” Schleife und dem jeweils passenden Index für einen Listeneintrag verwendet, dann baut MVC bei einem Postback die Liste genauso wieder zusammen.

Als erstes benötigen wir eine Liste aus z.B: Personen die angezeigt werden soll, am Besten mit unterschiedlichen Datentypen um den Vorteil von “Html.EditorFor”  zu verdeutlichen.

public class Person
{
    [Display(Name = "Loginname")]
    public string Loginname { get; set; }

    [Display(Name = "Nachname")]
    public string Name { get; set; }

    [Display(Name = "Vorname")]
    public string Vorname { get; set; }

    [Display(Name = "Alter")]
    public int Age { get; set; }

    [Display(Name = "Geburtstag")]
    public DateTime Birthdate { get; set; }

    [Display(Name = "Ist männlich?")]
    public bool IsMale { get; set; }
}

Dann noch ein einfaches Model welches eine Liste von Personen enthält. (alles sehr einfach gehalten)

public class EditListItemsModel
{
    public List PersonenListe { get; set; }

    public EditListItemsModel()
    {
        PersonenListe = new List();
    }

    public void LoadListItems()
    {
        PersonenListe.Add(new Person() { Loginname = "SquadWuschel@gmx.de", Vorname = "Squad", Name = "Wuschel", Age = 32, Birthdate = DateTime.Now.AddYears(-32), IsMale = true});
        PersonenListe.Add(new Person() { Loginname = "Jackson@gmx.de", Vorname = "Jack", Name = "Son", Age = 24, Birthdate = DateTime.Now.AddYears(-24), IsMale = true});
        PersonenListe.Add(new Person() { Loginname = "Fridi@gmx.de", Vorname = "Fri", Name = "di", Age = 52, Birthdate = DateTime.Now.AddYears(-52), IsMale = false});
    }

}

Im Controller die passenden Funktionen anlegen zum Anzeigen des Views und zum Verarbeiten der Postback Werte

 public ActionResult EditListItems()
 {
     EditListItemsModel model = new EditListItemsModel();
     model.LoadListItems();

     return View(model);
 }

 [HttpPost]
 public ActionResult EditListItems(EditListItemsModel model)
 {
     //Die Postback Modeldaten verarbeiten

     return View(model);
 }

Im View selbst dann in ein Formular unsere Einträge hinzufügen und hier verwendet man eine “for” Schleife und greift bei jedem EditorFor und LabelFor auf den passenden Index der Liste zurück. Denn dann erstellt MVC im HTML für das jeweilige “Namens”-Tag des Elements z.B. den folgenden Eintrag für das Alter vom Eintrag mit dem Index 1 “EditItems[1].Age”, bei einem Postback kann .NET dann die passenden Einträge wieder der Liste zuordnen.

@using (Html.BeginForm("EditListItems", "Home", FormMethod.Post, new { @class = "form-horizontal" }))
{</pre>
@for (int i = 0; i 0) { } }
<table class="table table-hover">
<tbody>
<tr>
<td colspan="4"></td>
</tr>
<tr>
<td>@Html.LabelFor(p => p.PersonenListe[i].Loginname)</td>
<td>@Html.EditorFor(p => p.PersonenListe[i].Loginname)</td>
</tr>
<tr>
<td>@Html.LabelFor(p => p.PersonenListe[i].Vorname)</td>
<td>@Html.EditorFor(p => p.PersonenListe[i].Vorname)</td>
</tr>
<tr>
<td>@Html.LabelFor(p => p.PersonenListe[i].Name)</td>
<td>@Html.EditorFor(p => p.PersonenListe[i].Name)</td>
</tr>
<tr>
<td>@Html.LabelFor(p => p.PersonenListe[i].Age)</td>
<td>@Html.EditorFor(p => p.PersonenListe[i].Age)</td>
</tr>
<tr>
<td>@Html.LabelFor(p => p.PersonenListe[i].Birthdate)</td>
<td>@Html.EditorFor(p => p.PersonenListe[i].Birthdate)</td>
</tr>
<tr>
<td>@Html.LabelFor(p => p.PersonenListe[i].IsMale)</td>
<td>@Html.EditorFor(p => p.PersonenListe[i].IsMale)</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Speichern</td>
</tr>
</tfoot>
</table>
<pre>}

Das ganze sieht dann im Browser z.B. folgendermaßen aus:

image

Beim “Speichern” wird dann der passende View im Controller aufgerufen und hier ist dann die Liste im Postbackmodel mit den hier eingetragenen Werten entsprechend gefüllt und kann verarbeitet werden.

Rechtschreibprüfung im Visual Studio


Wer kennt es nicht das leidige Problem mit den guten alten Rechtschreibfehlern in den Kommentaren oder auch den Fehlermeldungen die der Endanwender ebenfalls sieht. Leider hat Visual Studio keinen nativen Spell Checker integriert, aber hier gibt es zum Glück professionelle Abhilfe über Visual Studio Plugins.

Ich habe mich hier für den “Visual Studio Spell Checker” (Plugin) entschieden. Welches ab VS 2010 bis zum aktuellen VS 2013 zur Verfügung steht. Standardmäßig wird der Spell Checker mit dem englischen Wörterbuch ausgeliefert, aber ein deutsches Wörterbuch lässt sich hier sehr schnell “nachinstallieren”. Dies ist sehr gut auf der Codeplex Seite des Plugins beschrieben unter:

http://vsspellchecker.codeplex.com/wikipage?title=Adding%20Custom%20Dictionaries&referringTitle=Documentation

Die Angabe des Pfades in dem die Benutzerdefinierten Wörterbücher abgelegt werden sollen ist vielleicht etwas verwirrend aber gemeint ist z.B. der folgende Pfad:

C:\Users\SquadWuschel\AppData\Local\EWSoftware\Visual Studio Spell Checker\

Hier wird für das deutsche Wörterbuch die de_DE.aff und die de_DE.dic Datei abgelegt.

Im Visual Studio kann man dann unter “Tools->Spell Checker->Edit Configuration” die entsprechende Standardsprache einstellen und noch vieles mehr.

image

Im Visual Studio selbst werden die Fehler entsprechend angezeigt und über ein passendes Menü unterhalb des Wortes, wird dann auch eine entsprechende Lösung angeboten. Mit Hilfe des Shortcuts “STRG + .” kann der Smart Tag aber auch direkt geöffnet werden und man muss nicht mit der Maus “rumspielen” um das Smart Tag zu öffnen.

image

ReSpeller für ReSharper

Da ich Resharper mein eigen nennen kann, habe ich ebenfalls noch das Plugin ReSpeller in der Version 3.0.1.5 ausprobiert in der Pro Version (7,50€). Da ich gerne mit Tastaturkürzeln arbeite und der ReSpeller komplett im Resharper mit integriert ist habe ich das Geld “investiert” und das Plugin ausprobiert. Denn in der freien Version kann man keine zusätzlichen Wörterbücher installieren und man hat nur das englische Wörterbuch zur Verfügung. Leider musste ich feststellen, das der ReSpeller aktuell nicht zwischen Groß- und Kleinschreibungsfehlern unterscheidet, d.h. für ReSpeller war “Mutti” sowie auch “mutti” richtig geschrieben und damit vorerst als Rechtschreibprüfung nicht zu gebrauchen. Sollte sich etwas ändern werde ich hier bescheid geben.