MVC3-只有第一行链接可与Jquery Modal Dialog一起很好地工作

问题描述

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

    

解决方法

        可能是因为您所有的编辑链接都具有相同的ID！ 这将使jquery的行为异常高变！ 而是给您的编辑链接一个共享的类，如下所示：

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

并将您的选择器更改为：

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

    ,        尝试更改链接以使用类而不是ID。 例如。

@Html.ActionLink(\"Edit\",new { @class = \"modalEdit\" })

和

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

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