Das Beispiel mit der Validierung zeigt, dass es wichtig ist auch im Browser eine kurze Reaktionszeit der UI zu haben. Also hat man begonnen nicht nur Validierung im Browser, sondern ganze Anwendungslogiken abzubilden. Für den Benutzer sieht es dann so aus, als würde er sich nur auf einer Seite befinden. Im Zuge sog. Single-Page Application kommt man schnell an den Punkt, an dem man eine Navigationsmöglichkeit von “Seite zu Seite” benötigt. Im klassischen ASP.NET MVC hat man einfach einen Link/Controller aufgerufen, der auf eine neue Seite gesprungen ist. Dadurch wurde immer ein Request an den Server durchgeführt, der die neue Seite gerendert und zurückgeliefert hat.
Bei der Single Page Application hat man allerdings alle “Seiten” in einer HTML-Seite. Die Inhalte der “Seiten” sind in der Regel in div-Elemente gekapselt und werden über einen Mechanismus sichtbar und/oder unsichtbar geschaltet.
Über dieses Schalten der Sichtbarkeiten kann man nun seine Navigation abbilden. Die Frage ist nur wie?

Sammy to the Rescue

Sammy ist ein kleines JavaScript Framework, das den URL-Hash (#) benutzt, um darüber eine Navigation abzubilden. Jeder der mit dem MVC-Framework arbeitet ist bestimmt schon mal über das Konzept der Routen gestoßen. Dieses Konzept findet sich auch in Sammy wieder. Mit Sammy kann man Routen und dazugehörige Aktionen definieren. Wird eine URL aufgerufen, die mit einer konfigurierten Route übereinstimmt, wird die entsprechende Aktion aufgerufen. Beispiel:

1: this.get('#:page', function () { 

2:     var page = this.params.page; 

3:     alert(page); 

4: });

Ruft man im Browser nun folgende URL http://www.mypage.de/#About auf, so trifft diese unsere Route und es wird “About” in einer Message-Box ausgegeben.
Komplettes Beispiel:

1: // Client-side routes 

2: Sammy(function () { 

3:     this.get('#:page', function () { 

4:         var page = this.params.page; 

5:         alert(page); 

6:         // Hide all divs 

7:         // Show div that hold the Page
                        Content 

8:     }); 

9:     // Start initial Page 

10:     this.get('', function () { 

11:         this.app.runRoute('get', '#Startpage'); 

12:     }); 

13: }).run(); 

Wie man sieht, nutzt Sammy das Hash-Tag (#), um seine Navigation zu verwalten. Damit ist es auch möglich im Browser den Vor- und Zurückbutton zu verwenden. Der Browser navigiert dadurch nicht auf die zuletzt besuchte Internetseite, sondern auf die zuletzt sichtbare “Seite” in der Single-Page Application.