Comment passer js variable @ Model.MyModel (MVC4)

Question

Voici mes modèles

public class AddressBook 
{ 
    public string UserId { get; set; } 
    public IList<Address> Addresses { get; set; } 
    public AddressBook() 
    { 
     UserId = ""; 
     Addresses = new List<Address>(); 
    } 
} 

public class Address 
{ 
    public string Company { get; set; } 
    public string Title { get; set; } 
    public string FName { get; set; } 
    ... 
} 

Le contrôleur construit le répertoire avec une liste d'adresses. La page principale utilise le modèle AddressBook (@model mymodel.AddressBook) et je peux accéder aux différentes adresses en utilisant Model.Addresses [index].

Sur la page I afficher la liste des adresses chacun avec un bouton Modifier (je privais code html off pour plus de clarté):

@model mymodel.AddressBook 
... 
@for (int i = 0; i < Model.Addresses.Count; i++) 
{ 
    @Model.Addresses[i].Company 
    @Model.Addresses[i].FName 
    ... 
    @:<input type="image" src="/images/edit.gif" onclick="addressEdit('@i'); return false;" title="Edit" /> 

} 

Lorsque l'utilisateur clique sur le bouton d'édition que j'appelle javascript addressEdit et laissez-passer c'est l'indice de l'adresse sélectionnée.

<script type="text/javascript"> 
    function addressEdit(index) { 
     $('#FName').val('@Model.Addresses[index].FName'); 
     $('#Addr1').val('@Model.Addresses[index].Company'); 
     ... 
    } 
</script> 

Le problème est sur la ligne de jQuery $ ('# FName') val ('@ Model.Addresses [index] .FName'). L'index des variables est souligné en rouge dans VS2012 avec le message "le nom 'index' n'existe pas dans le contexte actuel".

Comment passez-vous la valeur sur 'index' pour extraire les données dont j'ai besoin?

Answer 1

Enveloppez vos éléments dans un travées avec un nom de classe. Enveloppez tout dans la boucle d'un div aussi. Je supprime également la méthode onclick du balisage car nous le ferons de la manière unobtrusive.

@for (int i = 0; i < Model.Addresses.Count; i++) 
{ 
    <div class='entry'> 
    <span class='spanAddress'> @Model.Addresses[i].Company </span> 
    <span class='spanFName'> @Model.Addresses[i].FName </span>  
    <img src="/images/edit.gif" class='editLink' /> 
    </div> 
} 

maintenant dans votre javascript

$(function(){ 

    $(".editLink").click(function(e){ 

    e.preventDefault(); 
    var _this=$(this); 
    var fname=_this.closest("div.entry").find(".spanFName").html();  
    var add=_this.closest("div.entry").find(".spanAddress").html();  

    $('#FName').val(fname); 
    $('#Address').val(add); 

    }); 

}); 

Answer 2

Eh bien, c'est le code côté client rappelez-vous. Donc, le meilleur endroit à regarder est ce qui est généré côté client. Cela signifie commenter votre événement javascript et regarder ce qui est réellement rendu pour avoir une idée de ce qui se passe.

Lorsque vous faites cela, vous verrez que l'assistant génère automatiquement les noms et les identifiants en fonction des noms de vos modèles. Gardez à l'esprit que l'attribut name sur les entrées est ce qui permet la liaison de modèle sur le poste.

Donc, avec tout cela en considération, je suppose que ce serait quelque chose le long de ces lignes:

function addressEdit(index) { 
$('#FName').val($("#Addresses_"+index+"__FName").val()); 
//..etc 
}