1

我是 MVC 的新手，所以我真的不知道这是什么方法：我希望在一个标签悬停时，其他标签会根据鼠标悬停 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

稍微改变你的标记。在这里，我使用ActionLinkhtml 辅助方法将标签标记更改为锚标记。

<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在我们的方法中调用的动作方法，GenreController它现在接受流派 id 并返回 Json 格式的歌曲列表

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# 执行此操作。根据您的数据的结构，您需要在 javascript 中创建类似字典的内容，以“genreId”作为键，以“listOfSongs”作为其值，或者 - 如果您在 Song 对象中有 GenreId - ，你不需要这个，因为序列化的数据将包含 GenreId 来获取歌曲。

在遍历 Genres 集合时，您可以为内部标签设置一个“data-genreId”属性，该属性应该具有genre.Id 值。

然后，在鼠标悬停回调中，您可以抓取悬停的元素并读取“data-genreId”属性的值——这应该会给您genreId。有了这个Id，你就需要使用js从开头提到的集合中抓取歌曲。获得歌曲列表后，您可以创建包含歌曲信息（如您提到的标题）的 html 元素，并将它们注入页面中的 div 占位符中。

另外，我认为您不需要最后一个 foreach ，因为它在您提供的示例中，因为当使用我提到的方法悬停标签时，它将动态填充。

于 2013-03-28T14:21:58.673 回答