Freigeben über


URL-Routing

von Erik Reitan

Wingtip Toys Sample Project (C#) herunterladen oder E-Book herunterladen (PDF)

In dieser Lernprogrammreihe lernen Sie die Grundlagen der Erstellung einer ASP.NET Web Forms-Anwendung mithilfe von ASP.NET 4.5 und Microsoft Visual Studio Express 2013 für Web kennen. Für diese Lernprogrammreihe steht ein Visual Studio 2013-Projekt mit C#-Quellcode zur Verfügung.

In diesem Lernprogramm ändern Sie die Wingtip Toys-Beispielanwendung, um das URL-Routing zu unterstützen. Mithilfe von Routing kann Ihre Webanwendung URLs verwenden, die benutzerfreundlicher, einfacher zu merken sind und von Suchmaschinen besser unterstützt werden. Dieses Lernprogramm baut auf dem vorherigen Lernprogramm "Mitgliedschaft und Verwaltung" auf und ist Teil der Lernprogrammreihe Wingtip Toys.

Was Sie lernen:

  • Registrierung von Routen für eine ASP.NET Web Forms-Anwendung
  • Hinzufügen von Routen zu einer Webseite
  • So wählen Sie Daten aus einer Datenbank aus, um Routen zu unterstützen.

Übersicht über ASP.NET Routing

Mit dem URL-Routing können Sie eine Anwendung so konfigurieren, dass Anforderungs-URLs akzeptiert werden, die nicht physischen Dateien zugeordnet sind. Eine Anforderungs-URL ist einfach die URL, die ein Benutzer in seinen Browser eingibt, um eine Seite auf Ihrer Website zu finden. Sie verwenden Routing, um URLs zu definieren, die semantisch für Benutzer aussagekräftig sind und die bei der Suchmaschinenoptimierung (SEO) helfen können.

Standardmäßig enthält die Webformularvorlage ASP.NET Benutzerfreundliche URLs. Ein Großteil der grundlegenden Routingarbeit wird mithilfe von benutzerfreundlichen URLs implementiert. In diesem Lernprogramm fügen Sie jedoch benutzerdefinierte Routingfunktionen hinzu.

Vor dem Anpassen des URL-Routings kann die Wingtip Toys-Beispielanwendung mithilfe der folgenden URL mit einem Produkt verknüpft werden:

https://localhost:44300/ProductDetails.aspx?productID=2

Durch anpassen des URL-Routings wird die Wingtip Toys-Beispielanwendung mit demselben Produkt verknüpft, indem eine einfacher zu lesende URL verwendet wird:

https://localhost:44300/Product/Convertible%20Car

Routen

Eine Route ist ein URL-Muster, das einem Handler zugeordnet ist. Der Handler kann eine physische Datei sein, z. B. eine .aspx Datei in einer Webanwendung. Ein Handler kann auch eine Klasse sein, die die Anforderung verarbeitet. Zum Definieren einer Route erstellen Sie eine Instanz der Route-Klasse, indem Sie das URL-Muster, den Handler und optional einen Namen für die Route angeben.

Sie fügen der Anwendung die Route hinzu, indem Sie das Route Objekt zur statischen Routes Eigenschaft der RouteTable Klasse hinzufügen. Die Routes-Eigenschaft ist ein RouteCollection Objekt, das alle Routen für die Anwendung speichert.

URL-Muster

Ein URL-Muster kann Literalwerte und Variablenplatzhalter (als URL-Parameter bezeichnet) enthalten. Die Literale und Platzhalter befinden sich in Segmenten der URL, die durch den Schrägstrich (/) getrennt sind.

Wenn eine Anforderung an Ihre Webanwendung vorgenommen wird, wird die URL in Segmente und Platzhalter analysiert, und die Variablenwerte werden dem Anforderungshandler bereitgestellt. Dieser Vorgang ähnelt der Art und Weise, wie die Daten in einer Abfragezeichenfolge analysiert und an den Anforderungshandler übergeben werden. In beiden Fällen werden Variableninformationen in der URL enthalten und in Form von Schlüsselwertpaaren an den Handler übergeben. Bei Abfragezeichenfolgen befinden sich sowohl die Schlüssel als auch die Werte in der URL. Bei Routen sind die Schlüssel die Platzhalternamen, die im URL-Muster definiert sind, und nur die Werte befinden sich in der URL.

In einem URL-Muster definieren Sie Platzhalter, indem Sie sie in geschweifte Klammern ( { und } ) einschließen. Sie können mehrere Platzhalter in einem Segment definieren, aber die Platzhalter müssen durch einen Literalwert getrennt werden. Beispiel: {language}-{country}/{action} ein gültiges Routenmuster. {language}{country}/{action} Ist jedoch kein gültiges Muster, da es keinen Literalwert oder Trennzeichen zwischen den Platzhaltern gibt. Daher kann Routing nicht ermitteln, wo der Wert für den Sprachplatzhalter vom Wert für den Länderplatzhalter getrennt werden soll.

Zuordnung und Registrierung von Routen

Bevor Sie Routen zu Seiten der Wingtip Toys-Beispielanwendung einschließen können, müssen Sie die Routen registrieren, wenn die Anwendung gestartet wird. Um die Routen zu registrieren, ändern Sie den Application_Start Ereignishandler.

  1. Suchen Sie im Projektmappen-Explorervon Visual Studio die Global.asax.cs Datei, und öffnen Sie sie.

  2. Fügen Sie den gelb hervorgehobenen Code wie folgt zur Global.asax.cs Datei hinzu:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Optimization;
    using System.Web.Routing;
    using System.Web.Security;
    using System.Web.SessionState;
    using System.Data.Entity;
    using WingtipToys.Models;
    using WingtipToys.Logic;
    
    namespace WingtipToys
    {
        public class Global : HttpApplication
        {
            void Application_Start(object sender, EventArgs e)
            {
              // Code that runs on application startup
              RouteConfig.RegisterRoutes(RouteTable.Routes);
              BundleConfig.RegisterBundles(BundleTable.Bundles);
    
              // Initialize the product database.
              Database.SetInitializer(new ProductDatabaseInitializer());
    
              // Create custom role and user.
              RoleActions roleActions = new RoleActions();
              roleActions.AddUserAndRole();
    
              // Add Routes.
              RegisterCustomRoutes(RouteTable.Routes);
            }
    
            void RegisterCustomRoutes(RouteCollection routes)
            {
              routes.MapPageRoute(
                  "ProductsByCategoryRoute",
                  "Category/{categoryName}",
                  "~/ProductList.aspx"
              );
              routes.MapPageRoute(
                  "ProductByNameRoute",
                  "Product/{productName}",
                  "~/ProductDetails.aspx"
              );
            }
        }
    }
    

Wenn die Wingtip Toys-Beispielanwendung gestartet wird, wird der Application_Start Ereignishandler aufgerufen. Am Ende dieses Ereignishandlers wird die RegisterCustomRoutes Methode aufgerufen. Die RegisterCustomRoutes Methode fügt jede Route hinzu, indem die MapPageRoute Methode des RouteCollection Objekts aufgerufen wird. Routen werden mithilfe eines Routennamens, einer Routen-URL und einer physischen URL definiert.

Der erste Parameter ("ProductsByCategoryRoute") ist der Routenname. Es wird verwendet, um die Route bei Bedarf aufzurufen. Der zweite Parameter ("Category/{categoryName}") definiert die benutzerfreundliche Ersetzungs-URL, die basierend auf Code dynamisch sein kann. Sie verwenden diese Route, wenn Sie ein Datensteuerelement mit Verknüpfungen auffüllen, die basierend auf Daten generiert werden. Eine Route wird wie folgt angezeigt:

routes.MapPageRoute(
      "ProductsByCategoryRoute",
      "Category/{categoryName}",
      "~/ProductList.aspx"
  );

Der zweite Parameter der Route enthält einen dynamischen Wert, der durch geschweifte Klammern ({ }) angegeben wird. In diesem Fall handelt es categoryName sich um eine Variable, die verwendet wird, um den richtigen Routingpfad zu bestimmen.

Hinweis

Wahlfrei

Möglicherweise ist es einfacher, Ihren Code zu verwalten, indem Sie die RegisterCustomRoutes Methode in eine separate Klasse verschieben. Erstellen Sie im Ordner "Logik " eine separate RouteActions Klasse. Verschieben Sie die oben genannte RegisterCustomRoutes Methode aus der datei Global.asax.cs in die neue RoutesActions Klasse. Verwenden Sie die RoleActions Klasse und die createAdmin Methode als Beispiel für das Aufrufen der RegisterCustomRoutes Methode aus der Global.asax.cs-Datei .

Möglicherweise haben Sie auch den RegisterRoutes Methodenaufruf mithilfe des RouteConfig Objekts am Anfang des Application_Start Ereignishandlers bemerkt. Dieser Aufruf wird durchgeführt, um das Standardrouting zu implementieren. Sie wurde als Standardcode eingefügt, als Sie die Anwendung mit der Web Forms-Vorlage von Visual Studio erstellt haben.

Abrufen und Verwenden von Routendaten

Wie oben erwähnt, können Routen definiert werden. Der Code, den Sie dem Application_Start Ereignishandler in der datei Global.asax.cs hinzugefügt haben, lädt die definierbaren Routen.

Festlegen von Routen

Routen erfordern, dass Sie zusätzlichen Code hinzufügen. In diesem Lernprogramm verwenden Sie die Modellbindung, um ein RouteValueDictionary Objekt abzurufen, das beim Generieren der Routen mithilfe von Daten aus einem Datensteuerelement verwendet wird. Das RouteValueDictionary Objekt enthält eine Liste von Produktnamen, die zu einer bestimmten Kategorie von Produkten gehören. Für jedes Produkt wird basierend auf den Daten und der Route ein Link erstellt.

Aktivieren von Routen für Kategorien und Produkte

Als Nächstes aktualisieren Sie die Anwendung, um die richtige Route ProductsByCategoryRoute zu ermitteln, die für jeden Produktkategorielink aufgenommen werden soll. Außerdem aktualisieren Sie die ProductList.aspx Seite so, dass sie einen routingierten Link für jedes Produkt enthält. Die Links werden wie vor der Änderung angezeigt, aber die Links verwenden jetzt das URL-Routing.

  1. Öffnen Sie im Projektmappen-Explorer die Seite „Site.Master“, wenn sie noch nicht geöffnet ist.

  2. Aktualisieren Sie das ListView-Steuerelement namens "categoryList" mit den in Gelb hervorgehobenen Änderungen, sodass das Markup wie folgt angezeigt wird:

    <asp:ListView ID="categoryList"  
        ItemType="WingtipToys.Models.Category" 
        runat="server"
        SelectMethod="GetCategories" >
        <ItemTemplate>
            <b style="font-size: large; font-style: normal">
            <a href="<%#: GetRouteUrl("ProductsByCategoryRoute", new {categoryName = Item.CategoryName}) %>">
                <%#: Item.CategoryName %>
            </a>
            </b>
        </ItemTemplate>
        <ItemSeparatorTemplate>  |  </ItemSeparatorTemplate>
    </asp:ListView>
    
  3. Öffnen Sie im Solution Explorerdie Seite ProductList.aspx.

  4. Aktualisieren Sie das ItemTemplate Element der ProductList.aspx Seite mit den gelb hervorgehobenen Updates, sodass das Markup wie folgt angezeigt wird:

    <ItemTemplate>
      <td runat="server">
        <table>
          <tr>
            <td>
              <a href="<%#: GetRouteUrl("ProductByNameRoute", new {productName = Item.ProductName}) %>">
                <image src='/Catalog/Images/Thumbs/<%#:Item.ImagePath%>'
                  width="100" height="75" border="1" />
              </a>
            </td>
          </tr>
          <tr>
            <td>
              <a href="<%#: GetRouteUrl("ProductByNameRoute", new {productName = Item.ProductName}) %>">
                <%#:Item.ProductName%>
              </a>
              <br />
              <span>
                <b>Price: </b><%#:String.Format("{0:c}", Item.UnitPrice)%>
              </span>
              <br />
              <a href="/AddToCart.aspx?productID=<%#:Item.ProductID %>">
                <span class="ProductListItem">
                  <b>Add To Cart<b>
                </span>
              </a>
            </td>
          </tr>
          <tr>
            <td>&nbsp;</td>
          </tr>
        </table>
        </p>
      </td>
    </ItemTemplate>
    
  5. Öffnen Sie den Code-Behind von ProductList.aspx.cs, und fügen Sie den in Gelb hervorgehobenen Namespace hinzu.

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using WingtipToys.Models;
    using System.Web.ModelBinding;
    using System.Web.Routing;
    
  6. Ersetzen Sie die GetProducts-Methode des Code-behind (ProductList.aspx.cs) durch den folgenden Code:

    public IQueryable<Product> GetProducts(
        [QueryString("id")] int? categoryId,
        [RouteData] string categoryName)
    {
        var _db = new WingtipToys.Models.ProductContext();
        IQueryable<Product> query = _db.Products;
    
        if (categoryId.HasValue && categoryId > 0)
        {
            query = query.Where(p => p.CategoryID == categoryId);
        }
    
        if (!String.IsNullOrEmpty(categoryName))
        {
            query = query.Where(p =>
                String.Compare(p.Category.CategoryName,
                categoryName) == 0);
        }
        return query;
    }
    

Hinzufügen von Code für Produktdetails

Aktualisieren Sie nun die Code-Behind-Datei (ProductDetails.aspx.cs) für die Seite ProductDetails.aspx, um Routendaten zu verwenden. Beachten Sie, dass die neue GetProduct Methode auch einen Abfragezeichenfolgenwert für den Fall akzeptiert, in dem der Benutzer über eine Linkmarke verfügt, die die ältere nicht freundliche, nicht routingfähige URL verwendet.

  1. Ersetzen Sie die GetProduct-Methode der Code-Behind-Datei (ProductDetails.aspx.cs) durch den folgenden Code:

    public IQueryable<Product> GetProduct(
            [QueryString("ProductID")] int? productId,
            [RouteData] string productName)
    {
        var _db = new WingtipToys.Models.ProductContext();
        IQueryable<Product> query = _db.Products;
        if (productId.HasValue && productId > 0)
        {
            query = query.Where(p => p.ProductID == productId);
        }
        else if (!String.IsNullOrEmpty(productName))
        {
            query = query.Where(p =>
                  String.Compare(p.ProductName, productName) == 0);
        }
        else
        {
            query = null;
        }
        return query;
    }
    

Ausführen der Anwendung

Sie können die Anwendung jetzt ausführen, um die aktualisierten Routen anzuzeigen.

  1. Drücken Sie F5 , um die Wingtip Toys-Beispielanwendung auszuführen.
    Der Browser wird geöffnet und zeigt die Default.aspx Seite an.
  2. Klicken Sie oben auf der Seite auf den Link "Produkte ".
    Alle Produkte werden auf der ProductList.aspx-Seite angezeigt. Die folgende URL (mit Ihrer Portnummer) wird für den Browser angezeigt:
    https://localhost:44300/ProductList
  3. Klicken Sie als Nächstes auf den Link zur Kategorie "Autos " am oberen Rand der Seite.
    Nur Autos werden auf der ProductList.aspx Seite angezeigt. Die folgende URL (mit Ihrer Portnummer) wird für den Browser angezeigt:
    https://localhost:44300/Category/Cars
  4. Klicken Sie auf den Link, der den Namen des ersten Autos enthält, der auf der Seite ("Cabrio Car") aufgeführt ist, um die Produktdetails anzuzeigen.
    Die folgende URL (mit Ihrer Portnummer) wird für den Browser angezeigt:
    https://localhost:44300/Product/Convertible%20Car
  5. Geben Sie als Nächstes die folgende nicht weitergeleitete URL (mit Ihrer Portnummer) in den Browser ein:
    https://localhost:44300/ProductDetails.aspx?productID=2
    Der Code erkennt noch immer eine URL, die eine Abfragezeichenfolge enthält, für den Fall, dass ein Benutzer ein Lesezeichen für einen Link hat.

Zusammenfassung

In diesem Lernprogramm haben Sie Routen für Kategorien und Produkte hinzugefügt. Sie haben erfahren, wie Routen in Datensteuerelemente integriert werden können, die die Modellbindung verwenden. Im nächsten Lernprogramm implementieren Sie die globale Fehlerbehandlung.

Zusätzliche Ressourcen

ASP.NET benutzerfreundliche URLs
Bereitstellen einer sicheren ASP.NET Web Forms App mit Mitgliedschaft, OAuth und SQL-Datenbank in Azure App Service
Microsoft Azure – Kostenlose Testversion