将参数从服务器对象传递到 JavaScript 的最佳方式

Question

我渲染了一个带有表格的视图。表格的每一行都是一个可以编辑的对象。因此，该表的最后一列有一堆“编辑”按钮。单击这些 EDIT 按钮之一时，JavaScript 函数必须获取当前行表示的对象的 Id。最终，我希望得到一个干净的 HTML：没有“onclick”、“onmouseover”属性，也没有自定义属性。下面我有 2 个我不喜欢的例子。有什么好主意吗？

示例 1：

View.aspx

<td>
  <input type="button" value="EDIT" onclick="JSFunction(<%: ObjectId %>)" />
</td>

JavaScript

function JSFunction(id)
{
    //some code that does whatever with id
}

示例 2：

View.aspx

<td>
  <input type="button" value="EDIT" customAttribute="<%: ObjectId %>" />
</td>

JavaScript

$('input[type=button]').click(function() {
    var id = this.attr('customAttribute');
    //some code that does whatever with id
});

附：如果你能想出一个更好的问题标题，也请分享:)

Answer 1

我过去处理此问题的一种方法是使用 html5 数据属性。 jQuery 1.4.3 及以上版本均采用该格式。

<table>
    <tr class="row" data-rowInfo='{"Id": "1", "Name": "Jon"}'>
        <td>
            Row Id 1
        </td>
        <td>
            <input type="button" value="Edit"/>
        </td>
    </tr>
    <tr class="row" data-rowInfo='{"Id": "2", "Name": "Mark"}'>
        <td>
            Row Id 2
        </td>
        <td>
            <input type="button" value="Edit"/>
        </td>
    </tr>
    <tfoot>
        <tr>
            <td></td>
        </tr>
    </tfoot>
</table>

然后在您的 jquery 中，您可以执行以下操作：

$("input[type=button]").click(function(){
  var rowInfo = $(this).parents("tr.row").data("rowInfo");
  //Do something with rowInfo.Id;
});

通过使用 data 属性，您可以拥有一个丰富的 json 对象，它可以包含比属性更多的信息。此外，您只需声明一个数据属性即可保存所有相关信息。

在jsfiddle 上工作的示例。

Answer 2

我这样做的方式是让服务器将 id 呈现给 <tr> 标记，您可以创建自己的属性或将其存储在 id 属性中。然后，如果您在 td 中有一个编辑按钮，您只需编写 jQuery 即可找到存储在 <tr> 标记中的 id。

html:

<tr myId="1">
<td>
  <input type="button" value="EDIT" />
</td>
</tr>

jQuery:

$(function() {
        $("input[type=button]").click(function() {
            var id = $(this).parent().attr("myId");
        });
    });

虽然我通常为我的编辑按钮分配一个“编辑”类，而不是按它们的类型来选择它们（因为我在页面上有一个保存按钮）。

Answer 3

我会使用 jQuery 元数据插件，因为这样数据可以以多种不同的方式嵌入到任何元素中。通常的方法是像这样将它添加到类中：

<input type="button" class="button { objectId : <%: ObjectId %> }" />