Pass model item id to jquery function from Html.ActionLink

Question

I want to be able to pass the id of each item in below code to jQuery function using Html.ActionLink().

@foreach (var item in Model)
    {
        if (item.AppointmentStatus == "P")
        {   
        <div class="appointment-main-block" role="menuitem" tabindex="20">
            <div class="appointment-heading">
                @Html.DisplayFor(modelItem => item.Speciality)
            </div>
            <div class="appointmenttitle">
                Date
               <br />
                <br />
                Clinician
               <br />
                <br />
                Location
            </div>
            <div class="appointmentdata">
                @Html.DisplayFor(modelItem => item.AppointmentDate)
                <br />
                <br />
                @Html.DisplayFor(modelItem => item.ClinicianName)
                <br />
                <br />
                @Html.DisplayFor(modelItem => item.Location)
            </div>

            <div class="appointmentbutton appointmentbuttonclickable">
                View @Html.ActionLink(" ", "Details", "MyAppointments",  new { id = item.AppointmentIdentifier.id }, new { onclick = "getAppointmentRef( item.AppointmentIdentifier.id)" })
                <br />
                <img src="/Content/images/icons/view.png" alt="view icon" />
            </div>
        </div>
        }
    }

// jQuery - Very Basic for now also considered
$(".appointmentbutton").click(getAppointmentRef);
    function getAppointmentRef(id) {
                alert(id);
            }

The function is called ok but even if I pass a 'hello' it seems to pass an JSON string none of whose params are the 'id' i,e. 123456789

How do I make the Actionlink pick up the id for that model item?

Answer 1

Firstly you have a syntax error there. This, I believe, should read:

onclick = "getAppointmentRef( @item.AppointmentIdentifier.id)"

Or

onclick = "getAppointmentRef( " + @item.AppointmentIdentifier.id + ")"

One of the two.

However, principally I would take a different approach:

@Html.ActionLink("Link text", "Details", "MyAppointments",  new { id = item.AppointmentIdentifier.id }, new { @class = "myLink", data_id = item.AppointmentIdentifier.id })

Then in jQuery:

$(".myLink").click(function () {
    alert($(this).data("id"));
});

That way, you have a much clearer separation of concerns.

I hope this helps.

Answer 2

For your button you can use something like -

<input type="button" data-apptid="@item.AppointmentIdentifier.id" class="myLink" value="Click me!" />

And your jQuery could be like Moby mentioned -

$(".myLink").click(function () {
    document.location.href = "/MyAppointments/Details/" & $(this).data("apptid");
});

This way if you needed to do something in jQuery besides just load the new page, you could do it there and have the function determine whether you redirect or not.