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

【问题标题】：How to pass js variable to @Model.MyModel (MVC4)如何将 js 变量传递给@Model.MyModel (MVC4)
【发布时间】：2013-04-14 01:05:17
【问题描述】：

这是我的模型

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 模型 (@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 中以红色下划线显示，消息“当前上下文中不存在名称‘索引’”。

如何传递“索引”上的值来提取我需要的数据？

【问题讨论】：

标签： javascript jquery razor

【解决方案1】：

用一些类名将你的元素包装在一个 span 中。将循环中的所有内容也包装为 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);

  });  

});

【讨论】：

【解决方案2】：

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

当您这样做时，您会看到帮助程序根据您的模型名称自动生成名称和 ID。请记住，输入上的 name 属性允许在帖子上进行模型绑定。

因此，考虑到所有这些，我认为它会是这样的：

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

【讨论】：