jquery - 在 MVC 中将主键放置在表行中的最佳实践是什么

Question

我的问题是，在表行上放置主键并使用 Jquery 查找 ID 时的最佳实践是什么。

因此，使用 MVC，您可以使用编辑和删除按钮创建数据表，单击该按钮将打开模型弹出窗口。

你应该:

a) 将主键放置在每个按钮的数据属性中

b) 每行都有隐藏字段

c) 在每个按钮上使用 Onclick 并将 ID 传递给函数

d) 在 tr 标签上有 ID

Answer 1

• a) 如果不需要，请不要重复属性(这会使页面变得臃肿)
• b) 仅当您需要回发值时，隐藏字段才有用
• c) 切勿将 onclick 处理程序与 jQuery 一起使用(它将处理程序与代码无缘无故地分开，并且只支持单个处理程序)
• d) 切勿将 ID 用于数据属性(发生冲突的可能性太大，因为 ID 在页面上必须是唯一的)

所以我倾向于选择选项e):

• e) 如果它只是供 jQuery 使用，我倾向于在每行使用一次 data-id=""。

然后，从该行中的任何元素中，我使用 .closest('tr').data("id") 等来获取 PK。 (实际上，我经常使用这种模式，我有一个自定义的 jQuery 扩展来完成此操作。例如:.closestAttr("data-id"))。

.closestAttr():

为任何感兴趣的人提供 TypeScript 代码:

// Find the nearest matching attribute in the elements themselves, as well as in all ancestors
jQuery.fn.closestAttr = function (attribute: string): string
{
    return this.closest('[' + attribute + ']').attr(attribute);
};

或者用普通的JS:

// Find the nearest matching attribute in the elements themselves, as well as in all ancestors
jQuery.fn.closestAttr = function (attribute)
{
    return this.closest('[' + attribute + ']').attr(attribute);
};

附加说明:如果数据分组在父级下，则表上会有另一个 data-id="" 代表父级 FK/组等。

更新 - 对于评论中提供的代码示例:

我会这样做:

@foreach (var i in n) 
{ 
    <tr data-id="@i">
        <td>@i</td>
        <td><input type="button" class="edit" value="Edit" /></td> 
        <td><input type="button" class="delete" value="Delete" /></td> 
    </tr> 
}

并通过 .closest('tr').data("id") 从按下的按钮获取 id。