Question

In my application I have some table data that looks like this:

<table>
    <tr>
        <th>Actions</th>
        <th>Text</th>
    </tr>
    @foreach( var item in Model.Items ) {
    <tr>
        <td>
            @Html.ActionLink("Edit", "Edit", "Items", new { @class = "edit-item-link", id = "edit-item-" + item.Id })
            @Html.ActionLink("Delete", "Delete", "Items", new { @class = "delete-item-link", id = "delete-item-" + item.Id })
        </td>
        <td>@item.Text</td>
    </tr>
    }
</table>

The view will create action links like the following:

<a href="/Items/Edit/1" class="edit-item-link" id="edit-item-1">Edit</a>

I am then using jquery to override the action:

$('.edit-item-link').live('click', function(e) {
    e.preventDefault();

    $.ajax({
        type: 'POST',
        url: ''
        dataType: 'json'
    });
});

When I pass the URL to the ajax call I want to use the following url: /Items/GetItemJson/1

How can I get the id value from the url without having to use a regex?

I don’t want to change the url in the action link because I will be using it in another way.

Answer 1

The easiet approach would be to use data-* attributes

@Html.ActionLink("Edit", "Edit", "Items", new { @class = "edit-item-link", data_id=item.Id,  id = "edit-item-" + item.Id })

Which should render the following:

<a href="/Items/Edit/1" class="edit-item-link" id="edit-item-1" data-id="1">Edit</a>

And than in your jQuery you can use .data()

$('.edit-item-link').live('click', function(e) {
    e.preventDefault();
    var theId = $(this).data("id");
    $.ajax({
        type: 'POST',
        url: ''
        dataType: 'json'
    });
});