Erster Eindruck von ASP.NET MVC mit dem Visual Web Developer Express

Die ASP.NET Extension CTP ist schon eine kleine Weile verfügbar, jedoch bin ich erst heute dazu gekommen, mir dies mal anzuschauen.

Da ich auf meinem privat Notebook kein Visual Studio 2008 Standard (oder höher) hab, benutze ich den Visual Web Developer 2008 (was wahrscheinlich bei vielen Leuten zutrifft).

Vorbereitung: 

ASP.NET 3.5 Extensions installieren und Visual Web Developer Web Site “MVC tauglich” machen

Nachdem man die CTP installiert hat, findet man im Visual Web Developer zwar eine Vorlage für “ASP.NET 3.5 Extensions Web Site”, allerdings unterstützt die CTP momentan nur Web Projects – daher nützt uns das nur sehr wenig.

Eine Installationsanleitung befindet sich hier. Insbesondere muss man da auch die Kommentare lesen, dann wird es klarer. Aber nochmal zusammengefasst:

  • web.config unter dem Punkt “system.web”-”pages” anpassen:
         <namespaces>
            <add namespace="System.Web.Mvc"/>
            <add namespace="System.Linq"/>
         </namespaces>

(warum weiß ich auch noch nicht so genau, das bekommen wir bestimmt noch raus ;) )

  • global.asax und Default Routing unter “Application_Start()” hinzufügen:
    void Application_Start(object sender, EventArgs e)
    {
        RouteTable.Routes.Add(new Route
        {
            Url = "[controller]/[action]/[id]",
            Defaults = new { action = "Index", id = (string)null },
            RouteHandler = typeof(MvcRouteHandler)
        }); 

    }
  • Ordnersturktur anpassen:

image

Erklärung: Unter “App_Code” befinden sich unsere Controller und Models, die Views kommen ins Root Verzeichnis.

Die Default.aspx im Rootverzeichnis ist komplett leer.

Der Ordner “Shared” ist für Masterpages, User Controls etc. gedacht.

Mein .ASPX Seiten haben kein Codefile mehr, sondern erben direkt von “System.Web.Mvc.ViewPage”, z.B.:

<%@ Page Language="C#"     MasterPageFile="~/Views/Shared/Site.master"     AutoEventWireup="true"     Inherits="System.Web.Mvc.ViewPage"    Title="Bookstorage | Search" %>

Die Masterseite ist normal, enthält aber kein “form” Tag und auch keinen ScriptManager für ASP.NET AJAX – da müsste man nochmal genau nachschauen wie  man das geschickt macht (darauf komme ich später nochmal).

Die Webapplikation strukturieren

Insgesamt ist die Website sehr simpel gehalten, daher bitte nicht wundern.

Das Model

Es gibt eine einfache “Book” Klasse sowie eine Klasse “BookCollection”, welche von “List<Book>” erbt.
Der “BookCollectionManager” hat eine Methode “GetBookCollection”, welche einfach so eine Collection zurückgibt.

Die Controller

Der HomeController macht nix großes bzw. sieht man das auch gut am SearchController wie ich diesen aufgebaut habe:

public class SearchController : Controller
{

    [ControllerAction]
    public void Index()
    {
        RenderView("Index");
    }

    [ControllerAction]
   public void Results(string query)
   {
        BookCollectionManager man = new BookCollectionManager();
        BookCollection data = man.GetBookCollection(query, 1);
        ViewData["BookCollection"] = data;
        RenderView("Results");
   }
}

In dem Controller geibts einmal den Index (der laut unserer Routingtabelle in der globals.asax der Default Controller ist) und sagt nur, dass er den View “Index(.aspx)” Rendern soll. Dabei sucht er genau in dieser Ordnerstruktur nach “Search” etc.

Unsere “Results” Methode ist eigentlich unsere Suchmethode und spricht unser Backend (was einfach nur eine Collection an 25 Einträgen zurück gibt) an. Die Daten werden dann in ViewData gespeichert und autoamtisch übergeben. Scott hat auch noch andere Methoden beschrieben – dies war erstmal die Einfachste. Dannach wird der View “Results” gerendert.

Daten an den Controller übergeben

