javascript - Pass model item id to jquery function from Html.ActionLink - Stack Overflow

admin管理员组

文章数量:1023868

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?

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?

• javascript
• jquery
• html
• asp-mvc
• asp-mvc-4

Share Improve this question Follow edited Apr 9, 2013 at 16:39 user610217 asked Apr 9, 2013 at 16:34 ShufflerSharkShufflerShark 38711 gold badge44 silver badges2020 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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.

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.

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?

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?

• javascript
• jquery
• html
• asp-mvc
• asp-mvc-4

Share Improve this question Follow edited Apr 9, 2013 at 16:39 user610217 asked Apr 9, 2013 at 16:34 ShufflerSharkShufflerShark 38711 gold badge44 silver badges2020 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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.

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.

本文标签： javascriptPass model item id to jquery function from HtmlActionLinkStack Overflow