coding@brightwaltz: 03/03/13

Razorにはリンクやフォームを生成してくれるHtmlHelperがある．

例えばリンク生成にはActionLinkを用い，下記のように表記する．

@Html.ActionLink("リンクとして表示される文字", "リンク先のView名 or Controller名")

（ココらへんの話はググれば結構出ます）

ただ，文字以外にも写真などでリンクを作りたい時がある．

写真のみの場合はActionLinkの代わりにImageLinkとして拡張された方がいる．（Google:「ImageLink MVC ASP.net」とかで出ると思う）

しかしDiv要素など，複数のコンポーネントが存在したものを同一リンクで生成したかったので，ちょっと困った．

そこでいろいろ探してたら，"a href"と"Url.Action"を組み合わせれば実現できることが分かった．

以下がサンプル．（引数は適宜変更ください）

	<a href="@Url.Action("View or Controllerへのリンク", new { hoge = "fuga", hogehoge = "fugafuga" })">
	<div class="thumbnail">
	<img src="hoge.jpg" alt="">
	<div class="caption">
	<h3>風景</h3>
	<p>.mp4</p>
	</div>
	</div>
	</a>

view raw mvc_ALink hosted with ❤ by GitHub

これで生成されたものが下図．

デザインにはTwitter Bootstrapを使っており，そのThumbnailsの一要素という位置付け．

これで上記サムネイルのどこをクリックしても，リンク先に飛ぶようになった．

ただ，これを多用するとコードが荒れるので，ほどほどがベスト．

MediaElement.js

サーバ上の動画やYoutubeなどにある動画をHTML5のvideoタグで表示できるjsライブラリ．

これを使ってYoutubeを再生してみたが，なぜかループが止まらない．
サイトに記載されていたoptionの

useful for <audio> player loops
loop: false,

でもダメだった．（そもそもこれはaudio用みたい

そこで，audio,videoで作られたmediaelement要素に対し，次のようなEventListenerを付与した．

	$('audio,video').mediaelementplayer({
	success: function (player, node) {
	$('#' + node.id + '-mode').html('mode: ' + player.pluginType);
	//終了したら，停止
	player.addEventListener('ended', function () {
	// Player is ready
	player.stop();
	}, false);
	},
	});

"ended"状態の時，playerを止める．
なお，3行目の処理はサンプルファイルに書かれているものなのでそちらを参照．

coding@brightwaltz