MVC3 - 只有第一行链接适用于 Jquery 模态对话框答案

【问题标题】：MVC3 - Only first row link works well with Jquery Modal DialogMVC3 - 只有第一行链接适用于 Jquery 模态对话框
【发布时间】：2011-06-13 17:22:12
【问题描述】：

使用 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;
    });
});

【问题讨论】：

标签： javascript jquery asp.net-mvc-3 razor

【解决方案1】：

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

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

给你的编辑链接一个共享类，像这样：

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

并将您的选择器更改为：

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

【讨论】：

你刚刚打败了我！请注意，因为class 是 C# 中的保留字，所以在添加类 html 属性时必须在其前面加上 @ 符号。例如。 new { @class = "modalEdit" }
谢谢！那行得通..除了类需要是@class。（来自 Charlinos 的回应）
对！我使用的是 mvc 2 和 vb.net，所以语法有点不同 :) 很高兴它起作用了！

【解决方案2】：

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

例如

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

和

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

【讨论】：

非常感谢......感谢您的帮助。

【解决方案3】：

您不能有多个具有相同 ID 的元素。
请改用类名。

【讨论】：