从控制事件中获取html格式的javascript结果

Get javascript result in html from control event

本文关键字：格式 javascript 结果 html 获取 控制 事件      更新时间：2023-09-26

我是新的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中粘贴，所以如果有一些语法错误，很抱歉。什么是正确的方法，如果这是正确的方法，那么应该如何完成?由于

您可以将来自types的Song对象序列化为JSON并将其存储在js变量中。你可以在Razor/c#中使用JavaScriptSerializer(). serialize (songsList)来实现这一点。根据你的数据结构，你要么需要在javascript中创建一个类似字典的东西，它有'genreId'作为键，'listOfSongs'作为值，或者-如果你在Song对象中有genreId -你不需要这个，因为序列化的数据将包含genreId来获取歌曲。

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

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

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

稍微改变一下你的标记。在这里，我使用ActionLink html helper方法将标签标签更改为锚标记。

<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代码来监听这个锚标记的click事件。当用户点击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);
    });
 });
});

我们应该在GenreController中有一个名为Songs的操作方法，它接受类型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);      
}
相关文章：