Dynamic page creation from db at run time in asp.net

Question

I'm making E-Commerce website. Under that I want to show particular product details. From query string I can do that but that is not seo friendly so I need to make product name in url(from db) instead of using querystring. I tried following code but it is not working for me.

Error - The resource could not be Found

Global.asax

<%@ Application Language="VB" %>
<%@ Import Namespace="System.Web.Optimization" %>
<%@ Import Namespace="System.Web.Routing" %>

<script runat="server">

    Sub Application_Start(sender As Object, e As EventArgs)
        RouteConfig.RegisterRoutes(RouteTable.Routes)
        BundleConfig.RegisterBundles(BundleTable.Bundles)
    End Sub

    Private Shared Sub RegisterRoutes(routes As RouteCollection)
        routes.MapPageRoute("product-detail", "{product_name}.aspx", "product-detail.aspx")
    End Sub

</script>

product-detail.aspx (Dynamic Page)

Private Sub product_detail_Load(sender As Object, e As EventArgs) Handles Me.Load
        If Not Me.IsPostBack Then
            Dim pageName As String = Me.Page.RouteData.Values("product_name").ToString()
        End If
    End Sub

shop.aspx (used listview control to display list of products)

<asp:ListView ID="products" runat="server" DataKeyNames="ID">
                            <ItemTemplate>
                                <asp:HyperLink ID="productID" runat="server" NavigateUrl='<%# Eval("product_name", "~/{0}") %>' CssClass="product-link">
                            <!--blocks-starts--><div class="blocks blocks-shop">
                                <asp:Image ID="readyStock" runat="server" ImageUrl="images/common/ready_stock_tag.png" Visible="false" CssClass="tag" />
                                <asp:Label ID="checkReadyStock" runat="server" Visible="false"></asp:Label>
                            <div class="block-img">
                                <img src='<%# Eval("image") %>' runat="server" id="proImg" />
                            </div>

                            <div class="block-content">
                                <span class="sku" style="font-size:0.6em !important">Item No. <asp:Label ID="skuID" runat="server" Text='<%# Eval("sku") %>'></asp:Label></span>
                                <h3>
                                    <asp:Label ID="prodName" runat="server" Text='<%# Eval("product_name") %>'></asp:Label></h3>
                                <p><strong>
                                    <asp:Label ID="priceRange" runat="server" Text='<%# Eval("price_range") %>'></asp:Label></strong></p>
                            </div>
                       </div><!--blocks-ends-->
                                </asp:HyperLink>
                            </ItemTemplate>

                            <LayoutTemplate>
                                <div id="itemPlaceholderContainer" runat="server" style="">
                                    <div runat="server" id="itemPlaceholder" />
                                </div>
                            </LayoutTemplate>
                        </asp:ListView>

shop.aspx.vb

Private Sub shop_Load(sender As Object, e As EventArgs) Handles Me.Load
        If Not IsPostBack Then
            Try
                Dim str As String = "select * from products where status = 'active'"
                Dim cmd As New MySqlCommand(str, con)
                con.Open()
                Dim da As New MySqlDataAdapter(cmd)
                Dim dt As New DataTable
                da.Fill(dt)
                products.DataSource = dt
                products.DataBind()
                con.Close()
            Catch ex As Exception
                Response.Write(ex)
            End Try
        End If
    End Sub