MVC3 - только диалог первой строки хорошо работает с Jquery Modal Dialog

Question

Работа с 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;
    });
});

Answer 1

Вероятно, потому что все ваши ссылки для редактирования имеют одинаковый идентификатор!

Это заставит jquery действовать крайне непредсказуемо!

Вместо этого предоставьте своим ссылкам для редактирования общий класс, например так:

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

и измените ваш селектор на:

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

Answer 2

Попробуйте изменить ссылку, чтобы использовать класс, а не идентификатор.

* 1003 Е.Г. *

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

и

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

Answer 3

У вас не может быть нескольких элементов с одинаковым идентификатором.
Вместо этого используйте имя класса.