Zwar haben wir jetzt unseren Controller, aber wie übergeben wir diesem was?

Ganz einfach über ein HTML Formular:

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolderContent" Runat="Server">
<form id="searchform" action="/Intro/Search/Results" method="post">
    <span>Search:</span>
    <input type="text" name="query" />
    <button type="submit">Suchen</button>
</form>

</asp:Content>

Die Form verweisst auf unsere “Results” Methode – wichtig dabei ist, dass der name des übergebenen Parameter mit dem der Methode übereinstimmt. Dies stößt unseren Controller an, welcher dann wiederrum den View rendert.

Problem mit ASP.NET AJAX:
Hier will ich nochmal kurz mein Problem mit dem ScriptManager erläutern. Da ich in der Masterpage kein “form” hab (wie im normalen ASP.NET) üblich, sondern es nur dort einsetzen möchte, wo ich es für sinnvoll halte (wie z.B. hier) und die action URL je nachdem darauf ausrichten möchte, gibt es leider ein Problem mit ASP.NET AJAX.
Dadurch kann man den ScriptManager nur unschön in die MasterPage hinzufügen, da dieser ein “<form runat=”server”>… verlangt. Eine Lösung gibt es bestimmt (vielleicht über das MVCToolkit) oder man fügt den ScriptManager auf den Seiten hinzu, wo man ihn benötigt. 2 Formuale (eine in der Masterpage & eine auf der Contentpage) ist irgendwie “unschön”, aber da müsste man nochmal nachschauen. Microsoft macht sich selbst auch Gedanken und ich denke, da kommt noch eine bessere Integration insgesamt, weil man zwar den ScriptManager einsetzen könnte, aber dann wiederrum die Controller etc. übergeht – und das ist ja nicht Sinn der Sache.

Die übergebenen Daten darstellen

In jedem View benutze ich meine simple Masterpage, daher ist dies der wesentliche Code in der “Result.aspx”:

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolderContent" Runat="Server">
Search Results:

<table>
<%foreach (var returnBook in (BookCollection)ViewData["BookCollection"])  { %>
<tr>
    <td><%= returnBook.Title %></td>
    <td><%= returnBook.Description %></td>
    <td><%= returnBook.PicUrl %></td>
</tr>
<% } %>
</table>
</asp:Content>

Über “ViewData["BookCollection"]” greife ich auf meine Daten zu und gebe sie einfach so aus. Ob nun “var” (also ein anonymer Typ) da richtig ist, weiß ich noch nicht ganz ;) , es funktioniert jedenfalls:

image

Das Demoprojekt testen/download & Fazit

Startet nicht das Projekt wenn ihr gerade die ASPX Seiten geöffnet habt, da dann z.B. bei der Result.aspx eine Exception geworfen wird ;) – öffnet die leere Default.aspx und gebt dann manuell die jeweiligen URLs (siehe oben) ein.

Wenn man sich erstmal eingearbeitet hat, macht es sehr viel Freude, zu sehen, dass man diesmal volle Kontrolle über den HTML Code hat und es (jedenfalls für mich) klarer ist, wie man bestimmte HTML Elemente dynamisch rendert. Das es noch hier und da (ASP.NET AJAX) Schwierigkeiten gibt, ist natürlich bei so einer Preview verständlich.
Dies waren auch nur meine ersten Schritte, sodass ich wahrscheinlich noch nicht alles optimal gemacht habe ;)

[ Download Source Code ]

HowTo: PDF’s erstellen unter .NET mit NFop

Wenn man ein PDF erstellen möchte, hat man die Auswahl zwischen vielen kommerziellen Produkten für .NET - mit NFop möchte ich mal eine kostenlose Möglichkeit vorstellen.
NFop ist eine Portierung der Open Source Java Anwendung FOP auf .NET und dank J# kann der Quellcode auch direkt unter dem .NET Framework kompiliert werden. NFop wandelt XML Formatting Objects (XML-FO) Dokumente in PDF Dateien um. In der Regel erzeugt man die XML-FO Dokumente mit Hilfe von XSLT aus einem XML.

.NET Anwendung -> XML + XSLT -> XML-FO -> PDF

