Manipute与Razor动态javascript超链接

时间:2015-05-28 08:52:08

标签: javascript asp.net-mvc razor

#refrigeratorDelete 是一个超链接(a-tag)我可以有多个冰箱。根据冰箱的数量,我必须生成/操纵超链接ID并将其与独特的冰箱ID合并。但是变量i在[]中是未知的。

我该如何解决?

 $(function () {

     for (var i = 0; i < @(Model.Refrigerators.Count()); i++) {

                $('#refrigeratorDelete@(Model.Refrigerators.ToList()[i]).on('click', function () {

                    // do stuff on single refrigerator
                });
            } 

});

更新

 @foreach (var refrigerator in Model.Refrigerators)
                    {
                        <li>    
                            <a id="refrigeratorDelete(@refrigerator.RefrigeratorId)" href="#">delete</a>
                        </li>
                    } 

更新2

 $('#refrigeratorDelete@(Model.RefrigeratorId)').on('click', function () {
            var title = 'title';
            var warningMessage = 'message';

            ShowYesNoWarningDialog(title, warningMessage, function () {
            // When OK/YES button is clicked call the server side action:
                document.location.href = '@(MVC.Devices.Refrigerator.Delete(Model.RefrigeratorId).Result.ToHRefUrl())';
            });
        });

说明:当有人点击删除链接时,将打开删除对话框,其中显示是/否按钮。如果单击否,则关闭对话框。如果单击是,则关闭,但ShowYesNoWarningDialog现在执行document.location.href = ...代码,该代码将转到服务器。在MVC内部...删除操作我无法传递客户端ID,因为上下文未知。

删除操作必须是客户需要的非AJAX调用!

2 个答案:

答案 0 :(得分:0)

在视图中为每个链接指定一个类名,并将Refrigerator的ID属性添加为data-属性

@foreach (var refrigerator in Model.Refrigerators)
{
  <li>    
    <a href="#" class="delete" data-id="@refrigerator.RefrigeratorId">delete</a>
  </li>
}

然后在剧本中

var url = '@Url.Action("Delete", "controllerName")';
$('.delete').click(function() {
  var id = $(this).data('id'); // get the ID of the refrigerator
  var li = $(this).closest('li'); // in case you want to delete the li element
  $.post(url, { id: id }, function(response) {
    // if successful, use li.remove(); to remove the element
  });
});

上面的脚本假设您有一个类似于

的方法
[HttpPost]
public ActionResult Delete(int ID)
{
  // delete the refrigerator based on its ID
  return Json(true); // indicate success?
}

答案 1 :(得分:0)

您需要在删除按钮中添加一个类:

 @foreach (var refrigerator in Model.Refrigerators)
     {
         <li>
             <a id="refrigeratorDelete(@refrigerator.RefrigeratorId)" class="my-delete-btn" href="#">delete</a>
         </li>
     } 
当你附上像这样的onclick事件时,

和我们一起:

$(function () {
    $('.my-delete-btn').on('click', function () {
        var currentId = this.id;
        // do stuff on single refrigerator
    });
});