JQuery скрипт требует значения из asp.net mvc Razor ForEach

Question

У меня есть следующий скрипт jQuery, чтобы показать диалоговое окно модели, позволяющее редактировать выбранный элемент из таблицы:

<script type="text/javascript">
$(function () {
    $('#dialog').dialog({
        autoOpen: false,
        width: 800,
        resizable: false,
        title: 'Edit Person',
        modal: true,
        open: function (event, ui) {
            var url = '@Html.Raw(Url.Action("Edit", "Person", new {
                id = **Need item.Id here**,
                selectedPersonFor = Model.SelectedPersonFor,
                selectedPersonForId = Model.SelectedPersonForId,
                clientAccountId = Model.ClientAccountId
            }))';
            $(this).load(url);
        },
        buttons: {
            "Save": function () {
                $(this).dialog("save");
                // prevent the default action, e.g., following a link
                return false;
            },
            "Close": function () {
                $(this).dialog("close");
                // prevent the default action, e.g., following a link
                return false;
            }
        }
    });

    $('#editperson').click(function () {
        $('#dialog').dialog('open');
    });
});

Это диалоговое окно открывается, когда пользователь нажимает кнопку редактирования.кнопка для определенной строки в следующей таблице (показана только частичная разметка для таблицы):

@foreach (var item in Model.Persons)
{
   <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Title.Name)
        </td>
        ......
        <td>
            <button id="editperson">Edit</button>
        </td>
    </tr>
 }

Что мне нужно сделать, это получить значение item.id из цикла foreach вмой скрипт jQuery для заполнения значения id в переменной url (я пометил место в скрипте текстом Need item.Id here ).

Есть ли способ достичьэто - или мне нужно подходить к этому по-другому?

Answer 1

Сначала установите переменную в вашем файле javascript, к которой могут обращаться как функция, так и ваш диалог. Вы просто должны установить эту переменную в клик, а затем использовать ее в диалоге. Но проблема в том, чтобы получить этот идентификатор. Вот несколько решений:

Решение 1 - Скрытое поле

Вы можете добавить скрытое поле в тот же TD с помощью кнопки или где-то еще.

<td>
    @Html.HiddenFor(i => item.Id)
    <button id="editperson">Edit</button>

</td>

При нажатии на кнопку просто сделайте следующее:

$(this).parent().find('input').first()

Это даст скрытое поле. Тогда вы можете получить из него значение и делать с ним все, что захотите.

Решение 2 - атрибут данных в кнопке

Вы можете добавить параметр «data» в кнопку, содержащую идентификатор.

<button id="editperson" data-myitemid="@(Item.Id)">Edit</button>

Затем вы можете получить идентификатор в функции jquery следующим образом:

var oItemId = $(this).attr('data-myitemid');

Решение 3 - Запустить функцию с параметром в строке.

Вы можете активировать функцию javascript с помощью onclick и просто передать параметр.

<button id="editperson" onclick="SomeJavascriptFunctionWithAParameter(@(Item.Id));">Edit</button>

Answer 2

Один из способов добиться этого с помощью приведенной выше структуры - добавить функцию для ручного запуска диалога и установить «рабочий» идентификатор человека, прежде чем отобразить его следующим образом:

var workingPersonId;

function showPersonDialog(personId) {
    workingPersonId = personId;
    $('#dialog').dialog('open');
}

$('#dialog').dialog({   
        autoOpen: false,   
        width: 800,   
        resizable: false,   
        title: 'Edit Person',   
        modal: true,   
        open: function (event, ui) {   
            var url = '@Html.Raw(Url.Action("Edit", "Person", new {   
                id = workingPersonId,   
                selectedPersonFor = Model.SelectedPersonFor,   
                selectedPersonForId = Model.SelectedPersonForId,   
                clientAccountId = Model.ClientAccountId   
            }))';   
            $(this).load(url);   
        },   
        buttons: {   
            "Save": function () {   
                $(this).dialog("save");   
                // prevent the default action, e.g., following a link   
                return false;   
            },   
            "Close": function () {   
                $(this).dialog("close");   
                // prevent the default action, e.g., following a link   
                return false;   
            }   
        }   
    });   

Триггер с чем-то вроде:

<button id="editperson" onclick="showPersonDialog(@item.ID);return false;">Edit</button>