将.net核心模型数据传递给外部javascript？答案

【问题标题】：Passing .net core model data to external javascript?将.net核心模型数据传递给外部javascript？
【发布时间】：2018-02-11 16:35:33
【问题描述】：

我有一个 .NET Core 2 Razor 视图，其中底层模型位于 *.cshtml.cs 文件中。假设我有一个这样的字符串：

public string myVar = "hello world";

如何在我的外部 JavaScript 文件中访问这个变量（数据）？

例如在以下情况下我需要这个。我正在使用 jVectorMap jquery 库。在那里我可以选择地图的多个区域。我必须保存选定的区域（比如说在唯一 id 的数组中），以便如果用户加载带有地图的特殊页面，我可以使用选定的区域预先填充地图。并且数据（所选区域）可以不同的用户做不同的事情。所以我必须为每个用户存储数据并且必须加载数据。 jVectorMap 有一个 API 函数，允许使用一些数据预先填充地图。

但是如何访问外部 javascript 文件中保存的变量/数据？

编辑： 我在这里添加了一个示例：https://dotnetfiddle.net/QV4Fi1

【问题讨论】：

在我的项目中，我使用 cookie 在它们之间传递数据。或者您可以设置一个隐藏的 div，其中包含您从 JS 读取的所有数据
在您的视图中添加@inject IJsonHelper Json;，然后在您的脚本中 - var value = @Html.Raw(Json.Serialize(Model.myVar))（假设您的脚本不在外部 js 文件中）
@StephenMuecke 如果我的脚本是外部 js 文件？那怎么办呢？
您需要在主视图中执行此操作（即将其分配为全局变量）并在外部文件中访问value。或者，您可以将其作为 data 属性分配给元素 - 例如 <button data-value="@Model.myVar" ... > 和 js 文件中的 $('button').click(function() { var value = $(this).data('value'); .... `
好的，我明白了，但我的数据不在主视图中。我想从模型类中访问变量。

标签： javascript c# asp.net-core-mvc

【解决方案1】：

选项1

型号

public class MyModel
{
   public string MyProperty {get;set;}
}

cshtml

@model WebAppp.MyModel

@Html.HiddenFor(x=>x.MyProperty)

javascript

  $("#MyProperty").val();

选项 2
在控制器中，您可以存储在 ViewData 或 ViewBag 中

 ViewBag["MyPropertyValue"]  ="something";

在 cshml 中（我没试过但应该可以）

@Html.Hidden("MyProperty",ViewData["MyPropertyValue"],new { @class = "someclass" })

javascript

  $("#MyProperty").val();

【讨论】：

【解决方案2】：

您可以轻松地将 C#/Razor 值作为字符串获取。

<script type="text/javascript">
    var i = parseInt('@Model.i');
</script>

或者您可以尝试以下给定的选项。

选项 1：

var myVar = '@Model.MyVar';
var name = '@Model.Name';

选项 2：

var myVar ='@Html.Raw(Model.MyVar)';
var name = '@Html.Raw(Model.Name)';

【讨论】：

而“i”是我的 c# 代码中的变量，就像我的示例中的“myVar”一样，对吧？我会测试它
试过了，但对我不起作用。它只打印出“@i”。你能提供一个可行的例子吗？
谢谢。我又试了一次，但无论如何都没有改变。仅当我在
@Opa114 您可以在内联脚本中提取值并将其传递到您的外部 js 文件的函数中。
哦，是的，这行得通，但在这种情况下，让整个 javascript 内容内联在视图中不是更好吗？另一个从外部 javascript 文件中的模型访问数据的干净简单的解决方案是不可能的，或者？

【解决方案3】：

这是一个带有强类型 ViewModel 和一个 C#-list 的示例，它将被序列化为一个 js-array。

ViewModel：

namespace ProjectName.ViewModels
{
    public class MyViewModel
    {
        // List
        public List<string> MyList { get; set; }

        // a simple variable
        public string MyVar{ get; set; }
    }
}

在视图中，使用以下代码将 C#-ViewModel 列表传递给 JavaScript 数组。

视图 (*.cshtml)：

@model MyProject.ViewModels.MyViewModel

<script type="text/javascript">
    var myArray = JSON.parse('@Json.Serialize(@Model.MyList)');
    var myVar = '@Model.MyVar';
</script>

你也可以使用一个对象来代替列表。

【讨论】：