在 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。