Question

尝试ajaxify“喜欢这首歌”。

我理解它的方式，最好将javascript从标记中完全分离到外部.js文件。但是，我们要求将歌曲的id与ajax帖子一起传递。

我们有以下标记

<div id="favorite-song"></div>

我在视图中使用ASP.NET ajax的方式

<div id="favorite-song"><%= Ajax.ActionLink("Make this your favorite", "FavoriteSong", new { id = Model.ID }, new AjaxOptions {...}) %></div>

使用jQuery时，我将onclick事件附加到＃favorite-song以触发ajax.post请求。但是，如何将歌曲ID或一般的发布/路由值传递给jQuery请求？

编辑：更具体一点 - 我们如何将该Model.ID（歌曲ID）传递给javascript？

<小时/> EDIT2：因此，实现此目的的一种方法是将该歌曲ID添加为标记的一部分，并以大致这样的方式从jQuery中的DOM中获取它：

<div id="favorite-song"><span id="SongID-<%= Model.ID %>"></span></div>

然后在jQuery中执行AJAX帖子时，我们得到了span的id，从前面删除'SongID-'，瞧，我们有歌曲ID。

有替代/更好的方法吗？

Answer 1

只需给JQuery提供发布的路线，确切的值将取决于您的控制器。

如果您有类似

的内容

public class FoodController:Controller
{
    [HttpPost]
    public ActionResult FavoriteFood(int id)
    {
       ....
    }
}

然后给JQuery提供要发布的http://yoursite/Food/FavoriteFood/#（其中＃是食物的id）的地址。

Answer 2

如果由于其他原因您没有特别想要SongID部分，您可以通过相对参考选择获取ID，如：

var songid = $('#favorite-song').find('span').attr('id');

要在点击时访问该内容：

<div id="favorite-song"><span id='mysongid'>Make this your favorite</span></div>

$('#favorite-song').click().find('span').attr('id');

或更简单：

$('#favorite-song span').click().attr('id');

或者将其设为“保存”按钮：

$('#favorite-song span').click(function()
    {
      var mysongid = $(this).attr('id');
      $.ajax({
          url: "mypage.aspx/savesong",
          global: false,
          type: "POST",
          data: ({songid : mysongid }),
          dataType: "html",
          success: function(msg){
             alert(msg);
          }
       });
});

并在您的ASPX页面中：

[WEBMETHOD]
savesong(string songid)
{
...

如果您因某些原因需要SongID，您可以剥离客户端或服务器端......由您决定。

Answer 3

如果你有

<div id="favorite-song"></div>

作为触发事件的选择器。然后

var id = $(this).attr("id");
//this will give you "favorite-song"
console.log(id);

或

var id = this.id;
//this will give you "favorite-song"
console.log(id);

将为您提供用户点击的与选择器匹配的项目的ID。

但我会将选择器更改为类，然后将id用作唯一ID，例如

 <div id="song_1" class="favorite-song"></div>

然后在js文件中使用此

$(document).ready(function(){
    $(".favorite-song").live("click", get_song);
});

function get_song(){
   var id = $(this).attr("id").replace("song_", "");

   //this will give you 1       
   console.log(id);
}

现在您可以使用

将id传递给使用AJAX的serverside脚本

var data = {};

data.id = id;

$.ajax({
    url: "/path",
    type: "POST",
    data: data,
    success: function(response){
        console.log(response);
    }
});

Answer 4

您可以使用html5 data-* attributes在html标记中存储额外数据。这适用于所有最近的浏览器。

<span data-songid="12345">

使用您在编辑中描述的方法，您可以使用javascript轻松获取它，而无需解析。并且您可以为一个元素提供更多的data-标记。

// Get the songid
var songid = $(this).attr("data-songid");

如何将post / route值传递给jQuery Ajax POST请求？

4 个答案: