将模型项id从Html.ActionLink传递给jquery函数

时间:2013-04-09 16:34:43

标签: javascript jquery html asp.net-mvc asp.net-mvc-4

我希望能够使用Html.ActionLink()将下面代码中每个项目的id传递给jQuery函数。

@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);
            }

该函数被称为ok,但即使我传递'hello',它似乎传递了一个JSON字符串,其中没有一个参数是'id'i,e。 123456789

如何让Actionlink获取该模型项的ID?

2 个答案:

答案 0 :(得分:3)

首先,你有一个语法错误。我认为,这应该是:

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

或者

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

其中一个。

但是,主要是我采取不同的方法:

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

然后在jQuery中:

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

这样,您可以更清楚地分离关注点。

我希望这会有所帮助。

答案 1 :(得分:0)

对于您的按钮,您可以使用类似 -

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

你的jQuery可能就像Moby提到的那样 -

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

这种方式如果您需要在jQuery中执行某些操作,只需加载新页面,您可以在那里执行此操作并让函数确定您是否重定向。