Durch Austauschen des XSLT’s kann man so einfach die Formatierung ändern, ähnlich wie bei HTML und CSS. Wie man aus seinem Datenbestand ein XML generieren kann finden sie hier.

Weil ich den NFop Code nicht ändern wollte habe ich die DLL einmal erstellt und dann in mein Projekt eingebunden. Für dieses Beispiel muss man zusätzlich noch die vjslib einbinden. Wenn man raus gefunden hat welche Namespaces man einbinden muss geht das Erstellen des PDF’s mit wenigen Zeilen Code. Weil ich das Beispiel übersichtlich halten wollte habe ich auf XSLT verzichtet und nur das XML-FO Beispiel von Wikipedia benutzt.

using java.io;
using org.xml.sax;
using org.apache.fop.apps; 

namespace XmlToPdf
{
    class Program
    { 

        static void Main(string[] args)
        {
            //erstellen eines einfachen PDFs
            ConvertFoDocument("helloworld.fo", "helloworld.pdf", Driver.RENDER_PDF);
        } 

static void ConvertFoDocument(string foFile, string pdfFile,int outputType)
        {
            FileInputStream input = new FileInputStream(foFile);
            InputSource source = new InputSource(input);
            FileOutputStream output = new FileOutputStream(pdfFile); 

            Driver driver = new Driver(source, output);
            driver.setRenderer(outputType);
            driver.run(); 

            output.close();
        } 

    } 

}

die helloworld.fo

<?xml version="1.0" encoding="utf-8"?>
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
  <fo:layout-master-set>
    <fo:simple-page-master  master-name="A4"
                            page-width="210mm" page-height="297mm">
      <fo:region-body region-name="xsl-region-body"  margin="2cm"/>
    </fo:simple-page-master>
  </fo:layout-master-set>

  <fo:page-sequence  master-reference="A4">
    <!-- (in Versionen <2.0 "master-name") -->
    <fo:flow flow-name="xsl-region-body">
      <fo:block>Hallo Welt!</fo:block>   
    </fo:flow>
  </fo:page-sequence>

</fo:root>

Resultat:
Als Ergebniss bekommt man ein PDF mit “Hello World!”.

Den kompletten Beispielcode kann man hier herunterladen:
XmlToPdf Projekt

HowTo: Json-Services erstellen (…oder wie erstell ich dynamisch Javascript?…oder Web 2.0 ohne AJAX?)

JSON (oder Javascript Objekt Notation) ist besonders für Webanwendung eine sehr gute Alternative zu XML. Auf Javascript mit Xml zugreifen geht (siehe HowTo), ist aber nicht unbedingt schön.
In Zeiten von (XML) Webservices und AJAX steht man dabei aber vor einem Problem: Wie bekomm ich etwas in einem Json Format? Gibts ein Serialisierer?

Ja, gibts – sogar direkt von Microsoft – die ASP.NET 2.0 AJAX Extensions oder ASP.NET 3.5.

Was wollen wir eigentlich erreichen?

Wie man einen ASP.NET Webservice dazu bringt Json zu generieren, wurde hier bereits beschrieben (einfach über die Webmethod das ResponseFormat angeben), was wir aber wollen ist ein direkter “Json Service” welchen man direkt als Javascript Datei mit ins Projekt einbinden über den üblichen Syntax: <script src=”…” …>…</script>
Ein anderer Punkt ist folgender: AJAX ist schön und gut – aber mal ehrlich: Jedes mal einen Request losschicken nur weil man ein paar Daten mehr haben möchte? Warum das nicht direkt in einem Rutsch laden? Mit Json ist eine wesentlich schnellere Datenübertragung möglich als mit AJAX:

In einem Projekt mit einer Datenbank wo über 1000 Produkte samt Beschreibungstexte drin stehen, sowie Preise, Bewertungen etc. wurden alle Daten direkt auf den Client übertragen und diese Datei war nur 300kb groß (mit Kompression sogar nur 150kb!)- jedes Bild ist heutzutage größer.

Was bringt das nun?

Web 2.0 ohne AJAX – warum kleine Datenmengen immer über einen umständlichen XmlHttpRequest nachladen, wenn es reichen würde die Daten einmal komplett als Json zu ziehen – das ist wesentlich trafficsparender und ermöglicht es alle Daten ohne nervige AJAX Ladebalken oder ähnliches anzuzeigen.

