1

私はMVCを初めて使用するので、これに対するアプローチが何であるかはよくわかりません.1つのラベルにカーソルを合わせると、マウスオーバーJavaScriptによって返されたコレクションに基づいて他のラベルが生成されるようにしたい.

<script....
  function getSongs(genreId)
     { return collection of Song objects }

</script>
<div>
   @foreach(Genre genre in Genres)
     {
       <div> <label onmouseover= "here send @genre.Id to the function that will handle this and that will return a collection of Song objects"> @genre.Text </label> </div>
     }
</div>
<div>
   @foreach(Song song in the collection returned by the js function)
    {  <div> <label> @song.Title </label> </div> }
</div>

この例はここに書いたもので、vs から貼り付けたものではないため、構文の間違いがあれば申し訳ありません。これに対する正しいアプローチは何でしょうか。これが正しいアプローチである場合、どのようにこれを達成する必要がありますか? ありがとう

4

2 に答える 2

1

マークアップを少し変更します。ActionLinkここでは、 html ヘルパー メソッドを使用して、ラベル タグをアンカー タグに変更しています。

<div>
 @foreach(Genre genre in Genres)
 {
    <div>@Html.ActionLink(genre.Name,"Songs","Genre",
                          new { id=genre.ID},new { @class="lnkGenre"})</div>
 }
</div>
<div id="songList"></div>

これにより、このようなアンカー タグのリストが生成されます。

<a href="/Genre/Songs/24" class="lnkGenre">Pop</a>

24 がジャンルの ID で、Pop が名前であるとします。

次に、このアンカー タグのクリック イベントをリッスンするための JavaScript コードを記述します。aユーザーがタグをクリックしたとき。クリックされたアンカータグの href 属性値を読み取り、getJSONメソッドを使用して ajax リクエストを作成します。

$(function(){  // putting our code inside document ready

   $("a.lnkGenre").click(function(e){                 

    e.preventDefault(); //prevent the default click event behavior

    var _this=$(this);   
    var songList="";
    $.getJSON(_this.attr("href"),function(data){
        if(data.Status=="Success")
        {
           $.each(data.Items,function(index,item){
              songList="<li>"+item.Title+"</li>";
           });
        }
        $("#songList").html(songList);
    });

 });

});

Songsジャンル ID を受け取り、 JsonGenreController形式で曲のリストを返すアクション メソッドが呼び出される必要があります。

public ActionResult Songs(int id)
{
  List<dynamic> songVMList= new List<dynamic>();
  var songList=repositary.GetSongsForGenre(id);
  foreach(var item in songLsit)
  {
     var sub = new { ID = item.ID, Title= item.Title};
     songVMList.Add(sub); 
  }
  return Json(new { Status = "Success", Items = subCategoryVMList },
                                             JsonRequestBehavior.AllowGet);      
}
于 2013-03-28T14:35:03.103 に答える
1

Genres の Song オブジェクトを JSON としてシリアル化し、それを js 変数に格納できます。JavaScriptSerializer().Serialize(songsList) を使用して、Razor/C# でこれを行うことができます。データの構造に応じて、「genreId」をキーとし、「listOfSongs」を値とする JavaScript の辞書のようなものを作成するか、Song オブジェクトに GenreId がある場合は、シリアル化されたデータには、曲を取得するための GenreId が含まれるため、これは必要ありません。

Genres コレクションを反復処理する場合、genres.Id 値を持つ必要がある「data-genreId」属性を内部ラベルに設定できます。

次に、マウスオーバー コールバックで、ホバーされた要素を取得し、「data-genreId」属性の値を読み取ることができます。これにより、genreId が得られます。この ID を取得したら、js を使用して冒頭で述べたコレクションから曲を取得する必要があります。曲のリストを取得したら、曲情報 (前述のようなタイトル) を保持する html 要素を作成し、たとえば div プレースホルダーのページに挿入できます。

また、私が言及したアプローチでラベルをホバリングすると動的に入力されるため、提供した例のように最後の foreach は必要ないと思います。

于 2013-03-28T14:21:58.673 に答える