how to retrieve the ID of the Link in Jquery?

i am having a situation here ... please consider the following scenario

1) value coming from the database eg: personName ( whos id in the database is 3 )

2) i am making a link of the " personName " through @Html.ActionLink

3) the link id is "lnkName"

i want to retrieve the id of the personName which is 3 when the lnkName is clicked. please help me ..

here is my code for the link..

@foreach (var item in Model)
{

    <h3>  @Html.ActionLink(item.personName, "Details", "Post", new { Id = item.personID } , new { @id = "lnkName" } ) </h3> 

here is th开发者_开发技巧e Jquery code i have got so far...

$(document).ready(function () {
        $('#lnkName').click(function () {
            $.ajax({
                    url: @Url.Action("AddViews","Post")
                    data: // how can i retrieve the id of the clicked link which is 3
                });
        });
    });

When the link is clicked, you can get it's id via the this variable:

$(document).ready(function () {
        $('#lnkName').click(function () {
            var id = this.id;     // <=== you can fetch the id of the clicked link via "this"
            $.ajax({
                    url: @Url.Action("AddViews","Post"),
                    data: id
                });
            return(false);
        });
});

If it's not the CSS ID that you want here (I wasn't sure in your question), but some other piece of data like the personID, then you should put that other piece of data as a data attribute on the link tag and fetch that attribute with jQuery using $(this).data("xxx").

For example, if the link generated by your server-side code looked like this:

<a href="xxx" class="lnkName" data-personID="3">

Then, in your click handler, you can fetch that personID like this (and then you would have to put it into your ajax parameters however you want it to be sent):

$(document).ready(function () {
        $('#lnkName').click(function () {
            var personID = parseInt($(this).attr("data-personID"), 10);  // <===
            $.ajax({
                    url: @Url.Action("AddViews","Post"),
                    data: personID
                });
            return(false);
        });
});

Generate the link the way it should be, directly containing the correct url in the href property. This way you don't need to worry about it:

@Html.ActionLink(
    item.personName, 
    "AddViews", // <!-- modify the action so that it directly points to the correct one
    "Post", 
    new { id = item.personID }, 
    new { @class = "lnkName" } // <!-- Notice that I use a class here instead of an id because ids must be unique in the DOM and in your code you have multiple links with the same id resulting into invalid markup
)

and then in a separate javascript file you could unobtrusively AJAXify this anchor:

$(document).ready(function () {
    $('.lnkName').click(function () {
        $.ajax({
            url: this.href,
            success: function(result) {

            }
        });

        // that's important in order to cancel the default action
        // or the browser will simply redirect to the url and the AJAX
        // call will never have time to execute
        return false;
    });
});

This way you could put your javascript in a completely separate js file, the way it should be. And benefit of course from minifying it, gzipping it, caching it and even serving it from a CDN. Always try to put javascript in separate files and avoid them depending on server side expressions such as @Url.Action. I have shown you a way to avoid such undesired dependency.