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

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

示例1:

View.aspx

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

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

示例2:

View.aspx

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

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

---

另外，如果你能想出一个更好的问题标题，也请分享：）

我的做法是让服务器将id呈现给

标记，你可以创建自己的属性或将其存储在

id

属性中。然后，如果在

td

中有一个edit按钮，则只需编写jQuery来查找存储在

标记中的id

html:

---

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

我过去处理这个问题的一种方法是使用html5数据属性。通过和以上版本获取

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

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

---

这方面的例子。

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

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

您希望将customAttribute数据存储在哪里？一旦我们知道它在哪里，我们就可以知道如何使用jQuery访问它。或者您希望将数据存储在服务器端，并通过AJAX获得数据？自定义属性可以被视为干净的html。它们甚至在HTML5规范@mrtsherman中-我希望它被呈现到HTML服务器端，这样在客户端，JavaScript就可以获取该值。@Yads-非常有趣！我不知道这件事。谢谢谢谢我通常也上课。为了简单起见，我没有把它贴在这里。那么，如果有超过1个参数，您会怎么做？将它们粘贴到1个字符串中，并使用基于分隔符字符的JavaScript进行解析？服务器：@Dimskiy，如果有多个参数，我会选择Marks-answer。我以前实际上是在玩data-attribute，但只是在JavaScript内部。这是在HTML/aspx中构建它的正确方法吗？如果我用FireBug检查这个元素，我会看到这个数据属性包含什么吗？+1我正要回答这样的问题，但你公平地击败了我：）@Dimskiy我想你可以用@Jimmy检查数据元素，在FireBug中使用@Jimmy-我安装了FireQuery，但我看不到数据属性有什么价值。我可以看到那里有些东西，但不是确切的价值。有窍门吗？：）对于一个单独的问题，这可能是一个很好的主题。当您调试脚本并在firebug中的

$（this）.parents（“tr.row”）.data（“rowInfo”）

中添加手表时，您可以看到json对象的内容。另外，如果你只是检查firebug中的元素，你应该能够看到原始的json符号。我通常不会使用插件，除非我真的觉得需要它们。例如，我肯定会使用jQueryUIDatePicker，而不是自己实现一个。谢谢你的建议！

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

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

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