Bagikan melalui

Perutean URL

oleh Erik Reitan

Unduh Proyek Sampel Mainan Wingtip (C#) atau Unduh E-book (PDF)

Seri tutorial ini akan mengajari Anda dasar-dasar membangun aplikasi ASP.NET Web Forms menggunakan ASP.NET 4.5 dan Microsoft Visual Studio Express 2013 untuk Web. Proyek Visual Studio 2013 dengan kode sumber C# tersedia untuk menyertai seri tutorial ini.

Dalam tutorial ini, Anda akan memodifikasi aplikasi sampel Wingtip Toys untuk mendukung perutean URL. Perutean memungkinkan aplikasi web Anda menggunakan URL yang ramah, lebih mudah diingat, dan didukung dengan lebih baik oleh mesin pencari. Tutorial ini dibangun pada tutorial sebelumnya "Keanggotaan dan Administrasi" dan merupakan bagian dari seri tutorial Wingtip Toys.

Yang akan Anda pelajari:

  • Cara mendaftarkan rute untuk aplikasi ASP.NET Web Forms.
  • Cara menambahkan rute ke halaman web.
  • Cara memilih data dari database untuk mendukung rute.

Gambaran Umum Perutean ASP.NET

Perutean URL memungkinkan Anda mengonfigurasi aplikasi untuk menerima URL permintaan yang tidak dipetakan ke file fisik. URL permintaan hanyalah URL yang dimasukkan pengguna ke browser mereka untuk menemukan halaman di situs web Anda. Anda menggunakan perutean untuk menentukan URL yang secara semantik bermakna bagi pengguna dan yang dapat membantu pengoptimalan mesin pencari (SEO).

Secara default, templat Formulir Web menyertakan URL ramah ASP.NET. Sebagian besar pekerjaan perutean dasar akan diimplementasikan dengan menggunakan URL Ramah. Namun, dalam tutorial ini Anda akan menambahkan kemampuan perutean yang disesuaikan.

Sebelum menyesuaikan perutean URL, aplikasi sampel Wingtip Toys dapat menautkan ke produk menggunakan URL berikut:

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

Dengan menyesuaikan perutean URL, aplikasi sampel Wingtip Toys akan ditautkan ke produk yang sama menggunakan URL yang lebih mudah dibaca:

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

Rute

Rute adalah pola URL yang dipetakan ke penangan. Handler dapat menjadi file fisik, seperti file .aspx dalam aplikasi Web Forms. Handler juga dapat menjadi kelas yang memproses permintaan. Untuk menentukan rute, Anda membuat instans kelas Rute dengan menentukan pola URL, handler, dan secara opsional nama untuk rute.

Anda menambahkan rute ke aplikasi dengan menambahkan Route objek ke properti RouteTable statis Routes kelas. Properti Rute adalah RouteCollection objek yang menyimpan semua rute untuk aplikasi.

Pola URL

Pola URL dapat berisi nilai harfiah dan tempat penampung variabel (disebut sebagai parameter URL). Literal dan tempat penampung terletak di segmen URL yang dibatasi oleh karakter garis miring (/).

Ketika permintaan ke aplikasi web Anda dibuat, URL diurai ke dalam segmen dan tempat penampung, dan nilai variabel disediakan untuk penangan permintaan. Proses ini mirip dengan cara data dalam string kueri diurai dan diteruskan ke penangan permintaan. Dalam kedua kasus, informasi variabel disertakan dalam URL dan diteruskan ke handler dalam bentuk pasangan kunci-nilai. Untuk string kueri, kunci dan nilai ada di URL. Untuk rute, kuncinya adalah nama tempat penampung yang ditentukan dalam pola URL, dan hanya nilai yang ada di URL.

Dalam pola URL, Anda menentukan tempat penampung dengan mengapitnya dalam kurung kurawal ( { dan } ). Anda dapat menentukan lebih dari satu tempat penampung dalam segmen, tetapi tempat penampung harus dipisahkan oleh nilai harfiah. Misalnya, {language}-{country}/{action} adalah pola rute yang valid. Namun, {language}{country}/{action} bukan pola yang valid, karena tidak ada nilai harfiah atau pemisah antara tempat penampung. Oleh karena itu, perutean tidak dapat menentukan di mana memisahkan nilai untuk tempat penampung bahasa dari nilai untuk tempat penampung negara.

Rute Pemetaan dan Pendaftaran

Sebelum Anda dapat menyertakan rute ke halaman aplikasi sampel Wingtip Toys, Anda harus mendaftarkan rute saat aplikasi dimulai. Untuk mendaftarkan rute, Anda akan memodifikasi penanganan Application_Start aktivitas.

  1. Di Penjelajah Solusi Visual Studio, temukan dan buka file Global.asax.cs.

  2. Tambahkan kode yang disorot dengan warna kuning ke file Global.asax.cs sebagai berikut:

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

Ketika aplikasi sampel Wingtip Toys dimulai, aplikasi memanggil penanganan Application_Start aktivitas. Di akhir penanganan aktivitas ini, RegisterCustomRoutes metode dipanggil. Metode menambahkan RegisterCustomRoutes setiap rute dengan memanggil MapPageRoute metode RouteCollection objek . Rute ditentukan menggunakan nama rute, URL rute, dan URL fisik.

Parameter pertama ("ProductsByCategoryRoute") adalah nama rute. Ini digunakan untuk memanggil rute ketika diperlukan. Parameter kedua ("Category/{categoryName}") mendefinisikan URL pengganti yang ramah yang dapat dinamis berdasarkan kode. Anda menggunakan rute ini saat mengisi kontrol data dengan tautan yang dihasilkan berdasarkan data. Rute ditampilkan sebagai berikut:

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

Parameter kedua rute mencakup nilai dinamis yang ditentukan oleh kurung kurawal ({ }). Dalam hal ini, categoryName adalah variabel yang akan digunakan untuk menentukan jalur perutean yang tepat.

Catatan

Opsional

Anda mungkin merasa lebih mudah untuk mengelola kode Anda dengan memindahkan metode ke RegisterCustomRoutes kelas terpisah. Di folder Logika , buat kelas terpisah RouteActions . Pindahkan metode di atas RegisterCustomRoutes dari file Global.asax.cs ke kelas baru RoutesActions . RoleActions Gunakan kelas dan createAdmin metode sebagai contoh cara memanggil RegisterCustomRoutes metode dari file Global.asax.cs.

Anda mungkin juga telah memperhatikan RegisterRoutes panggilan metode menggunakan RouteConfig objek di awal Application_Start penanganan aktivitas. Panggilan ini dilakukan untuk mengimplementasikan perutean default. Ini disertakan sebagai kode default saat Anda membuat aplikasi menggunakan templat Formulir Web Visual Studio.

Mengambil dan Menggunakan Data Rute

Seperti disebutkan di atas, rute dapat ditentukan. Kode yang Anda tambahkan ke Application_Start penanganan aktivitas dalam file Global.asax.cs memuat rute yang dapat ditentukan.

Mengatur Rute

Rute mengharuskan Anda untuk menambahkan kode tambahan. Dalam tutorial ini, Anda akan menggunakan pengikatan model untuk mengambil RouteValueDictionary objek yang digunakan saat membuat rute menggunakan data dari kontrol data. Objek RouteValueDictionary akan berisi daftar nama produk yang termasuk dalam kategori produk tertentu. Tautan dibuat untuk setiap produk berdasarkan data dan rute.

Aktifkan Rute untuk Kategori dan Produk

Selanjutnya, Anda akan memperbarui aplikasi untuk menggunakan ProductsByCategoryRoute untuk menentukan rute yang benar untuk disertakan untuk setiap tautan kategori produk. Anda juga akan memperbarui halaman ProductList.aspx untuk menyertakan tautan yang dirutekan untuk setiap produk. Tautan akan ditampilkan seperti sebelum perubahan, namun tautan sekarang akan menggunakan perutean URL.

  1. Di Penjelajah Solusi, buka halaman Site.Master jika belum dibuka.

  2. Perbarui kontrol ListView bernama "categoryList" dengan perubahan yang disorot dengan warna kuning, sehingga markup muncul sebagai berikut:

    <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. Di Penjelajah Solusi, buka halaman ProductList.aspx.

  4. ItemTemplate Perbarui elemen halaman ProductList.aspx dengan pembaruan disorot dengan warna kuning, sehingga markup muncul sebagai berikut:

    <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. Buka kode di belakang ProductList.aspx.cs dan tambahkan namespace berikut seperti yang disorot dengan warna kuning:

    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. GetProducts Ganti metode code-behind (ProductList.aspx.cs) dengan kode berikut:

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

Tambahkan Kode untuk Detail Produk

Sekarang, perbarui code-behind (ProductDetails.aspx.cs) untuk halaman ProductDetails.aspx untuk menggunakan data rute. Perhatikan bahwa metode baru GetProduct juga menerima nilai string kueri untuk kasus di mana pengguna memiliki tautan yang diberi marka buku yang menggunakan URL lama yang tidak ramah dan tidak dirutekan.

  1. GetProduct Ganti metode code-behind (ProductDetails.aspx.cs) dengan kode berikut:

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

Menjalankan Aplikasi

Anda dapat menjalankan aplikasi sekarang untuk melihat rute yang diperbarui.

  1. Tekan F5 untuk menjalankan aplikasi sampel Wingtip Toys.
    Browser terbuka dan menampilkan halaman Default.aspx .
  2. Klik tautan Produk di bagian atas halaman.
    Semua produk ditampilkan di halaman ProductList.aspx . URL berikut (menggunakan nomor port Anda) ditampilkan untuk browser:
    https://localhost:44300/ProductList
  3. Selanjutnya, klik tautan kategori Mobil di dekat bagian atas halaman.
    Hanya mobil yang ditampilkan di halaman ProductList.aspx . URL berikut (menggunakan nomor port Anda) ditampilkan untuk browser:
    https://localhost:44300/Category/Cars
  4. Klik tautan yang berisi nama mobil pertama yang tercantum di halaman ("Mobil Convertible") untuk menampilkan detail produk.
    URL berikut (menggunakan nomor port Anda) ditampilkan untuk browser:
    https://localhost:44300/Product/Convertible%20Car
  5. Selanjutnya, masukkan URL yang tidak dirutekan berikut (menggunakan nomor port Anda) ke browser:
    https://localhost:44300/ProductDetails.aspx?productID=2
    Kode masih mengenali URL yang menyertakan string kueri, untuk kasus di mana pengguna memiliki bookmark tautan.

Ringkasan

Dalam tutorial ini, Anda telah menambahkan rute untuk kategori dan produk. Anda telah mempelajari bagaimana rute dapat diintegrasikan dengan kontrol data yang menggunakan pengikatan model. Dalam tutorial berikutnya, Anda akan menerapkan penanganan kesalahan global.

Sumber Daya Tambahan

URL ramah ASP.NET
Menyebarkan Aplikasi Formulir Web ASP.NET Aman dengan Keanggotaan, OAuth, dan SQL Database untuk Azure App Service
Microsoft Azure - Uji Coba Gratis

SebelumnyaBerikutnya

  • Last updated on