如何将js变量传递给@ Model.MyModel(MVC4)

时间:2013-04-13 16:52:50

标签: javascript jquery razor

以下是我的模特

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

控制器使用地址列表构建AddressBook。 主页面使用AddressBook模型(@model mymodel.AddressBook),我可以使用Model.Addresses [index]访问不同的地址。

在页面上,我显示了每个带有编辑按钮的地址列表(为了清楚起见,我删除了html代码):

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

}

当用户点击编辑按钮时,我调用javascript addressEdit并将其传递给所选地址的索引。

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

问题在于jQuery行$('#FName')。val('@ Model.Addresses [index] .FName');变量索引在VS2012中以红色加下划线,并且消息“当前上下文中不存在名称'索引'”。

如何传递'index'上的值来提取我需要的数据?

2 个答案:

答案 0 :(得分:0)

嗯,这是客户端代码记住。所以最好的地方是生成客户端的内容。这意味着评论您的javascript事件并查看实际呈现的内容以了解正在发生的事情。

执行此操作时,您将看到帮助程序根据您的模型名称自动生成名称和ID。请记住,输入上的name属性允许在帖子上进行模型绑定。

所以,考虑到所有这些因素,我认为它将是这样的:

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

答案 1 :(得分:0)

使用某个类名将元素包装在一个跨度中。将循环中的所有内容包装为div。我也从标记中删除onclick方法,因为我们将以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>
}

现在在你的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);

  });  

});
相关问题