読者です 読者をやめる 読者になる 読者になる

miso_soup3 Blog

主に ASP.NET 関連について書いています。

ASP.NET MVC RouteLink サンプル

by 深夜連絡 ASP.NET MVC な Web アプリ Advent Calendar 2013 12 日目

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

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

概要

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

  • とある日の日記ページ「~/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 クラスを用意し、2つのアクションを定義します。

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
の2つと、
Views>Shared>_DateLink.cshtml
の合わせて3つを用意します。3つめは、前後の日付へのリンクを書くための共有のビュー(Partial View)になります。

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

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 によってリンクを貼っています。
このビューは、先の2つのビューにて @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>

(@Url.RouteUrl は、@Html.RouteLink の URL だけ出力するバージョンです。)

こんなふうに矢印で遷移できます。
(しょーもない例ですみません)

f:id:miso_soup3:20131225171649p:plain

おしまい

RouteLink のメリットの1つ、”パラメーターの指定だけでリンクを貼れる”を利用することで、リンクを共有ビューに書くことができる、という例でした。
RouteLink は他にもいろんな活用方法があると思います。