Javascript MVC3-只有第一行链接可以很好地与Jquery模式对话框配合使用

使用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>

@foreach（模型中的变量项）{
@DisplayFor（modeleItem=>item.Title）
@DisplayFor（modelItem=>item.Category）
@ActionLink（“Edit”，“Edit”，new{id=item.id}，new{id=“modalEdit”}）|

这是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;
    });
});

$（文档）.ready（函数（）{
//初始化对话框
$（“#resultEdit”）。对话框（{modal:true，width:300，resize:true，position:'center'，title:'Edit Information'，autoOpen:false，
打开：函数（事件，ui）{$（“.ui对话框标题栏关闭”）.hide（）；}
});
});
$（函数（）{
$（'#modalEdit'）。单击（函数（）{
//从this.href加载内容，然后将其转换为对话框。
$（'#resultEdit'）.load（this.href）.dialog（'open'）；
返回false；
});
});

---

不能有多个具有相同ID的元素。

---

改用类名。

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

这将使jquery的行为非常不可预测

将编辑链接改为共享类，如下所示：

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

并将选择器更改为：

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

---

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

例如

及

---

你比我快！请注意，因为

class

在C#中是一个保留字，所以在添加class html属性时，必须在它前面加一个

@

符号。例如

new{@class=“modalEdit”}

谢谢！这很有效。。除了class需要是@class之外。（来自Charlinos响应）好的！我正在使用MVC2和vb.net，所以语法有点不同：）很高兴它成功了！非常感谢..感谢你的帮助。

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

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