如何在actionlink mvc 4中调用javascript函数？

Question

so i have my view that contains some actionlinks and a javascript method, what i want is call my script in the actionlink, this is my script :

function deleteSubscriber(id)
{
  var url = '/Subscribers/Delete/' + id;
  $.ajax({
    type: "delete",
    url: url,
    data: {},
    datatype: 'json',
    success: function (data) { alert(id); },
  });
}

this is my actionlink :

 @Html.ActionLink("Delete", "Delete", new { id=//here i want to put my script  },new { @class = "delete-logo" })

this is my action :

[HttpDelete,ActionName("delete")]
    public ActionResult Delete(string id)
    {
        try
        {
              IEnumerable<Subscribe> list = from s in dbcontext.Subscribes select s;
              foreach (var sb in list)
              {
                  if (sb.cin == id)
                  {
                      dbcontext.Subscribes.Remove(sb);
                  }
              }
              dbcontext.SaveChanges();
              return View("Index");
        }
        catch
        {
            return View();
        }
    }

Answer 1

There are many ways to do this, Here is one of them:-

In your View:-

@Html.ActionLink("Delete", "Delete", new { id=//here i want to put my script  },
 new { @class = "delete-logo" });

If you want to call it ajax way you ca create your link like this.

<a class="delete-logo" data-key="@Model.Cin" href="javascript:void(0);"/>

Script:-

$(function()
{
   $('.delete-logo').on('click',function(){
   //Do something to get id.
   //Get the delete button id if it is the id you want to use for deletion.
   var id = $(this).data('key'); 
   deleteSubscriber(id);
  })
});

Answer 2

If you want to insist on having the JavaScript call in your anchor, you don't necessarily need/want to use the HtmlHelper. You can write plain old HTML:

<a href="@Url.Action("delete")" onclick="javascript:deleteSubscriber(@id)">Delete</a>

I would not recommend using this syntax, though; jQuery (and other JavaScript frameworks) provide a much less intrusive way of binding handlers:

<a href="@Url.Action("delete")" class="delete-btn" data-id="@id">Delete</a>

$('a.delete-btn').on('click', function(event) {
    event.preventDefault();
    // call the function
    deleteSubscriber($(this).data('id'));
});

Obviously, in both of these I assume you have some sort of loop where you have access to an id variable.

Answer 3

You don't need to have it be an ActionLink unless you wanted it to call it if JavaScript is turned off.

I would add a class attribute to the link and bind it with the .click event.