Question

我将此ViewModel传递给我的视图：

  public class DashboardViewModel
  {
    public List<UserTask> UserTasks {get; set;}

    public List<WorkItem> WorkItems {get; set;}
  }

并且在View中我正在迭代WorkItems，如下所示：

 @foreach (var item in Model.WorkItems)
 {
    @item.Name
    @item.HoursLogged
    <button value="@item">UPDATE</button>
 }

当我点击按钮时，jQuery函数正在打开一个模态。

我需要将项目传递给模式以显示所有项目信息。

这是javascript函数：

$(buttonEl).click(function () {
   //code to open modal
   var item = this.value;
});

“this.value”中传递的值不是对象，而是具有WorkItem命名空间的字符串。

我也尝试使用内联onclick功能：

<button onclick="openModal('@item')">UPDATE</button>

但结果相同。

有什么想法吗？

Answer 1

我通常用它来从MVC翻译成javascript！

@Html.Raw(Json.Encode(item))

Answer 2

您应该将用于循环的数据存储到javascript变量，并在单击按钮时查询该数据。在按钮上保留一个唯一的标识符＆＃39;您可以使用以后查询的数据属性。因为它是一个数组，所以你可以简单地使用一个与（js）数组索引匹配的计数器变量。

@{ var counter = 0;}
@foreach (var item in Model.WorkItems)
 {
    @item.Name
    <button class="updateBtns" data-index="@counter">UPDATE</button>
    counter++;
 }

并且在同一个剃刀视图中，使用此javascript将Model.WorkItems集合序列化为javascript数组并将其存储在变量中。

<script>
  $(function() { 

     var dataArr = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.WorkItems));
      $(".updateBtns").click(function (e) {
          e.preventDefault();

          var selectedItem = dataArr[$(this).data("index")];
          console.log(selectedItem);
      });    
  });    
</script>

Answer 3

View中的@item会将该项打印为普通字符串（item.ToString（））。我想你想要的是将字符串解析为Javascript对象，对吗？

一种方法是在模型中实现一个方法，比如JSON.stringify（）。该方法可以将C＃模型解析为JSON字符串：

{
 "Name" : "Scott",
 "HoursLogged" : "2"
}

然后，您可以使用JSON.parse（）将字符串解析为View中的JSON对象。在这种情况下，您可以使用JSON对象。一些想法：

C＃：

public class Item
{
 public string Name { get; set; }
 public int HoursLogged { get; set; }
 public string ToJsonString()
 {
  return "{" + "\"Name\":" + Name + ",HoursLogged:" + HoursLogged + "}";
 }
}

JS：

var jsonStr = '@item.ToJsonString()';
var jsonObj = JSON.parse(jsonStr);
console.log(jsonObj.Name);
console.log(jsonObj.HoursLogged);

您还可以使用Newton对C＃模型进行字符串化。

Answer 4

你应该回过头来了解这里发生了什么。一个Web请求实际上只是一堆字符串，MVC .net做了一些尝试，以简化从使用对象到直接字符串的过渡，但你可以看到它不能做任何事情。所以外卖就是你在页面上呈现时就像处理所有字符串一样处理事情。

话虽如此，有很多方法可以解决这个问题。你可以像之前提到的那样将所有的WorkItem对象转换为javascript对象并将它们从javascript数组中拉出来。或者我个人喜欢做的只是让按钮包含对象的id并执行ajax调用以从服务器获取最新数据。

后端：

[HttpPost]
public string GetWorkItemById(int id)
{

//get or create WorkItem here
WorkItem workItem = new WorkItem(id);
workItem.Name = "Foobar";
workItem.HoursLogged = "127001";

return Newtonsoft.Json.JsonConvert.SerializeObject(workItem);
}

前端：

    $(buttonEl).click(function () {    
    var id = this.value; //assuming you store the id in the button's value
    $.ajax({
          type: "POST",
          url: "@(Url.Action("GetWorkItemById"))",
          data: ({
                    Id:id
                 }),
          success: success,
          dataType: dataType, 
          success: function(result){
                var name = result.Name; // Foobar
                var hoursLogged = result.HoursLogged; // 127001
                //populate text fields using jquery
          }
        })
    });

将C＃模型从View传递给Javascript

4 个答案: