MVC3-只有第一行链接能很好地与Jquery Modal Dialog配合使用

MVC3 - Only first row link works well with Jquery Modal Dialog

本文关键字:Modal Jquery Dialog 很好 链接 一行 MVC3-      更新时间:2023-09-26

使用MVC3、Razor、Jquery、Javascript。下面的代码循环显示一个包含字段和链接的表结构。每行上的链接都会触发一个Jquery Modal对话框,该对话框以弹出窗口的形式显示部分视图页面。但是弹出对话框只适用于第一行。。。从第二行向下的链接将页面打开为一个完整的网页,而不是一个弹出的模式对话框。如何修复。。谢谢你的帮助。

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

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

这将使jquery的行为高度不可预测!

给你的编辑链接一个共享类,像这样:

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

并将您的选择器更改为:

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

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

例如

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

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

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

相关文章: