Routing adresów URL

Autor: Erik Reitan

Pobierz przykładowy projekt Wingtip Toys (C#) lub pobierz książkę elektroniczną (PDF)

W tej serii samouczków przedstawiono podstawy tworzenia aplikacji ASP.NET Web Forms przy użyciu ASP.NET 4.5 i Microsoft Visual Studio Express 2013 for Web. Projekt Visual Studio 2013 z kodem źródłowym języka C# jest dostępny do dołączenia do tej serii samouczków.

W tym samouczku zmodyfikujesz przykładową aplikację Wingtip Toys w celu obsługi routingu adresów URL. Routing umożliwia aplikacji internetowej używanie przyjaznych adresów URL, łatwiejszych do zapamiętania i lepiej obsługiwanych przez wyszukiwarki. Ten samouczek opiera się na poprzednim samouczku "Członkostwo i administracja" i jest częścią serii samouczków Wingtip Toys.

Zawartość:

  • Jak zarejestrować trasy dla aplikacji ASP.NET Web Forms.
  • Jak dodać trasy do strony internetowej.
  • Jak wybrać dane z bazy danych do obsługi tras.

Omówienie routingu ASP.NET

Routing adresów URL umożliwia skonfigurowanie aplikacji do akceptowania adresów URL żądań, które nie są mapowanie na pliki fizyczne. Adres URL żądania to po prostu adres URL, który użytkownik wprowadza w przeglądarce, aby znaleźć stronę w witrynie sieci Web. Routing służy do definiowania adresów URL, które są semantycznie zrozumiałe dla użytkowników i które mogą pomóc w optymalizacji wyszukiwarki (SEO).

Domyślnie szablon Web Forms zawiera ASP.NET przyjazne adresy URL. Większość podstawowej pracy z routingiem zostanie zaimplementowana przy użyciu przyjaznych adresów URL. Jednak w tym samouczku dodasz dostosowane możliwości routingu.

Przed dostosowaniem routingu adresów URL przykładowa aplikacja Wingtip Toys może połączyć się z produktem przy użyciu następującego adresu URL:

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

Dostosowując routing adresów URL, przykładowa aplikacja Wingtip Toys będzie łączyć się z tym samym produktem przy użyciu łatwiejszego do odczytania adresu URL:

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

Trasy

Trasa to wzorzec adresu URL mapowany na procedurę obsługi. Program obsługi może być plikiem fizycznym, takim jak plik aspx w aplikacji Web Forms. Procedura obsługi może być również klasą, która przetwarza żądanie. Aby zdefiniować trasę, należy utworzyć wystąpienie klasy Route, określając wzorzec adresu URL, procedurę obsługi i opcjonalnie nazwę trasy.

Możesz dodać trasę do aplikacji, dodając Route obiekt do właściwości statycznej RoutesRouteTable klasy. Właściwość Routes to RouteCollection obiekt, który przechowuje wszystkie trasy dla aplikacji.

Wzorce adresów URL

Wzorzec adresu URL może zawierać wartości literału i symbole zastępcze zmiennych (nazywane parametrami adresu URL). Literały i symbole zastępcze znajdują się w segmentach adresu URL rozdzielanego znakiem ukośnika (/).

Po wysłaniu żądania do aplikacji internetowej adres URL jest analizowany w segmentach i symbolach zastępczych, a wartości zmiennych są udostępniane procedurze obsługi żądań. Ten proces jest podobny do sposobu analizowania i przekazywania danych w ciągu zapytania do procedury obsługi żądań. W obu przypadkach informacje o zmiennej są uwzględniane w adresie URL i przekazywane do programu obsługi w postaci par klucz-wartość. W przypadku ciągów zapytania zarówno klucze, jak i wartości znajdują się w adresie URL. W przypadku tras klucze są nazwami zastępczymi zdefiniowanymi w wzorcu adresu URL, a tylko wartości znajdują się w adresie URL.

W wzorcu adresu URL zdefiniujesz symbole zastępcze, umieszczając je w nawiasach klamrowych ( { i } ). W segmencie można zdefiniować więcej niż jeden symbol zastępczy, ale symbole zastępcze muszą być rozdzielone wartością literału. Na przykład {language}-{country}/{action} jest prawidłowym wzorcem trasy. Jednak nie jest prawidłowym wzorcem, {language}{country}/{action} ponieważ nie ma wartości literału ani ogranicznika między symbolami zastępczymi. W związku z tym routing nie może określić, gdzie należy oddzielić wartość symbolu zastępczego języka od wartości symbolu zastępczego kraju.

Mapowanie i rejestrowanie tras

Przed dołączeniem tras do stron przykładowej aplikacji Wingtip Toys należy zarejestrować trasy po uruchomieniu aplikacji. Aby zarejestrować trasy, zmodyfikujesz procedurę obsługi zdarzeń Application_Start .

  1. W programie Eksplorator rozwiązań of Visual Studio znajdź i otwórz plik Global.asax.cs.

  2. Dodaj kod wyróżniony kolorem żółtym do pliku Global.asax.cs w następujący sposób:

    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"
              );
            }
        }
    }
    

