Meilleure façon de passer des paramètres d'objets serveur à JavaScript

Question

Je rends une vue avec une table dedans. Chaque ligne de la table est un objet qui pourrait être édité. Donc, la dernière colonne de cette table a un tas de boutons "EDIT". Lorsque l'un de ces boutons EDIT est cliqué, la fonction JavaScript doit récupérer l'identifiant de l'objet représenté par la ligne en cours. En fin de compte, je voudrais finir avec un HTML propre: pas d'attributs "onclick", "onmouseover" et pas d'attributs personnalisés. Ci-dessous, j'ai 2 exemples dont je ne suis pas ravi. Des bonnes idées?

Exemple 1:

View.aspx

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

JavaScript

function JSFunction(id) 
{ 
    //some code that does whatever with id 
} 

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

post-scriptum Si vous pouviez trouver un meilleur titre de question, s'il vous plaît partager aussi bien :)

Answer 1

Une façon dont j'ai géré ceci dans le passé est d'utiliser l'attribut de données html5. Qui est repris par les versions de jQuery 1.4.3 et ci-dessus.

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

Ensuite, dans votre jquery vous pouvez effectuer les opérations suivantes:

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

En utilisant les données des attributs que vous pouvez avoir un riche objet JSON qui pourrait contenir plus d'informations qu'un simple attribut. De plus, vous n'avez qu'à déclarer un attribut de données pour contenir toutes les informations pertinentes. Exemple de ceci travaillant sur jsfiddle.

Answer 2

La façon dont je le fais est que j'ai le serveur rendre l'id à la balise <tr>, vous pouvez soit créer votre propre attribut ou le stocker dans l'attribut id. Ensuite, si vous avez un bouton d'édition à l'intérieur d'un td, vous écrivez juste jQuery pour trouver l'identifiant stocké dans la balise <tr>.

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

Bien que j'assigner généralement une classe de « modifier » à mes boutons d'édition plutôt que de les sélectionner par leur type (comme je l'ai un bouton de sauvegarde sur la page).

Answer 3

Je voudrais utiliser le plugin de métadonnées jQuery car les données peuvent être intégrées de différentes manières sur n'importe quel élément. La manière habituelle est de l'ajouter à la classe comme ceci:

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