ASP.NET MVC RouteLink サンプル

前回は RouteLink の基本についてでした。今回は、この RouteLink を活用したサンプルを実装します。

RouteLink のメリットの１つ、”パラメーターの指定だけでリンクを貼れる”を利用した例になります。

概要

２つのページを用意します。

とある日の日記ページ「~/Diary/{*date}」
とある日の日記のコメントページ「~/Comment/{*date}」

それぞれのページには、前後の日付へ遷移するためのリンクと、日付は同じのまま各ページを行き来するためのリンクを用意します。

f:id:miso_soup3:20131225164801p:plain

f:id:miso_soup3:20131225164812p:plain

（日付を含む URL の定義方法については、ASP.NET MVC 日付でルーティングをご覧ください。）

実装

プロジェクトの用意

Visual Studio のサイトから、Visual Studio Express 2013 for Web（以下、VS Express 2013）をインストールします。無償です。

VS Express 2013 を開き、メニューからファイル＞新規作成＞プロジェクトを選択します。
「ASP.NET Web アプリケーション」を選択し、OK します。

「MVC」を選択し OK します。

コントローラーの用意

DiaryController クラスを用意し、２つのアクションを定義します。

DiaryController.cs :

using System;
using System.Web.Mvc;

namespace RouteLinkProject.Controllers
{
	public class DiaryController : Controller
	{
		// ~/Diary/{*date}
		public ActionResult Details(DateTime date)
		{
			return View();
		}

		// ~/Comment/{*date}
		public ActionResult Comment(DateTime date)
		{
			return View();
		}
	}
}

本当は「~/Comment/{*date}」は CommentController で対応するのが適切かもしれませんが、面倒なので DiaryController にまとめました。

ビューの用意

Views＞Diary＞Details.cshtml
Views＞Diary＞Comment.cshtml
の２つと、
Views＞Shared＞_DateLink.cshtml
の合わせて３つを用意します。３つめは、前後の日付へのリンクを書くための共有のビュー（Partial View）になります。

まずは、コントローラーに定義した２つのアクションに対応するビューを作成します。

Views＞Diary＞Details.cshtml ：

@{ ViewBag.Title = "Details"; }

<h2>@ViewContext.RouteData.Values["date"] 日記</h2>

@Html.RouteLink("コメントへ", "RouteComment")

@Html.Partial("_DateLink")

Views＞Diary＞Comment.cshtml ：

@{ ViewBag.Title = "Comment"; }

<h2>@ViewContext.RouteData.Values["date"] コメント一覧</h2>

@Html.RouteLink("日記へ", "RouteDiary")

@Html.Partial("_DateLink")

@Html.Partial("_DateLink")については、後ほど説明します。@Html.RouteLink で、それぞれのページへ遷移するためのリンクを記述しています。

次に、共有のビュー「_DateLink.cshtml」を用意します。
Views フォルダ＞Shared フォルダを右クリックし、追加＞ビューを選択します。

ビュー名を「_DateLink」、「部分ビューとして作成」にチェックし、「追加」をクリックします。

f:id:miso_soup3:20131225170459p:plain

_DateLink.cshtml ののコードは以下になります。

Views＞Shared＞_DateLink.cshtml：

@{
	//現在のルート date の値を取得します。
	DateTime currentDate = Convert.ToDateTime(ViewContext.RouteData.Values["date"]);
	
	//前後の日付の値を取得します。
	String yesterdayText = currentDate.AddDays(-1).ToShortDateString();
	String tomorrowText = currentDate.AddDays(1).ToShortDateString();
}

<div>
	@Html.RouteLink(yesterdayText + "←", new { date = yesterdayText })
	@Html.RouteLink("→" + tomorrowText, new { date = tomorrowText })
</div>

現在のルートのパラメーター{date} の値から前後の日付を求め、RouteLink によってリンクを貼っています。
このビューは、先の２つのビューにて @Html.Partial("_DateLink") で呼び出されます。

ルーティングの設定

最後にルーティングの設定を行い、ルートのパラメーター {date} を定義します。
App_Start フォルダにある RouteConfig.cs を、以下を参考に記述します。

using System.Web.Mvc;
using System.Web.Routing;

namespace RouteLinkProject
{
	public class RouteConfig
	{
		public static void RegisterRoutes(RouteCollection routes)
		{
			routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

			routes.MapRoute(
				name: "RouteDiary",
				url: "Diary/{*date}",
				defaults: new { controller = "Diary", action = "Details" }
			);

			routes.MapRoute(
				name: "RouteComment",
				url: "Comment/{*date}",
				defaults: new { controller = "Diary", action = "Comment" }
			);

			routes.MapRoute(
				name: "Default",
				url: "{controller}/{action}/{id}",
				defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
			);
		}
	}
}

実装は以上になります。
F5 でデバッグし、「~/diary/2013/04/01」にアクセスします。リンクをクリックすることで、日付を変更したり、各ページを行き来したりすることを確認できます。

おまけ

VS 2012 より、ASP.NET のプロジェクトにはデフォルトで Bootstarp の CSS・Script が組み込まれています。

_DateLink.cshtml を以下のように書き換えれば、

@{
	//現在のルート date の値を取得します。
	DateTime currentDate = Convert.ToDateTime(ViewContext.RouteData.Values["date"]);
	
	//前後の日付の値を取得します。
	String yesterdayText = currentDate.AddDays(-1).ToShortDateString();
	String tomorrowText = currentDate.AddDays(1).ToShortDateString();
}
<a href="@Url.RouteUrl(new { date = yesterdayText })">
	<span class="glyphicon glyphicon-circle-arrow-left" style="font-size:30px"></span>
</a>

<a href="@Url.RouteUrl(new { date = tomorrowText })">
	<span class="glyphicon glyphicon-circle-arrow-right" style="font-size:30px"></span>
</a>