将 C# 模型从视图传递到 Javascript

Question

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

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

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

并且在视图中我正在迭代 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

我使用以下方法将从 Razor 视图中的控制器传递的模型对象转换为 JavaScript 中的 JSON 对象。

<script>
    let jsonData = @Html.Raw(Json.Serialize(Model))
    console.log(jsonData)
</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

您应该存储用于循环到 JavaScript 变量的数据，并在单击按钮时查询该数据。在按钮的数据属性上保留唯一标识符，以便稍后查询。由于它是一个数组，因此您可以简单地使用与 (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 5

您可能应该退后几步才能了解这里发生了什么。 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
          }
        })
    });

Answer 6

在您的

.cshtml 文件之上

@using Newtonsoft.Json; 以及使用时

@foreach (var fieldType in fieldTypes)
{
    <div>
        @fieldType.Name
        <button type="button" onclick="addFieldType('@JsonConvert.SerializeObject(fieldType)')">Add field type</button>
    </div>
}

Javascript

<script>
    function addFieldType(fieldType) {
        var jsonObj = JSON.parse(fieldType);
        console.log(jsonObj);
    }
</script>