[ASP.NET][Web Form]調整筆記三(URL Routing上集)

2016-05-10

5617
0
Web Form調整
2016-05-08

ASP.NET MVC在URL網址列上可以很輕易設計SEO (search-engine optimization)，背後有個厲害的元件就是URL Routing!

那麼ASP.NET Web Form是否也適用?

"http://mywebsite/products/apple" 取代 "http://mywebsite/product.aspx?vender=apple"

querystring取代成為網址區段 + extensionless URLs !

這一篇先筆記system.Web.Routing，下一篇筆記Microsoft.AspNet.FriendlyUrls(友善Urls)

ASP.NET 4.0 之後，.NET也能讓我們在Web Form使用URL Routing engine 來 Map實際 URLs，就像Mapping 到ASP.NET MVC Controllers。

1.引用 System.Web.Routing

2.首先新增一支Web表單，命名為product.aspx

3.加入gridview控制項Gridview1，新增3個欄位，依序為id、verder及name。

Product.aspx

<body>
    <form id="form1" runat="server">
        <div>
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
                <Columns>
                    <asp:BoundField DataField="id" HeaderText="id" />
                    <asp:BoundField DataField="verder" HeaderText="verder" />
                    <asp:BoundField DataField="name" HeaderText="name" />
                </Columns>
            </asp:GridView>
        </div>
    </form>
</body>

4.Server side(product.aspx.cs)程式加入資料繫結

程式碼會建立8筆測試資料，同時會透過URL傳入的Querystring作為查詢條件(廠商Vender)。

Product.aspx.cs

protected void Page_Load(object sender, EventArgs e)
{
    string verder = Request.QueryString["vender"];
    if (string.IsNullOrEmpty(verder))
    {
        var Data = GetData();
        GridView1.DataSource = Data;
    }
    else
    {
        var Data = from products in GetData()
                   where products.verder == verder
                   select products;
        GridView1.DataSource = Data;
    }
    GridView1.DataBind();
}
private List<ProductTitle> GetData()
{
    List<ProductTitle> li = new List<ProductTitle>();
    li.Add(new ProductTitle { id = 1, verder = "apple", name = "MacBook Pro (15-inch, Early 2015)" });
    li.Add(new ProductTitle { id = 2, verder = "apple", name = "iPhone6s" });
    li.Add(new ProductTitle { id = 3, verder = "apple", name = "Apple Watch" });
    li.Add(new ProductTitle { id = 4, verder = "sony", name = "Vaio S16TP" });
    li.Add(new ProductTitle { id = 5, verder = "sony", name = "Bravia KD-55X9300C" });
    li.Add(new ProductTitle { id = 6, verder = "sony", name = "Xperia Z1" });
    li.Add(new ProductTitle { id = 7, verder = "samsung", name = "S6 Edge+" });
    li.Add(new ProductTitle { id = 8, verder = "samsung", name = "Note 5" });
    return li;
}

public class ProductTitle
{
    public int id { get; set; }
    public string verder { get; set; }
    public string name { get; set; }
}

5.測試看看web form的呈現

6.接著我們加入URL Routing

利用URL Routing engine 將products\{vender} Mapping 實際 URLs(product.aspx)

順帶給予預設值RouteValueDictionary=apple

RouteConfig.CS

public class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.MapPageRoute("products-browse", "products/{verder}", "~/product.aspx"
            , true, new RouteValueDictionary { { "verder", "apple" } });

    }
}

Global.asax.cs

 protected void Application_Start()
 {
     RouteConfig.RegisterRoutes(RouteTable.Routes);
 }

將查詢條件由Querystring改為RouteData取出

Product.aspx.cs

protected void Page_Load(object sender, EventArgs e)
{
    //string verder = Request.QueryString["vender"];
    string verder = (string)Page.RouteData.Values["verder"];
....

7.測試URL Routing

剛剛設定路由時，預設值=apple，只查出蘋果的產品。