アーティストのリストとアルバムのリストを格納するViewModelを作成できます
public class ArtistWithHighlights
{
public Artist Artist { set;get;}
public IEnumerable<Albums> Albums{ set;get;}
}
そしてControllerllerにGETビューのアクションメソッドを記述します。Get all Artists と Get the Albums では、最初の Artist に属します。(これは、要件に応じて変更できます)
public ActionResult ArtistsWithHighLights()
{
List<ArtistWithHighlights> allArtists=new List<ArtistWithHighlights>();
allArtists=GetAllArtists();
//If we have atlease one artist in the list, Load the albums for the first one only
if(allArtists.Count>0)
{
allArtists[0].Albums=GetAlbumsForArtist(allArtists[0].Artist.ArtistID);
}
return View(allArtists);
}
強く型付けされたビューは次のようになります
@model List<ArtistWithHighlights>
@foreach(var artist in Model)
{
<a id="@artist.ID" class="artistName">@artist.Name</p>
}
<div id="albums">
<h3>Highlighted Albums</h3>
@foreach(var album in Model[0].Albums)
{
<p>@album.Name</p>
}
</div>
別のアーティストのアルバムを選択 (クリック イベント) で取得するにAction
は、渡されたアーティスト ID のアルバムのリストを返す別のメソッドに ajax 呼び出しを行い、それを div に表示できます。
$(function(){
$(".artistName").click(function(e){
e.preventDefault();
var artistId=$(this.attr("id");
$("#albums").load("../Albums/"+artistId);
});
});