如何将整个ViewModel传递到.net core MVC 3.1中的外部Javascript文件中？

如何解决如何将整个ViewModel传递到.net core MVC 3.1中的外部Javascript文件中？

我想将整个viewmodel从.cshtml文件传递到包含在同一cshtml文件中的外部Javascript。

我尝试了不同的解决方案，但没有一个起作用。我首先从cshtml文件中的reguarl js变量开始，然后将其传递到外部js文件中。例如，当我单击以下按钮时获得以下代码，出现Uncaught ReferenceError：未定义myValue


 **- in test.cshtml file:**

<button onclick="testAlert()"></button>
<script language="text/javascript">
    var myValue = "myValue test";
</script>
<script src="~/js/test.js"></script>

**in test.js:**
/**
 *  This is a test alert function in external js.
 * */
function testAlert() {
    console.log(myValue);
}

上面只是对常规变量的测试，如果它正常工作，那么我想在下面的外部javascript中使用下面的对象。

***in test.cshtml:***
var customer = @Html.Raw(JsonConvert.SerializeObject(Model.CustomerDetails));
***Then in test.js***
function testAlert() {
    console.log(customer.Names.FirstName);
}

解决方法

我认为。。。你在寻找

var obj = JSON.parse('{ "name":"John","age":30,"city":"New York"}');

所以在您的情况下，类似

function testAlert() {
    var customer = @Html.Raw(JsonConvert.SerializeObject(Model.CustomerDetails));
    var customerJson = JSON.parse(customer);
    console.log(customerJson.Names.FirstName);
}

据我所知，如果要将模型传递给JS脚本，我建议您可以使用@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(object model))将模型转换为@Seabizkit建议的json字符串。然后，您可以将此json转换为js中的模型，并读取其属性。

更多详细信息，您可以参考以下代码：模型类别：

public class Course
{
    public int CourseID { get; set; }
    public string Title { get; set; }
    public int Credits { get; set; }
    public string SemesterNumber { get; set; }
}

在您的视图中设置如下按钮：

<input type="button" onclick="testAlert()" value="test" />

然后在cshtml处添加一个脚本，如下所示：

@section scripts{

    <script>
         // Notice: we should add '' between the html.raw to set it as a json string.
        var customer = '@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model))';

    </script>
}

然后在另一个js文件中添加以下代码：

由于我的模型只是一个要测试的简单模型，因此，如果要使用我的代码，则应该对其进行修改。

function testAlert() {
    console.log(customer);
    var ce = JSON.parse(customer);
    alert(ce.SemesterNumber);
}

结果：

我有自己的答案，但对它还不完全满意，所以直到今天才发布。不过，还需要进一步完善。

test.cshtml：

@using Newtonsoft.Json;
<script type="text/cshtml">
viewmodel = @Html.Raw(JsonConvert.SerializeObject(Model));
</script>

test.js：在顶部：

var viewmodel;

只有这样做，它才能正常工作。除了额外的初始化部分外，与@brando Zang的答案最相似。仍然不确定为什么不使用var还是不让它进入cshtml主页。

此外，intellisense还无法在我的外部js文件test.js上运行。但是非常感谢Brando Zang和Sea Bizkut抽出宝贵的时间来帮助我。

一些对其他人有用的发现：

在默认的.net core mvc 3.1中，默认的json会自动将视图模型值从pascal case转换为camelcase，因此使用newtonsoft会保留默认功能和命名约定。可以在启动时针对默认的JSon解析器本身执行此操作，但这很麻烦，因此请使用Newtonsoft。

对于枚举值，默认情况下它也使用值而不是字符串。所以在模型中。例如，在CustomerType的js对象中，您将获得0,1,2，而不是Standard，Premium或VIP。所以要解决它，

（以下用于枚举的VB语法-无法显示以SO缩进的代码）公开枚举CustomerType 标准= 0 溢价= 1 VIP = 2 结束枚举

TestModel.cs：

using Newtonsoft.Json;
using Newtonsoft.Json.Converters;

[JsonConverter(typeof(StringEnumConverter))]
public CustomerType CustomerType;