Da Json nur Javascript ist…

Zur eigentlichen Frage: Wie kann ich Javascript dynamisch erstellen?

Schritt 1: ASP.NET AJAX Projekt anlegen

Wir legen uns ein einfaches ASP.NET AJAX Projekt an und haben dann diese Struktur:

image

In unserer Default.aspx wollen wir unsere generierte Json Datei später einbinden.

Schritt 2: Demodaten vorbereiten

Zur Demonstration wollen wir einfach ein paar Kontaktdaten (”Contacts” & “Address”) nehmen. Da wir keine Datenbank haben, simulieren wir einfach 500 Kontakte über den “ContactManager”, welcher 500 Contacts erstellt und als “List<Contact>” zurück gibt.

image

Klassenstruktur (Verschachtelte Struktur beachten) :

image

Schritt 3: Generischer Handler implementieren – dyamischer Javascript Generator

Oft übersehen aber in diesem Fall äußerst praktisch:

image

Da wir eine Javascript Datei dynamisch erstellen wollen, brauchen wir kein Markup (aspx/html) oder ein Webdienst (asmx). Die Lösung: Eine ASHX.

Source Code “ContactJsonService”

    public class ContactJsonService : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            ContactListManager manager = new ContactListManager();

            JavaScriptSerializer serializer = new JavaScriptSerializer();
            string output = "var ContactList = " + serializer.Serialize(manager.GetAllContacts());

            context.Response.ContentType = "application/json";
            context.Response.Write(output);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

Die HTTP Anfrage kommt rein und alles was wir machen ist den Content uns selber zusammenstellen – daher wird auch nur das ausgegeben was wir wollen und kein unnötiges Markup. Als ContentType geben wir hier nun noch “application/json” an – aber eigentlich ist das egal.

Wichtig: “var ContactList = ” muss angegeben werden, damit man später auf das Json zugreifen kann. Ein verschateltes Json, so wie wir es wollen findet man auch auf json.org gut erklärt.
Der JavaScriptSerializer ist im Namespace “System.Web.Script.Serialization” welche sich in der Assembly “System.Web.Extensions” (also ASP.NET AJAX / ASP.NET 3.5) befindet.

Schritt 4: Unsere dynamische JS Datei einbinden

Auf unserer Default.aspx können wir nun einfach die ASHX einbinden:

    <script src="ContactJsonService.ashx" type="text/javascript" language="javascript"></script>

Und schon haben wir Zugriff auf das JS Objekt:

image

Und erstellen daraus unsere dynamische Liste welche direkt im onload aufgerufen wird:

    function create()
    {
        for(i=0; i<ContactList.length; i++)
        {
        var newLi = document.createElement("li");
        newLi.innerHTML = ContactList[i].Name;
        $get("list").appendChild(newLi);
        }
    }

Was sagt die Ladezeit?

Mit 54kb und 1 Sekunde Ladezeit auf einem Development Server (ein richtiger IIS ist schneller und mit Kompression kann man es nochmal verbessern) hat man 500 Datensätze da und kann die über Javascript anschauen wie man möchte – ohne weitere Ladezeiten!

image

Fazit:

Das Implementieren eines Json Services ist nicht schwer – man muss aber beachten, dass es nur dort Sinn macht, wo der Datenbestand sich nicht jede Sekunde / Minute verändert, weil man den Browser nicht dazu veranlassen kann die Daten neu zu ziehen,jedenfalls nicht direkt über diese Einbindung.

Bei den meisten Sachen ist dies aber auch gar nicht nötig. Bei einem Shop zum Beispiel könnte man den Produktkatalog einmal direkt auf den Client über dieses Technik schieben und könnte diese dann anschauen und in der Darstellung verändern ohne weitere Ladezeit, was bei AJAX so nicht möglich ist.
Der Produktkatalog wird sich immerhin nicht ständig ändern und sobald der Nutzer wieder auf die Seite geht, wird eine aktuelle Datei gezogen.

Wenn man nur “readonly” die Daten anders Darstellen will (Eine Listenansicht, eine Detailansicht etc.) kann man dies ohne AJAX machen und dadurch, dass man keine Requests los schickt, auch wesentlich performanter dies realisieren.

