ASP.NET MVC Voir et jQuery.data()

Question

Scénario:

J'ai une vue partielle qui est utilisé dans plusieurs endroits à travers mon application ASP.NET MVC. La vue partielle contient une liste des « objets » pour sélectionner, à savoir quelque chose de similaire à:

<ul> 
    <% 
     foreach (var person in Model.Persons) 
     { 
    %> 
    <li><a href="#" class="person"> 
     <%= person.Name %></a></li> 
    <% 
     }   
    %> 
</ul> 

Chaque personne a un identifiant unique.

J'utilise jQuery pour mes trucs AJAXy, et jusqu'à présent, j'ai ajouté la fonctionnalité de clic sur les liens de la façon suivante (même si elle a une odeur très non-jQuery comme)

<a href="#" class="person" onclick="return selectPerson('<%= person.Id %>');"> 
      <%= person.Name %></a> 

Il fonctionne et tout, cependant il me faut aussi avoir une fonction javascript selectPerson() sur chaque page en utilisant cette vue partielle (puisque ce qui se passe dans le select est "spécial" pour chaque vue).

Je viens de tombé sur la méthode jQuery Data() et il semble être en mesure de soutenir mes besoins, à savoir dans les vues en utilisant ma vue liste des personnes partielle que je pouvais faire quelque chose comme:

$("a.person").click(function() { alert($(this).data("personId")); return false; }); 

Si je l'Id de attaché à la propriété de données "personId" sur les éléments DOM.

Maintenant, le problème que j'ai est que je fais le côté du serveur de rendu HTML, mais l'attachement de la propriété de données "personId" aux éléments DOM doit être fait côté client. C'est à dire. soit pendant la boucle foreach ou dans une boucle JS séparée mais je préférerais éviter cela.

Peut-être que je vais dans le mauvais sens, je ne sais pas, mais peut-être que quelqu'un a une solution pour cela ou peut-être une meilleure approche?

Edit (mise à jour pour plus de clarté):

D'une certaine façon execute

$ (sélectionnez le "courant" ancre) .data ("personId", ensemble à la valeur de person.Id)

Answer 1

Pourquoi n » t vous "vider" votre ID de personne dans le champ ID du lien.

<a href="#" class="person" id="person_<%= person.Id %>"><%= person.Name %></a> 

Maintenant que vous avez l'ID, vous pouvez vous utiliser jQuery pour fixer l'événement click à chaque lien avec le comme Darin a montré, classe person:

jQuery(function() { 
    jQuery('a.person').click(function(evt) { 
     return selectPerson(this); 
    }); 
}); 

maintenant dans la fonction selectPerson ou dans la fonction indiquée ci-dessus, vous devez obtenir le id de l'élément (qui sera comme person_234) et enlever la partie person_ et vous avez terminé.

Answer 2

Une meilleure approche serait d'utiliser javascript discret. Vous générez votre lien comme normal:

<a class="person" href="http://example.com/persons/select?id=<%= person.Id %>"><%= person.Name %></a> 
<!-- or use helpers to generate the link --> 
<%= Html.RouteLink(person.Name, "Default", new RouteValueDictionary(new { controller = "Persons", action = "Select", id = person.Id })) %> 

puis ajaxify il:

jQuery(function() { 
    jQuery('a.person').click(function(evt) { 
     jQuery.ajax({ 
      url: this.href, 
      success: function(data) { 
       // Do something with the returned content 
      } 
     }); 
    }); 
}); 

Je ne comprends pas bien pourquoi voudriez-vous utiliser JQuery.data()

Answer 3

Vous pouvez utiliser le plugin métadonnées jQuery .. essentiellement qu'il utilise des données JSON dans la propriété de la classe, qui est automatiquement sérialisé quand on y accède ..

Mais il ajoute beaucoup de balisage si ..

voir http://plugins.jquery.com/project/metadata pour référence.

Cheers,

Erik