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

Posted 2023-04-01

【中文标题】将 C# 模型从视图传递到 Javascript

【英文标题】：Pass C# Model from View to Javascript

【发布时间】：2016-08-13 21:37:16

【问题描述】：

我正在将此 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>

但结果相同。

有什么想法吗？

【问题讨论】：

Asp.net mvc passing a C# object to Javascript的可能重复

【参考方案1】：

我通常使用它来从 MVC 转换为 javascript！

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

【讨论】：

是的！这正是我想要的。

根据this answer，这里的答案存在安全漏洞。

【参考方案2】：

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# 模型进行字符串化。

【参考方案3】：

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

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

在同一个 razor 视图中，拥有这个 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>

【参考方案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
          
        )
    );

【参考方案5】：

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

<script>
    let jsonData = @Html.Raw(Json.Serialize(Model))
    console.log(jsonData)
</script>