MVC3 - 只有第一排的链接与jQuery模态对话框效果很好 [英] MVC3 - Only first row link works well with Jquery Modal Dialog

问题描述

与MVC3，剃须刀，jQuery的，使用Javascript工作。下面code遍历并显示字段和链接表结构。每行的链接，触发一个jQuery模态对话框显示的局部视图页面作为一个弹出。但弹出对话框仅用于第一行...从第二行链路和下行打开页面作为一个完全成熟的网页，而不是一个弹出模态对话框。如何修复this..thanks的任何帮助。

Working with MVC3, Razor, Jquery, Javascript. The below code loops through and displays a table structure with fields and a link. The link on each row, triggers a Jquery Modal Dialog that displays a partial view page as a pop up. But the pop up dialog works only for the first row... the link from second row and down open the page as a full blown web page and not a pop up modal dialog. How to fix this..thanks for any help.

@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模态窗口code。

This is the Jquery Modal Dialog code.

<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！

It's likely because all your edit links have the same id!

这将会让jQuery的行为高度未predictably！

This is going to make jquery act highly unpredictably!

给你的编辑链接共享类代替，就像这样：

Give your edit links a shared class instead, like this:

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

和您选择更改为：

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

这篇关于MVC3 - 只有第一排的链接与jQuery模态对话框效果很好的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！