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.最後に
もと記事ではモバイルの内容も含まれていますので、ぜひ読んでみてください！
コメント