javascript - 从控件事件获取HTML中的JavaScript结果

我是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中，因此如果出现语法错误，抱歉。
什么是正确的方法，如果这是正确的方法，那么应该如何完成呢？谢谢

最佳答案

您可以将流派中的Song对象序列化为JSON并将其存储在js变量中。您可以使用JavaScriptSerializer（）。Serialize（songsList）在Razor / C＃中执行此操作。根据数据的结构方式，您需要在javascript中创建像字典一样的字典，以“ genreId”作为键，并以“ listOfSongs”作为其值，或者-如果您在Song对象中有GenreId，则-您不需要它，因为序列化的数据将包含GenreId以为其获取歌曲。

遍历Genres集合时，可以将应具有genre.Id值的'data-genreId'属性设置为内部标签。

然后，在鼠标悬停回调上，您可以获取悬停的元素并读取'data-genreId'属性的值-这应该为您提供genreId。有了这个ID，您就需要使用js从开头提到的收藏中提取歌曲。获得歌曲列表后，您可以创建html元素来保存歌曲信息（如您提到的标题），然后将它们插入div占位符的页面中。

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

关于javascript - 从控件事件获取HTML中的JavaScript结果，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15677346/