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

Question

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

示例 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 渲染到 标记，您可以组成自己的属性或将其存储在 id 属性中。然后，如果 td 中有一个编辑按钮，您只需编写 jQuery 来查找存储在 标记中的 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 %> }" />