Question

我渲染一个带有表格的视图。表的每一行都是可以编辑的对象。所以，这个表的最后一列有一堆“编辑”按钮。当单击其中一个EDIT按钮时，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
});

P.S。如果您能想出更好的问题标题，请分享：）

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 %> }" />

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

3 个答案: