How to pass js variable to @Model.MyModel (MVC4)

Question

Here are my models

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

The controller builds the AddressBook with a list of addresses. The main page uses the AddressBook model (@model mymodel.AddressBook) and I can access the different addresses using Model.Addresses[index].

On the page I display the list of addresses each with an Edit button (I stripped the html code off for clarity):

@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" />

}

When the user clicks on the edit button I call javascript addressEdit and pass it the index of the selected address.

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

The problem is on the jQuery lines $('#FName').val('@Model.Addresses[index].FName'); Variable index is underlined in red in VS2012 with message "the name 'index' does not exist in the current context".

How do you pass the value on 'index' to extract the data I need?

score 0 · Answer 1 · answered Apr 13 '13 at 16:59

Well, this is client side code remember. So the best place to look is what is generated client side. This means commenting out your javascript event and looking at what is actually rendered to get an idea of what is going on.

When you do that, you will see that the helper autogenerates the names and ids based on your models names. Keep in mind that the name attribute on the inputs is what allows for model binding on post.

So, with all of that in consideration, I would assume it would be something along these lines:

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

score 0 · Accepted Answer · answered Apr 13 '13 at 17:05

Wrap your elements in a spans with some class name. Wrap everything in the loop a div too. I am also removing the onclick method from the markup because we will do it in the unobtrusive way.

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

Now in your 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);

  });  

});

How to pass js variable to @Model.MyModel (MVC4)

2 Answers2

Linked