I render a View with a table in it. Each row of the table is an object that could be edited. So, the last column of this table has a bunch of "EDIT" buttons. When one of these EDIT buttons is clicked, JavaScript function must pick up the Id of the object represented by current row. Ultimately, I would like to end up with a clean HTML: no "onclick", "onmouseover" attributes and no custom made-up attributes. Below I have 2 examples that I'm not thrilled with. Any good ideas?
Example 1:
View.aspx
<td>
<input type="button" value="EDIT" onclick="JSFunction(<%: ObjectId %>)" />
</td>
JavaScript
function JSFunction(id)
{
//some code that does whatever with id
}
Example 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. If you could come up with a better question title, please share as well :)
One way I handled this in the past is to use the html5 data-attribute. Which is picked up by versions of jQuery 1.4.3 and above.
Then in your jquery you can do the following:
By using the data attribute you can have a rich json object that could contain more information than just an attribute. Plus you only have to declare one data-attribute to hold all relevant information.
Example of this working on jsfiddle.