Unable to click and send parameters in mvc4 actionlink

Question

I am creating link one button and when the users clicks on link button i am calling partial view. I want to have click event of Actionlink button and send parameters in actionlink but i am facing problems. I am not able to send parameters and click event. I am using class selector for click even as below. This is my actionlink button.

@foreach (var group in Model.records)
 {
  <tr>
  <td>@Html.ActionLink(@group.clientId.ToString(),"",new { @clientId =@group.clientId.ToString(),@class ="delete" },null)</td>
  </tr>
 }

This is my jquery code.

  $('.delete').click(function (id) {
                alert(1);
                $.ajax({
                    type: 'POST',
                    dataType: 'html',
                    data: { clientId: id },
                    url: '/DocumentVerification/detailsbyClientId',
                    success: function (data) {
                        $('#detailsbyclientId').html("");
                        $('#detailsbyclientId').html(data);
                    }
                });
            });

At present when i click on actionlink below url will be there in browser. Can anyone suggest me where I am going wrong? Thanks in advance.

http://localhost:62777/DocumentVerification?clientId=1006&class=delete

Answer 1

Your ActionLink() is wrong and you adding the class name as a route value. But there is no need to use ActionLink() (and if you do then you need to cancel the default redirect). In addition, the id parameter in your method is the event object (not a value)

Change you html to

<a href="#" data-id="@group.clientId" class="delete">@group.clientId</a>

and the script to

$('.delete').click(function (id) {
    var id = $(this).data('id');
    $.ajax({
        type: 'POST',
        dataType: 'html',
        data: { clientId: id },
        url: '@Url.Action("detailsbyClientId", "DocumentVerification")', // don't hard code url's
        success: function (data) {
            // $('#detailsbyclientId').html(""); not required
            $('#detailsbyclientId').html(data);
        }
    });
});

or more simply

var url = '@Url.Action("detailsbyClientId", "DocumentVerification")';
$('.delete').click(function (id) {
    var id = $(this).data('id');
    $('#detailsbyclientId').load(url, { clientId: id });
});