Po uruchomieniu przykładowej aplikacji Wingtip Toys wywołuje procedurę obsługi zdarzeń Application_Start . Na końcu tej procedury obsługi zdarzeń wywoływana RegisterCustomRoutes jest metoda . Metoda RegisterCustomRoutes dodaje każdą trasę, wywołując metodę MapPageRouteRouteCollection obiektu. Trasy są definiowane przy użyciu nazwy trasy, adresu URL trasy i fizycznego adresu URL.

Pierwszy parametr ("ProductsByCategoryRoute") to nazwa trasy. Służy do wywoływania trasy w razie potrzeby. Drugi parametr ("Category/{categoryName}") definiuje przyjazny adres URL zastępczy, który może być dynamiczny na podstawie kodu. Ta trasa jest używana podczas wypełniania kontrolki danych za pomocą linków generowanych na podstawie danych. Trasa jest wyświetlana w następujący sposób:

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

Drugi parametr trasy zawiera wartość dynamiczną określoną przez nawiasy klamrowe ({ }). W tym przypadku jest to zmienna, categoryName która będzie używana do określania odpowiedniej ścieżki routingu.

Uwaga

Opcjonalne

Możesz łatwiej zarządzać kodem, przenosząc metodę RegisterCustomRoutes do oddzielnej klasy. W folderze Logika utwórz oddzielną RouteActions klasę. Przenieś powyższy RegisterCustomRoutes plik z pliku Global.asax.cs do nowej RoutesActions klasy. RoleActions Użyj klasy i createAdmin metody jako przykładu wywoływania RegisterCustomRoutes metody z pliku Global.asax.cs.

Być może zauważono RegisterRoutes również wywołanie metody przy użyciu RouteConfig obiektu na początku procedury obsługi zdarzeń Application_Start . To wywołanie jest wykonywane w celu zaimplementowania routingu domyślnego. Został on dołączony jako kod domyślny podczas tworzenia aplikacji przy użyciu szablonu Web Forms programu Visual Studio.

Pobieranie i używanie danych tras

Jak wspomniano powyżej, można zdefiniować trasy. Kod dodany do procedury obsługi zdarzeń Application_Start w pliku Global.asax.cs ładuje trasy, które można definiować.

Ustawianie tras

Trasy wymagają dodania dodatkowego kodu. W tym samouczku użyjesz powiązania modelu, aby pobrać RouteValueDictionary obiekt używany podczas generowania tras przy użyciu danych z kontrolki danych. Obiekt RouteValueDictionary będzie zawierać listę nazw produktów należących do określonej kategorii produktów. Link jest tworzony dla każdego produktu na podstawie danych i trasy.

Włączanie tras dla kategorii i produktów

