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

【问题标题】：How to pass entire ViewModel into External Javascript file in .net core mvc 3.1?如何将整个 ViewModel 传递到 .net core mvc 3.1 中的外部 Javascript 文件中？
【发布时间】：2020-10-26 04:09:01
【问题描述】：

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

我尝试了不同的解决方案，但都没有奏效。我首先从 cshtml 文件中的 reguarl js 变量开始，并将其传递到外部 js 文件中。例如，当我点击下面的按钮时，我得到下面的代码，Uncaught ReferenceError: myValue is not defined


 **- 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);
}

【问题讨论】：

您的代码完全正确，但不知道为什么它不起作用
@Vyas Senthil，有更新吗？我的回复或 Seabizkit 回复对您有帮助吗？
@BrandoZhang - 感谢您抽出时间帮助我，也感谢 Seabizkut。非常感谢您的帮助。但请看我的回答，了解最终的效果。如果可能的话，仍然想改进它。
各位大神，我如何将 c# 对象中的 cmets 获取到 json 字符串中，以便在处理外部 JS 文件时对 javascript 对象进行智能感知？

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

【解决方案1】：

我认为....你在寻找

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);
}

【讨论】：

【解决方案2】：

据我所知，如果你想将模型传递给 JS 脚本，我建议你可以使用@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(object model)) 将模型转换为 json 字符串，正如@Seabizkit 所建议的那样。然后你可以把这个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);
}

结果：

【讨论】：

【解决方案3】：

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

test.cshtml：

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

test.js：在顶部：

var viewmodel;

只有这样做才能正常工作。除了额外的初始化部分外，与@brando Zang 的答案最相似。仍然不确定为什么它在没有 var 或 let 在主 cshtml 页面中工作。

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

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

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

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

（下面的 VB 语法用于枚举 - 无法显示在 SO 中正确缩进的代码）公共枚举客户类型标准 = 0 溢价 = 1 贵宾 = 2 结束枚举

TestModel.cs：

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

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

【讨论】：