22 January 2010 ASP.NET MVC, HowTo, Linking, SEO Robert Muehsig

imageASP.NET MVC brachte ein neues Feature mit: Das Routing. Dieses Feature erlaubt es, dass man ohne Zusatzlibraries sich seine SEO URLs zusammenbauen kann, ohne auf die physische Ordnerstruktur rücksicht zu nehmen. Das kann aber zu Problemen führen wenn man Javascript, Bilder oder CSS Datein einbinden möchte. Warum und was es da für schöne Helper gibt, möchte ich in diesem HowTo kurz zeigen.

Das Standard ASP.NET MVC Projekttemplate

image

Das Standard ASP.NET MVC Projekttemplate sieht so aus. Angedacht für CSS ist der Content Ordner. Für Javascript wurde der Scripts Ordner ausgesucht. Natürlich kann man seine "Content" Datein speichern wo man mag, aber das soll nur als Beispiel dienen.

Wie in ASP.NET "gewohnt" wird nun der Entwickler einfach die Datein nehmen und auf die Masterpage per Drag-n-Drop ziehen.

 

 

 

 

Das ist dabei das Resultat:

    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
    <script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>

Das funktioniert auch...

image

Die Falle: Routing

Wir möchten nun angenommen die Routing Funktion nutzen und bauen uns eine einfache Action:

        public ActionResult Blog(string year, string month, string day)
        {
            ViewData["Message"] = year + " " + month + " " + day;

            return View("Index");
        }

Am Ende wollen wir so eine URL ermöglichen (z.B. bei einem Blog etc.) http://localhost:49656/Home/Blog/2010/01/21

Das ganze setzt man in die Global.asax, wo das Routing definiert wird:

            routes.MapRoute("Calendar",
                            "Home/Blog/{year}/{month}/{day}",
                            new { controller = "Home", action = "Blog"});
            

Das ganze rendert auch im Browser, allerdings werden die Javascript Files nicht geladen:

image

Das Problem ist: Die relative Verlinkung

image

Die original Datei liegt unter localhost/Scripts/jquery-1.3.2.min.js!

Fehlerbehebung: Die Helper

Über URL.Content kann man sehr einfach "statischen" Content einbinden. Der Helper prüft dabei von wo aus die Anfrage kommt und passt so die Verlinkung an:

    <link href="<%=Url.Content("~/Content/Site.css") %>" rel="stylesheet" type="text/css" />
    <script src="<%=Url.Content("~/Scripts/jquery-1.3.2.min.js") %>" type="text/javascript"></script>
    <script src="<%=Url.Content("~/Scripts/MicrosoftAjax.js") %>" type="text/javascript"></script>
    <script src="<%=Url.Content("~/Scripts/MicrosoftMvcAjax.js") %>" type="text/javascript"></script>

image

Meidet "feste" URL Angaben. Versucht immer über die Helper zu gehen um die URL dynamisch zu erzeugen. Wenn sich das Routing mal ändern sollte, ist man auf der sichern Seite.

[ Download Democode ]


Written by Robert Muehsig

Software Developer - from Dresden, Germany, now living & working in Switzerland. Microsoft MVP & Web Geek.
Other Projects: KnowYourStack.com | ExpensiveMeeting | EinKofferVollerReisen.de

If you like the content and want to support me you could buy me a beer or a coffee via Litecoin or Bitcoin - thanks for reading!