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で行います。
[sourcecode]
PM> Install-Package Microsoft.AspNet.FriendlyUrls -Pre
[/sourcecode]
※注意:ASP.NET Fall 2012 Updateがリリースされた場合は、プロジェクトテンプレートにこのモジュールが最初から入っていると思います。

nugetでモジュールを取得した後に、ReadMeが表示されるので、それに従い、少し設定をします。
Global.asaxのApplication_Startに、
[sourcecode language=”csharp”]
RouteConfig.RegisterRoutes(RouteTable.Routes);
[/sourcecode]
を記載します。

3.実際に使ってみる

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

◆ List.aspx
こちらは商品一覧を表示するページです。
ObjectDataSource経由で、ListViewにて商品の一覧を表示しています。
一覧の各商品の名称には、商品詳細へのリンクを貼っています。
aspxのフロントページは以下の通りです。
[sourcecode language=”html”]
<%@ 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>

[/sourcecode]

FriendlyUtls.Hrefによって、きれいなHTMLを生成しているわけです。
たとえば、商品Noが1の場合は、以下の感じです。
[sourcecode language=”html”]
<li>
  <span id="ProductList_IdLabel_0">1</span>:
  <a href="/Item/1">
    <span id="ProductList_NameLabel_0">洗濯機</span>
  </a>
</li>
[/sourcecode]

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

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

コードビハインドは以下の通りです。
[sourcecode language=”csharp”]
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;
}
}
[/sourcecode]
apsxのフロントページは以下の通りです。
[sourcecode language=”html”]
<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>
[/sourcecode]

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

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

5.サンプルコード

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

6.最後に

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