URL-Routing

Artikel
06/16/2023

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

In dieser Tutorialreihe erfahren Sie die Grundlagen zum Erstellen einer ASP.NET Web Forms-Anwendung mit ASP.NET 4.5 und Microsoft Visual Studio Express 2013 für Web. Für diese Tutorialreihe steht ein Visual Studio 2013 Projekt mit C#-Quellcode zur Verfügung.

In diesem Tutorial ändern Sie die Wingtip Toys-Beispielanwendung, um das URL-Routing zu unterstützen. Routing ermöglicht es Ihrer Webanwendung, URLs zu verwenden, die benutzerfreundlich, leichter zu merken und von Suchmaschinen besser unterstützt werden können. Dieses Tutorial baut auf dem vorherigen Tutorial "Mitgliedschaft und Verwaltung" auf und ist Teil der Tutorialreihe Wingtip Toys.

Sie lernen Folgendes:

Registrieren von Routen für eine ASP.NET Web Forms-Anwendung
Hinzufügen von Routen zu einer Webseite
Auswählen von Daten aus einer Datenbank zur Unterstützung von Routen

Übersicht über ASP.NET Routing

Mit dem URL-Routing können Sie eine Anwendung so konfigurieren, dass Anforderungs-URLs akzeptiert werden, die keine 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 für Benutzer semantisch sinnvoll sind und bei der Suchmaschinenoptimierung (SEO) hilfreich sein können.

Standardmäßig enthält die Web Forms-Vorlage ASP.NET Benutzerfreundlichen URLs. Ein Großteil der grundlegenden Routingaufgaben wird mithilfe von Benutzerfreundlichen URLs implementiert. In diesem Tutorial fügen Sie jedoch benutzerdefinierte Routingfunktionen hinzu.

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

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

Durch Anpassen des URL-Routings verknüpft die Wingtip Toys-Beispielanwendung mit einer leichter lesbaren URL mit demselben Produkt:

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 Web Forms-Anwendung. Ein Handler kann auch eine Klasse sein, die die Anforderung verarbeitet. Um eine Route zu definieren, erstellen Sie eine instance 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 der 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 variable Platzhalter (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 gestellt wird, wird die URL in Segmente und Platzhalter analysiert, und die Variablenwerte werden dem Anforderungshandler bereitgestellt. Dieser Prozess ä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üssel-Wert-Paaren an den Handler übergeben. Bei Abfragezeichenfolgen befinden sich sowohl die Schlüssel als auch die Werte in der URL. Für 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 Klammern ( { und } ) einschließen. Sie können mehrere Platzhalter in einem Segment definieren, aber die Platzhalter müssen durch einen Literalwert getrennt werden. Beispielsweise {language}-{country}/{action} ist ein gültiges Routenmuster. Ist jedoch {language}{country}/{action} kein gültiges Muster, da zwischen den Platzhaltern kein Literalwert oder Trennzeichen vorhanden ist. Daher kann das Routing nicht bestimmen, wo der Wert für den Sprachplatzhalter vom Wert für den Länderplatzhalter getrennt werden soll.

Routen zuordnen und registrieren

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.

Suchen Sie in Projektmappen-Explorer von Visual Studio nach der Datei Global.asax.cs, und öffnen Sie sie.

Fügen Sie den gelb hervorgehobenen Code der Datei Global.asax.cs wie folgt 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, ruft sie den Application_Start Ereignishandler auf. 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. Sie wird verwendet, um die Route bei Bedarf aufzurufen. Der zweite Parameter ("Category/{categoryName}") definiert die Benutzerfreundlichen Ersatz-URL, die basierend auf Code dynamisch sein kann. Sie verwenden diese Route, wenn Sie ein Datensteuerelement mit Links 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 Klammern ({ }) angegeben wird. In diesem Fall handelt es sich um eine Variable, categoryName die verwendet wird, um den richtigen Routingpfad zu bestimmen.

Hinweis

Optional

Möglicherweise ist es einfacher, Ihren Code zu verwalten, indem Sie die RegisterCustomRoutes -Methode in eine separate Klasse verschieben. Erstellen Sie im Ordner Logic eine separate RouteActions Klasse. Verschieben Sie die obige 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 Datei Global.asax.cs .

Möglicherweise haben Sie auch bemerkt, dass der RegisterRoutes Methodenaufruf das RouteConfig -Objekt am Anfang des Ereignishandlers Application_Start verwendet. Dieser Aufruf wird ausgeführt, um das Standardrouting zu implementieren. Es wurde als Standardcode enthalten, als Sie die Anwendung mithilfe 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

Für Routen müssen Sie zusätzlichen Code hinzufügen. In diesem Tutorial 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 Produktkategorie gehören. Für jedes Produkt wird basierend auf den Daten und der Route ein Link erstellt.

Routen für Kategorien und Produkte aktivieren

Als Nächstes aktualisieren Sie die Anwendung so, dass sie verwendet, ProductsByCategoryRoute um die richtige Route für jeden Produktkategorielink zu bestimmen. Außerdem aktualisieren Sie die Seite ProductList.aspx so, dass für jedes Produkt ein Routinglink enthalten ist. Die Links werden wie vor der Änderung angezeigt, aber die Links verwenden jetzt DAS URL-Routing.

Öffnen Sie in Projektmappen-Explorer die Seite Site.Master, falls sie noch nicht geöffnet ist.

Aktualisieren Sie das ListView-Steuerelement mit dem Namen "categoryList", wobei die Änderungen gelb hervorgehoben sind, 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>

Öffnen Sie in Projektmappen-Explorer die Seite ProductList.aspx.

Aktualisieren Sie das ItemTemplate Element der Seite ProductList.aspx mit 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>

Öffnen Sie den CodeBehind von ProductList.aspx.cs , und fügen Sie den folgenden Namespace gelb hervorgehoben 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;

Ersetzen Sie die GetProducts Methode des CodeBehind (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 den CodeBehind (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 einen Link mit Lesezeichen versehen hat, der die ältere nicht freundliche, nicht weitergeleitete URL verwendet.

Ersetzen Sie die GetProduct Methode des CodeBehind (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.

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

Zusammenfassung

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

Zusätzliche Ressourcen

ASP.NET Friendly URLs
Bereitstellen einer Secure ASP.NET Web Forms-App mit Mitgliedschaft, OAuth und SQL-Datenbank für Azure App Service
Microsoft Azure – Kostenlose Testversion

Zurück Weiter

Share via

URL-Routing

Sie lernen Folgendes:

Übersicht über ASP.NET Routing

Routen

URL-Muster

Routen zuordnen und registrieren

Abrufen und Verwenden von Routendaten

Festlegen von Routen

Routen für Kategorien und Produkte aktivieren

Hinzufügen von Code für Produktdetails

Ausführen der Anwendung

Zusammenfassung

Zusätzliche Ressourcen

Feedback

Feedback

Zusätzliche Ressourcen