Następnie zaktualizujesz aplikację, aby użyć elementu , ProductsByCategoryRoute aby określić poprawną trasę do uwzględnienia dla każdego linku kategorii produktów. Zaktualizujesz również stronę ProductList.aspx, aby uwzględnić link kierowany dla każdego produktu. Linki będą wyświetlane tak, jak były przed zmianą, jednak linki będą teraz używać routingu adresów URL.

  1. W Eksplorator rozwiązań otwórz stronę Site.Master, jeśli nie jest jeszcze otwarta.

  2. Zaktualizuj kontrolkę ListView o nazwie "categoryList" z wyróżnionymi zmianami w kolorze żółtym, więc znaczniki są wyświetlane w następujący sposób:

    <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. W Eksplorator rozwiązań otwórz stronę ProductList.aspx.

  4. ItemTemplate Zaktualizuj element strony ProductList.aspx z wyróżnionymi aktualizacjami w kolorze żółtym, więc znaczniki są wyświetlane w następujący sposób:

    <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. Otwórz kod w pliku ProductList.aspx.cs i dodaj następującą przestrzeń nazw, jak wyróżniono w kolorze żółtym:

    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. Zastąp metodę GetProducts code-behind (ProductList.aspx.cs) następującym kodem:

    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;
    }
    

Dodawanie kodu dla szczegółów produktu

Teraz zaktualizuj plik code-behind (ProductDetails.aspx.cs) dla strony ProductDetails.aspx , aby użyć danych trasy. Zwróć uwagę, że nowa GetProduct metoda akceptuje również wartość ciągu zapytania dla przypadku, gdy użytkownik ma zakładkę linku, która używa starszego, nieprzygotowanego adresu URL.

  1. Zastąp metodę GetProduct code-behind (ProductDetails.aspx.cs) następującym kodem:

    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;
    }
    

Uruchamianie aplikacji

Teraz możesz uruchomić aplikację, aby wyświetlić zaktualizowane trasy.

  1. Naciśnij klawisz F5 , aby uruchomić przykładową aplikację Wingtip Toys.
    Zostanie otwarta przeglądarka i zostanie wyświetlona strona Default.aspx .
  2. Kliknij link Products (Produkty ) w górnej części strony.
    Wszystkie produkty są wyświetlane na stronie ProductList.aspx . Dla przeglądarki jest wyświetlany następujący adres URL (przy użyciu numeru portu):
    https://localhost:44300/ProductList
  3. Następnie kliknij link Kategoria samochody w górnej części strony.
    Na stronie ProductList.aspx są wyświetlane tylko samochody. W przeglądarce zostanie wyświetlony następujący adres URL (przy użyciu numeru portu):
    https://localhost:44300/Category/Cars
  4. Kliknij link zawierający nazwę pierwszego samochodu wymienionego na stronie ("Samochód kabrioletowy"), aby wyświetlić szczegóły produktu.
    W przeglądarce zostanie wyświetlony następujący adres URL (przy użyciu numeru portu):
    https://localhost:44300/Product/Convertible%20Car
  5. Następnie wprowadź w przeglądarce następujący niesyłany adres URL (przy użyciu numeru portu):
    https://localhost:44300/ProductDetails.aspx?productID=2
    Kod nadal rozpoznaje adres URL zawierający ciąg zapytania w przypadku, gdy użytkownik ma zakładkę linku.

Podsumowanie

W tym samouczku dodano trasy dla kategorii i produktów. Wiesz już, jak trasy można zintegrować z kontrolkami danych korzystającymi z powiązania modelu. W następnym samouczku zaimplementujesz globalną obsługę błędów.

Dodatkowe zasoby

przyjazne adresy URL ASP.NET
Wdrażanie bezpiecznej aplikacji ASP.NET Web Forms z członkostwem, uwierzytelnianiem OAuth i SQL Database w Azure App Service
Microsoft Azure — bezpłatna wersja próbna