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

我是MVC的新手，所以我不知道这是什么方法：我希望在一个标签上悬停时，其他标签会根据集合生成通过鼠标悬停的JavaScript，像这样的东西返回：从控制事件中获取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粘贴，很抱歉，如果有一些语法错误。这将是什么正确的方法，如果这是正确的做法，那么这应该如何完成？谢谢

来源

2013-03-28 bokkie

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

在迭代流派集合时，可以将内部标签设置为应具有genre.Id值的'data-genreId'属性。

然后，在鼠标悬停回调上，您可以抓住悬停的元素并阅读'data-genreId'属性的值 - 这应该给你genreId。有了这个ID，你需要从使用js开始提到的集合中获取歌曲。一旦你有歌曲列表，你可以创建html元素来保存歌曲信息（像你提到的标题），并将其注入div占位符中的页面。

此外，我不认为你需要最后的foreach，因为它是在你提供的例子中，因为当我用我提到的方法悬停标签时，这将被动态填充。

来源

2013-03-28 14:21:58

稍微改变你的标记。在这里，我正在使用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); 
    }); 

}); 

});

我们应该在我们的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);  
}

来源

2013-03-28 14:35:03 Shyju

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

回答

相关问题