VS 2012–MVC4 Twitter.Bootstrap Template (C# & Razor)


Erstellen und anpassen eines ASP.NET MVC4 Templates an das Layout von Twitter.Bootstrap. Dafür habe Ich mir ein neues ASP.NET MVC4 Projekt erstellt und per NuGet die Twitter.Bootstrap Dateien gezogen und daraus ein neues Projekttemplate erstellt, in dem ich alle Standardseiten sowie die T4 Templates auf die CSS Dateien von Twitter.Bootstrap umgestellt habe.

Das Template kann man hier herunterladen werden und wie man ein Template in VS 2012 einbindet findet Ihr hier. In der Projektvorlage befindet sich auch noch eine kurze Readme Datei, in der ich kurz beschrieben habe welche Änderungen ich am Projekt vorgenommen habe.

(Aktuell gibt es noch Probleme mit dem von mir erstellten Template, hier arbeite ich an einer Lösung, daher würde ich bei Interesse empfehlen einfach das Projekt auf Codeplex herunterzuladen. Ich habe jetzt noch eine alternative Zip Datei hinterlegt die das komplette Projekt umfasst inkl. NuGet Packages, welches einfach gestartet werden kann “MVC4.Twitter.Bootstrap – Project (only unzip and use – NO TEMPLATE).zip” dann einfach diese Datei nutzen.)

Als nächstes will ich noch kurz zeigen, wie ich das Template angepasst habe und auf welche Tools ich zurückgreife.

Meine Vorgehensweise zum Erstellen des Bootstrap Templates

Als erstes einfach ein neues MVC4 Projekt anlegen und dann die T4 CodeTemplates in das Projektverzeichnis kopieren. Die T4 CodeTemplates für MVC4 befinden sich für C# in dem Folgenden Ordner:

C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\IDE\ItemTemplates\CSharp\Web\MVC 4/

hier muss der Ordner “CodeTemplates” einfach in das Basisverzeichnis der Anwendung kopiert werden. Wenn die T4 CodeTemplates in der Anwendung hinterlegt sind, dann werden beim Anlegen einer “Stark typisierte Ansicht” und beim Nutzen der passenden “Gerüstvorlage” (T4 Template) die Templates aus dem Projektverzeichnis als Basis verwendet.

imageimage

Damit die T4 Dateien im VS 2012 nicht nur wie simple Textdateien aussehen, sondern mit Syntaxhighlighting versehen werden, muss ein zusätzlichen Tool installiert werden. Ich habe hier z.B. tangible T4 Editor verwendet. Mit diesem Tool sieht dann eine *.tt Datei wieder wie “gewohnt” aus:

image

Danach konnte ich dann alle T4 Vorlagen anpassen und die passenden Bootstrap CSS Dateien einbinden. Hier handelt es sich nur um einen einfachen Vorschlag, der von jedem selbst angepasst werden kann.

Die Twitter.Bootstrap Dateien werden per NuGet herunterladen, dazu gehören die folgenden Twitter.Bootstrap Projekte:

  • Twitter.Bootstrap, aktuelle Version=2.0.4.1
  • Twitter.Bootstrap.Less, aktuelle Version=2.0.4

Da Ich ebenfalls die Twitter.Bootstrap.less Files per NuGet heruntergeladen und im Projekt mit eingebunden habe, muss noch der Editor angepasst werden. Damit man die *.less Dateien fast wie im normalen CSS Editor betrachten kann, muss folgende Einstellung am VS vorgenommen werden unter “EXTRAS->Optionen”:

image

die *.less Erweiterung muss dem CSS Quellcode Editor zugeordnet werden. Diese werden dann immer noch nicht 100%ig fehlerfrei angezeigt, aber es funktioniert Syntaxhighlighting und IntelliSense in den less Dateien.

Code und Projektanpassungen

Ich habe dem Projekt noch eine Custom Extension für das ValidationSummary “MyValidationSummary” hinzugefügt, damit die Fehlermeldungen im Twitter.Bootstrap Style angezeigt werden können. Außerdem habe ich die less Dateien erweitert um eine “_myCss.less” Datei unter “Content\less\_myCss.less”, hier werden die Bootstrap less Dateien eingebunden und wir können auf alle Variablen und Bezeichner der less Dateien vom Bootstrap zugreifen. Damit bleibt das NuGet Package Twitter.Bootstrap.Less updatefähig und wie können eigene Änderungen mit einbringen.

Update 08.08.2012:

Eigene JavaScript Erweiterung hinzugefügt, mit der es einfach möglich ist auch die Bootstrap Icons zu nutzen, wie genau ist im Projekt selbst beschrieben.

Update 23.09.2012:

Das Codeplex Projekt auf Twitter.Bootstrap 2.1.1 aktualisiert.

Quellen:

http://blogs.msdn.com/b/webdev/archive/2009/01/29/t4-templates-a-quick-start-guide-for-asp-net-mvc-developers.aspx

Mein Beispielprojekt “Mvc4Twitter.Bootstrap” gibt es auch auf CodePlex

Ich habe auch für dieses Beispiel ein Projekt auf CodePlex angelegt, welches man folgendermaßen finden kann:

https://squadwuschel.codeplex.com/

Dann unter “Source Code” –> “Browse” –> “MVC” –> “Mvc4Twitter.Bootstrap”

Hier könnt Ihr den kompletten Quelltext finden.

Wenn jemand einen Fehler im Template findet oder ich weitere Anpassungen vornehmen soll, dann bitte einfach hier per Kommentar melden.

Advertisements

4 Gedanken zu „VS 2012–MVC4 Twitter.Bootstrap Template (C# & Razor)

  1. herzmeister

    Warum musst du da mit den T4 CodeTemplates rumwurschteln? Was wird da genau anders generiert? Kann man nicht alles, was man braucht, in ein anderes Layout (etwa alternativ zu Views/Shared/_Layout.cshtml) packen?

    Gefällt mir

    Antwort
  2. SquadWuschel Autor

    die T4 CodeTemplates werden benutzt wenn du einen neuen „stark typisierten View“ anlegst. Damit du da nicht anfängst und alles selbst angeben musst dienen hier die T4 Templates als Grundlage. Probiere es einfach aus erstelle ein Model und dann generiere einen Stark typisierten View damit z.b. Create.

    Die T4 Templates sind auch nur an den Bootstrap Code angepasst, den ich hier benutzte, wenn du hier ein anderes Layout nutzt für z.b. die Tabellen, dann musst du die selbst an deine Bendürfnisse anpassen. Wenn du nicht genau Weißt wofür die CodeTemplates in MVC benutzt werden evtl. mal hier gukken:

    http://blogs.msdn.com/b/joecar/archive/2011/01/06/add-the-asp-net-mvc-3-code-templates-to-your-application-with-nuget.aspx

    http://blogs.msdn.com/b/webdev/archive/2009/01/29/t4-templates-a-quick-start-guide-for-asp-net-mvc-developers.aspx

    Gefällt mir

    Antwort
  3. herzmeister

    jo, ich weiß, was T4 macht, und wo die Templates normalerweise liegen, und wollte wissen, was du *anders* machst, quasi ein *diff*, um die Rechtfertigung des Aufwands abzuschätzen, diese Templates in jedem eigenen Projekt separat pflegen zu müssen. Anscheinend änderst du lediglich diverse div styles wie class=“btn btn-small“ und sowas. Sowas hätte ich stattdessen gerne von außen als Standard festgelegt.

    Gefällt mir

    Antwort
  4. SquadWuschel Autor

    der Aufwand lohnt sich meiner Meinung dann, wenn man ein größeres Projekt hat in dem man z.b. sehr viele Bearbeiten Views oder Listen hat die meist gleich oder sehr ähnlich aufgebaut sind. Man baut sich ja auch meist ein Layoutemplate mit dem man später seine einzelnen Seiten aufbaut. Ich mache es aber auch bereits bei kleineren Projekten, da die Templates sehr schnell angepasst sind und dann immer die passende Grundlage für eine neue Seite bieten, ohne viel eigenaufwand.

    Wenn du also viel mit Typisierten Views arbeitest, da du viele Eingabeformulare hast, dann brauchst du qausi nur noch das Model bauen und die passende Seite mit allen Eingabefeldern ist dann in nur ein paar Sekunden umgesetzt.

    Bestes beispiel ist hier z.B. ich habe mein altes MVC3 Projekt was noch nicht mit Twitter.Bootstrap umgesetzt war in MVC4 überführt und mit Twitter.Bootstrap umgesetzt. In diesem Projekt waren eine Menge Views enthalten die Daten erstellt, bearbeitet oder auch nur angezeigt haben. Hätte ich hier jeden einzelnen View angepasst, hätte ich da die 4 bis 5 Fache Zeit benötigt, aber so habe ich die alten Views einfach „gelöscht“ und einen neuen View angelegt mit dem passenden Template und Model und schon waren alle Eingabefelder so verpackt wie man sie benötigte und es mussten nur minimale Änderungen vorgenommen werden. Den Aufwand merkst du meist erst wenn du mal so 10 oder mehr Eingabefelder in einem Formular hast.

    Außerdem verstehe ich nicht ganz was du mit „Sowas hätte ich stattdessen gerne von außen als Standard festgelegt“ meinst oder wie du dir die Umsetzung vorstellt, denn genau das machen meiner Meinung nach die T4 Templates.

    Gefällt mir

    Antwort

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s