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

Question

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>

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

Answer 1

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

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" }) 

and change your selector to :

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

Answer 2

Try changing the link to use a class rather than an id.

E.g.

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

and

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