Das sowas auch in der Praxis geht, zeigt dotnetkicks.com mit seinem JsonService.

 

[ Download Source Code | Demoanwendung ]

HowTo: Javascript Mouse Over – Mousepositionen für Details

Der Effekt ist eigentlich wohl bekannt und wir bei vielen Javascript Bibliotheken angeboten: Mouse Over Effekte. So werden z.B. Details oder weitere Informationen nachgeladen, sobald man mit dem Mousecursor über dem Element ist.

Doch bei einer solch einfachen Funktion ist ein komplettes Javascript Framework wie mit Kanonen auf Spatzen zu schießen, daher nun ein kleines HowTo wie man das selber in 5 Minuten implementieren kann:

Schritt 1: Grundgerüst erstellen

<body> 

    <h1>Javascript Mouse Over</h1> 

    <div id="MouseOver" style="display: none;"></div> 

<p onmousemove="showMouseOver('Mouse Over Text... Test...', event)"
onmouseout="hideMouseOver()">[Mouse Over]</p> 

    <p>...</p> 

</body>

In unserem Body Element ist ein Div namens “MouseOver” definiert, in welchen später unsere Mouseover Text drin ist. Danach folgt etwas Beispieltext, in welchen ich bestimmte Wörter über Javascript mit unserem kleinen Javascript verknüpft hab (onmousemove = anzeigen des Textes, onmouseout = verstecken des MouseOver Divs).

Schritt 2: Style hinzufügen

Als Style haben wir nur unser MouseOver etwas gestaltet:

    <style type="text/css"> 

        #MouseOver 

        { 

        border: solid 1px black; 

        position: absolute; 

        background-color: #FFF; 

        } 

    </style>

Dabei ist eigentlich nur das “position: absolute” wichtig.

Schritt 3: Javascript hinzufügen

Jedes Tag kann über “showMouseOver” einen Text übergeben und das Schlüsselwort event um auf die Mausposition zuzugreifen (dies hatte ich bei diesem HowTo nicht berücksichtig – dort wird der Eventhandler programmatisch zugeordnet, was aber nicht notwenig ist). Bei onmouseout muss dieser Detailtext wieder ausgeblendet werden – über “hideMouseOver”.

  • Javascript Funktionen:
    • onmousemove=showMouseOver(”text”, event)
    • onmouseout=hideMouseOver()

Javascript Code:

function showMouseOver(text, event) 

    { 

     document.getElementById('MouseOver').innerHTML = text; 

     var topPixel = event.clientY + 10; 

     var leftPixel = event.clientX + 10; 

     document.getElementById('MouseOver').style.top = topPixel + "px"; 

     document.getElementById('MouseOver').style.left = leftPixel + "px"; 

     document.getElementById('MouseOver').style.display = "block"; 

    }
function hideMouseOver() 

    { 

     document.getElementById('MouseOver').innerHTML = ""; 

     document.getElementById('MouseOver').style.top = "0px"; 

     document.getElementById('MouseOver').style.left = "0px"; 

    document.getElementById('MouseOver').style.display = "none"; 

    }

Über das Schlüsselwort “event” kann auf die Mauspositionsdaten zugegriffen werden – über clientX und clientY wird dann unser MouseOver Div positioniert und über innerHTML mit dem jeweiligen Text befüllt. Dabei werden bei der Positionierung nochmal 10 Pixel zugerechnet, da es a) designtechnisch besser ist und b) sonst die “mouseout” Funktion aufgerufen wird.

Bei hideMouseOver wird das MouseOver Div “geleert” und wieder versteckt.

image

Diese Technik funktioniert im IE7 und Firefox2 ohne Probleme – andere Browser müssten auch keine Probleme bringen. Hoff ich ;)

Viel Spaß…

[ Download Source Code & Demoanwendung ]

Microsoft AJAX + Amazon + Windows Live Bildersuche Style = ShoppingMap

Ich hab mich mal hingesetzt und das was ich in den ganzen HowTos alles berichtet habe, mal praktisch umzusetzen. Hier sind alle Informationen samt Source Code:

ShoppingMap