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

我需要做的是从 foreach 循环中获取 item.id 值到我的 jQuery 脚本中，以填充 url 变量中的 id 值（我已经用文本标记了脚本中的位置 这里需要 item.Id）。

有没有办法实现这一点 - 还是我需要以不同的方式解决这个问题？

Answer 1

首先在您的 javascript 文件中设置一个函数和对话框都可以访问的变量。您只需在单击中设置该变量，然后在对话框中使用它。但问题是得到那个id。以下是一些解决方案：

解决方案 1 - 隐藏字段

您可以通过按钮或其他位置在同一 TD 中添加隐藏字段。

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

</td>

当您单击按钮时，只需执行以下操作：

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

这将获得隐藏字段。然后，您可以从中获取价值并随心所欲地使用它。

解决方案 2 - 按钮中的数据属性

您可以在包含 id 的按钮中添加“数据”参数。

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

然后您可以像这样在 jquery 函数中获取 id：

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

解决方案 3 - 触发带有参数的函数。

您可以通过 onclick 触发 javascript 函数，只需传递参数。

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

Answer 2

使用上述结构实现此目的的一种方法是添加一个手动触发对话框的函数，并在显示之前设置“工作”人员 ID，如下所示：

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>