Condividi tramite


URL Routing

di Erik Reitan

Scaricare il progetto di esempio Wingtip Toys (C#) o Scaricare e-book (PDF)

Questa serie di esercitazioni illustra le nozioni di base per la creazione di un'applicazione Web Form ASP.NET usando ASP.NET 4.5 e Microsoft Visual Studio Express 2013 per Web. Per questa serie di esercitazioni è disponibile un progetto di Visual Studio 2013 con codice sorgente C# .

In questa esercitazione si modificherà l'applicazione di esempio Wingtip Toys per supportare il routing url. Il routing consente all'applicazione Web di usare URL descrittivi, più facili da ricordare e più supportati dai motori di ricerca. Questa esercitazione si basa sull'esercitazione precedente "Appartenenza e amministrazione" ed è parte della serie di esercitazioni Wingtip Toys.

Cosa si apprenderà:

  • Come registrare le route per un'applicazione Web Forms di ASP.NET.
  • Come aggiungere percorsi a una pagina web.
  • Come selezionare i dati da un database per supportare le route.

Panoramica del routing di ASP.NET

Il routing url consente di configurare un'applicazione per accettare gli URL delle richieste che non eseguono il mapping ai file fisici. Un URL di richiesta è semplicemente l'URL immesso dall'utente nel browser per trovare una pagina nel sito Web. Si usa il routing per definire gli URL che sono semanticamente significativi per gli utenti e che possono essere utili per l'ottimizzazione del motore di ricerca (SEO).

Per impostazione predefinita, il modello Web Form include ASP.NET Friendly URLs. Gran parte del lavoro di routing di base verrà implementata tramite URL amichevoli. Tuttavia, in questa esercitazione si aggiungeranno funzionalità di routing personalizzate.

Prima di personalizzare il routing url, l'applicazione di esempio Wingtip Toys può collegarsi a un prodotto usando l'URL seguente:

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

Personalizzando il routing url, l'applicazione di esempio Wingtip Toys si collega allo stesso prodotto usando un URL di lettura più semplice:

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

Percorsi

Una route è un modello di URL mappato a un gestore. Il gestore può essere un file fisico, ad esempio un file .aspx in un'applicazione Web Form. Un gestore può anche essere una classe che elabora la richiesta. Per definire una route, creare un'istanza della classe Route specificando il modello url, il gestore e facoltativamente un nome per la route.

Aggiungere la route all'applicazione aggiungendo l'oggetto Route alla proprietà statica Routes della RouteTable classe . La proprietà Routes è un RouteCollection oggetto che archivia tutte le route per l'applicazione.

Modelli URL

Un modello URL può contenere valori letterali e segnaposto variabili (definiti parametri URL). I valori letterali e i segnaposto si trovano in segmenti dell'URL delimitati dal carattere barra (/).

Quando viene effettuata una richiesta all'applicazione Web, l'URL viene analizzato in segmenti e segnaposto e i valori delle variabili vengono forniti al gestore della richiesta. Questo processo è simile al modo in cui i dati in una stringa di query vengono analizzati e passati al gestore della richiesta. In entrambi i casi, le informazioni sulle variabili vengono incluse nell'URL e passate al gestore sotto forma di coppie chiave-valore. Per le stringhe di query, sia le chiavi che i valori si trovano nell'URL. Per le route, le chiavi sono i nomi segnaposto definiti nel modello dell'URL e solo i valori si trovano negli URL.

In un modello DI URL è possibile definire i segnaposto racchiudendoli tra parentesi graffe ( { e } ). È possibile definire più segnaposto in un segmento, ma i segnaposto devono essere separati da un valore letterale. Ad esempio, {language}-{country}/{action} è un modello di route valido. Tuttavia, {language}{country}/{action} non è un modello valido, perché non esiste alcun valore letterale o delimitatore tra i segnaposto. Pertanto, il routing non può determinare dove separare il valore per il segnaposto della lingua dal valore per il segnaposto del paese.

Mappatura e registrazione dei percorsi

Prima di poter includere route alle pagine dell'applicazione di esempio Wingtip Toys, è necessario registrare le route all'avvio dell'applicazione. Per registrare le route, modifica il Application_Start gestore eventi.

  1. In Esplora soluzionidi Visual Studio trovare e aprire il file Global.asax.cs .

  2. Aggiungere il codice evidenziato in giallo al file Global.asax.cs come indicato di seguito:

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

All'avvio dell'applicazione di esempio Wingtip Toys, chiama il Application_Start gestore eventi. Alla fine di questo gestore eventi, il metodo RegisterCustomRoutes viene chiamato. Il RegisterCustomRoutes metodo aggiunge ogni route chiamando il MapPageRoute metodo dell'oggetto RouteCollection . Le rotte vengono definite usando un nome di rotta, un URL di rotta e un URL fisico.

Il primo parametro ("ProductsByCategoryRoute") è il nome della route. Viene usato per chiamare il percorso quando è necessario. Il secondo parametro ("Category/{categoryName}") definisce l'URL di sostituzione amichevole che può essere dinamico in base al codice. Questa procedura viene usata quando si popola un controllo dati con link generati in base ai dati. Un percorso è mostrato come segue:

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

Il secondo parametro della route include un valore dinamico specificato da parentesi graffe ({ }). In questo caso, categoryName è una variabile che verrà usata per determinare il percorso di routing appropriato.

Annotazioni

Facoltativo

Potrebbe risultare più semplice gestire il codice spostando il RegisterCustomRoutes metodo in una classe separata. Nella cartella Logica creare una classe separata RouteActions . Spostare il metodo precedente RegisterCustomRoutes dal file Global.asax.cs alla nuova RoutesActions classe. Usare la RoleActions classe e il createAdmin metodo come esempio di come chiamare il RegisterCustomRoutes metodo dal file Global.asax.cs .

Potresti anche aver notato la chiamata al metodo RegisterRoutes usando dell'oggetto RouteConfig all'inizio del gestore eventi Application_Start. Questa chiamata viene effettuata per implementare il routing predefinito. È stato incluso come codice predefinito quando è stata creata l'applicazione usando il modello Web Form di Visual Studio.

Recuperare e utilizzare i dati di percorso

Come accennato in precedenza, è possibile definire le route. Il codice aggiunto al Application_Start gestore eventi nel file Global.asax.cs carica le route definibili.

Impostazione delle rotte

Le route richiedono l'aggiunta di codice aggiuntivo. In questa esercitazione, utilizzerai l'associazione di modelli per recuperare un oggetto RouteValueDictionary utilizzato nella generazione delle route utilizzando dati da un controllo dati. L'oggetto RouteValueDictionary conterrà un elenco di nomi di prodotto che appartengono a una categoria specifica di prodotti. Viene creato un collegamento per ogni prodotto in base ai dati e alla route.

Abilitare le route per categorie e prodotti

Successivamente, aggiornerai l'applicazione per utilizzare ProductsByCategoryRoute e determinare la route corretta da includere per ogni collegamento alla categoria di prodotti. Si aggiornerà anche la pagina ProductList.aspx in modo da includere un collegamento indirizzato per ogni prodotto. I collegamenti verranno visualizzati come prima della modifica, ma i collegamenti useranno ora il routing url.

  1. In Esplora soluzioni aprire la pagina Site.Master se non è già aperta.

  2. Aggiornare il controllo ListView denominato "categoryList" con le modifiche evidenziate in giallo, quindi il markup viene visualizzato come segue:

    <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. In Esplora soluzioni aprire la pagina ProductList.aspx .

  4. Aggiornare l'elemento ItemTemplate della pagina ProductList.aspx con gli aggiornamenti evidenziati in giallo, in modo che il markup venga visualizzato come segue:

    <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. Aprire il code-behind di ProductList.aspx.cs e aggiungere lo spazio dei nomi seguente come evidenziato in giallo:

    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. Sostituire il GetProducts metodo del code-behind (ProductList.aspx.cs) con il codice seguente:

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

Aggiungere il codice per i dettagli del prodotto

Aggiorna ora il code-behind (ProductDetails.aspx.cs) per la pagina ProductDetails.aspx per utilizzare i dati di routing. Si noti che il nuovo GetProduct metodo accetta anche un valore stringa di query per il caso in cui l'utente dispone di un segnalibro di collegamento che usa l'URL non indirizzato meno recente.

  1. Sostituire il GetProduct metodo del code-behind (ProductDetails.aspx.cs) con il codice seguente:

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

Esecuzione dell'applicazione

È ora possibile eseguire l'applicazione per visualizzare le route aggiornate.

  1. Premere F5 per eseguire l'applicazione di esempio Wingtip Toys.
    Il browser si apre e visualizza la pagina Default.aspx .
  2. Fare clic sul collegamento Prodotti nella parte superiore della pagina.
    Tutti i prodotti vengono visualizzati nella pagina ProductList.aspx . Per il browser viene visualizzato l'URL seguente (usando il numero di porta):
    https://localhost:44300/ProductList
  3. Fare quindi clic sul collegamento Categoria Automobili nella parte superiore della pagina.
    Nella pagina ProductList.aspx vengono visualizzate solo le automobili. Per il browser viene visualizzato l'URL seguente (usando il numero di porta):
    https://localhost:44300/Category/Cars
  4. Fare clic sul collegamento contenente il nome della prima auto elencata nella pagina ("Auto convertibile") per visualizzare i dettagli del prodotto.
    Per il browser viene visualizzato l'URL seguente (usando il numero di porta):
    https://localhost:44300/Product/Convertible%20Car
  5. Immettere quindi l'URL non indirizzato seguente (usando il numero di porta) nel browser:
    https://localhost:44300/ProductDetails.aspx?productID=2
    Il codice riconosce ancora un URL che include una stringa di query, nel caso in cui un utente abbia un collegamento nei segnalibri.

Sommario

In questo tutorial sono state aggiunte le route per le categorie e i prodotti. Si è appreso come integrare le route con i controlli dati che usano l'associazione di modelli. Nell'esercitazione successiva si implementerà la gestione degli errori globali.

Risorse aggiuntive

URL amichevoli ASP.NET
Distribuire un'app Web Form ASP.NET sicura con appartenenza, OAuth e database SQL nel servizio app di Azure
Microsoft Azure - Versione di valutazione gratuita