MVC3 - 只有第一行链接适用于Jquery Modal Dialog

Question

使用MVC3,Razor,Jquery,Javascript.下面的代码循环显示一个包含字段和链接的表结构.每行上的链接触发一个Jquery模式对话框,该对话框将弹出一个部分视图页面.但弹出对话框仅适用于第一行...第二行的链接和向下打开页面作为完整的网页而不是弹出模式对话框.如何解决这个问题...感谢任何帮助.

@foreach (var item in Model) {
<tr>
    <td>
        @Html.DisplayFor(modelItem => item.Title)
    </td>
    <td>
         @Html.DisplayFor(modelItem => item.Category)
    </td>

    <td>
        @Html.ActionLink("Edit", "Edit", new { id = item.ID }, new { id = "modalEdit" })   |             

    </td>
</tr>

这是Jquery模态对话框代码.

<script type="text/javascript">
$(document).ready(function () {
    //initialize the dialog
    $("#resultEdit").dialog({ modal: true, width: 300, resizable: true, position: 'center', title: 'Edit Information', autoOpen: false, 
    open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }

    });
});

$(function () {
    $('#modalEdit').click(function () {
        //load the content from this.href, then turn it into a dialog.
        $('#resultEdit').load(this.href).dialog('open');
        return false;
    });
});

Answer 1

这可能是因为您的所有编辑链接都具有相同的ID!

这将使jquery行为高度无法预测!

为您的编辑链接提供一个共享类,如下所示:

@Html.ActionLink("Edit", "Edit", new { id = item.ID }, new { @class = "modalEdit" }) 

并将您的选择器更改为:

$('.modalEdit').click(function () {

Answer 2

尝试更改链接以使用类而不是ID.

例如

@Html.ActionLink("Edit", "Edit", new { id = item.ID }, new { @class = "modalEdit" })

和

$('.modalEdit').click(function () ...