Best way to pass parameters from server objects to JavaScript

Question

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
});

PS If you could come up with a better question title, please share as well :)

Answer 1

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.

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

Then in your jquery you can do the following:

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

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 .

Answer 2

The way I do it is I have the server render the id to the <tr> tag, you could either make up your own attribute or store it in the id attribute. Then if you have a edit button inside a td you just write jQuery to find the id stored in the <tr> tag.

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");
        });
    });

Although I usually assign a class of "edit" to my edit buttons rather than selecting them by their type (as I have a save button on the page).

Answer 3

I would use the jQuery metadata plugin as then data can be embedded in a number of different ways onto any element. The usual way is to add it to the class like this:

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