ASP.NET FriendlyUrlsを使ったみた

0.前置き

ASP.NETのロードマップがつい最近でました。
Roadmap for ASP.NET Fall 2012 Update
その中に、ASP.NET WebFormの更新もあります。これ↓
Web Form Friendly URLs
どうやら、このモジュールを適用したプロジェクトテンプレートも用意されるようです。
今回の記事ではこのASP.NET Friendly URLsを触ってみようと思います。

なお、今回の記事は、ハンセルマンさんのエントリーを大いに参考にさせて頂きました。
Introducing ASP.NET FriendlyUrls

1.ASP.NET FriendlyUrlsの紹介

ASP.NET FriendlyUrlsを利用すれば、きれいなURLを容易に組み立てることができます。
たとえばASP.NET WebFormで、とあるページにアクセスする場合、一般的にURLは以下のようになります。

http://84zume.con/hoge.aspx

また、商品Noが10の商品を表示する場合、URLは以下のようになったりします。

http://84zume.con/product.aspx　　←セッションで商品番号を渡している。
http://84zume.con/hoge.aspx?ProductNo=10　　←クエリーストリングで商品番号を渡している。

上記の構成のURLをFriendlyUrlsを利用すれば、

http://84zume.con/hoge　　←URLの意味上、不要な拡張子を消すことができる。
http://84zume.con/product/10　　←Productの10番を取得する

このように表現できるわけです。

2.インストール

インストールはnugetで行います。

PM> Install-Package Microsoft.AspNet.FriendlyUrls -Pre

※注意：ASP.NET Fall 2012 Updateがリリースされた場合は、プロジェクトテンプレートにこのモジュールが最初から入っていると思います。

nugetでモジュールを取得した後に、ReadMeが表示されるので、それに従い、少し設定をします。
Global.asaxのApplication_Startに、

RouteConfig.RegisterRoutes(RouteTable.Routes);

を記載します。

3.実際に使ってみる

サンプルとして、2つのページを作成しました。
ASP.NET Friendly URLsを機能を利用してWebアプリケーションを起動すると、List.aspxで作成したページは、~/Listでアクセスできるようになりました。
もう少し詳しく見ていきます。

◆　List.aspx
こちらは商品一覧を表示するページです。
ObjectDataSource経由で、ListViewにて商品の一覧を表示しています。
一覧の各商品の名称には、商品詳細へのリンクを貼っています。
aspxのフロントページは以下の通りです。

<%@ Import Namespace="Microsoft.AspNet.FriendlyUrls" %>
...
<asp:ListView runat="server" ID="ProductList" DataSourceID="ProductDataSource">
...
    <ItemTemplate>
        <li>
            <asp:Label ID="IdLabel" runat="server" Text='<%# Eval("Id") %>' />:
            <a href="<%# FriendlyUrl.Href("~/Item", Eval("Id")) %>">
                <asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' />
            </a>
        </li>
    </ItemTemplate>
</asp:ListView>
...

FriendlyUtls.Hrefによって、きれいなHTMLを生成しているわけです。
たとえば、商品Noが1の場合は、以下の感じです。

<li>
　　<span id="ProductList_IdLabel_0">1</span>:
　　<a href="/Item/1">
　　　　<span id="ProductList_NameLabel_0">洗濯機</span>
　　</a>
</li>

FriendlyUtls.Hrefは2つめの引数に可変長パラメータを渡すことができます。
（パラメータの内容がセグメントに分割されて、URLが生成されます。）

◆　Item.aspx
こちらは商品の詳細を表示するページです。
Page_Loadにて、Request.GetFriendlyUrlSegments()[0]にて、URLの各セグメントから値を取得します。
上の場合は、「~/List/1」の「1」が取得できます。

コードビハインドは以下の通りです。

public partial class Item : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        var id = Request.GetFriendlyUrlSegments()[0];
        var dao = new ProductDao();
        var product = dao.GetProductById(Convert.ToInt32(id));
        Id.Text = product.Id.ToString();
        Name.Text = product.Name;
        Description.Text = product.Description;
    }
}

apsxのフロントページは以下の通りです。

<div>
    <p>
        商品ID:<asp:Label ID="Id" runat="server" /><br />
        商品名：<asp:Label ID="Name" runat="server" /><br />
        商品説明：<asp:Label ID="Description" runat="server" />
    </p>
</div>

4.サンプルを書いてみての補足

簡単に使えます。
ルーティング情報の管理から解放されるのはいいですね！！

5.サンプルコード

サンプルコードはgithubにホスティングしてあります。
FriendlyUrlのサンプル

6.最後に

もと記事ではモバイルの内容も含まれていますので、ぜひ読んでみてください！