将服务器端数据嵌入到 ASP.NET Core 中的 JavaScript 文件中答案

【问题标题】：Embed server-side data into JavaScript file in ASP.NET Core将服务器端数据嵌入到 ASP.NET Core 中的 JavaScript 文件中
【发布时间】：2020-08-28 22:50:09
【问题描述】：

我的 wwwroot 文件夹中有一个 JavaScript 文件，从我的视图中引用。我想要文件集服务器端的一些变量是这样的：

var someProperty = '@(Model.SomeProperty)';

wwwroot 里面的内容是静态的，所以我想我应该把 JavaScript 文件转换成 Razor Page 并把它放在 /Pages/SomeFile/Index.cshtml

但是，我不知道如何将内容类型更改为文本/javascript。知道如何做到这一点，或者有没有更好的方法来提供包含服务器端数据集的 JavaScript？

【问题讨论】：

嗨@Sandy，如果我的回答对你有帮助，你能accept as answer吗？如果你还有问题，请跟进让我知道。
@Rena - 抱歉，如果我的问题不清楚。我希望 .cshtml 文件具有与旧 .aspx 文件类似的功能，其中 .aspx 文件可以返回任何类似这样的 mime 类型： Response.ContentType = "text/javascript";我希望能够从 .cshtml 文件中执行相同的操作。
请查看this answer。

标签： asp.net-core razor-pages

【解决方案1】：

所以我想我会将 JavaScript 文件转换为 Razor 页面并将其放入 /Pages/SomeFile/Index.cshtml

没有办法在单独的 JS 文件中实现 Razor 代码。

1.您应该在您的 .cshtml 文件中设置变量数据，如下所示：

<div class="row">
    <div class="col-md-4">
        <form method="post">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="@Model.Id" class="control-label"></label>
                <input asp-for="@Model.Id" class="form-control" />
                <span asp-validation-for="Id" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="@Model.Name" class="control-label"></label>
                <input asp-for="@Model.Name" class="form-control" />
                <span asp-validation-for="Name" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="button" id="button1" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

@section Scripts {
    <script src="~/js/site.js" type="text/javascript"></script>
    <script>
        $('#button1').click(function () {
            Create({
                 name : '@Model.Name',
                 id: '@Model.Id'
                // ... other module options
            });
        });
    </script>
}

您在wwwroot/js 中的site.js 文件：

function Create(options) {
    //get the model value like below
    var name = options.name;
    var id = options.id;
    $.ajax({
        url: "/Tests/Create?name=" + options.name,
        type: 'Post',
        headers: { 'RequestVerificationToken': $('input:hidden[name="__RequestVerificationToken"]').val() },
        success: function (data) {
            alert("success");
        }
    })
}

2.另一种方法是将js代码放在剃须刀页面中：

 <div class="row">
    <div class="col-md-4">
        <form method="post">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="@Model.Id" class="control-label"></label>
                <input asp-for="@Model.Id" class="form-control" />
                <span asp-validation-for="Id" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="@Model.Name" class="control-label"></label>
                <input asp-for="@Model.Name" class="form-control" />
                <span asp-validation-for="Name" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="button" value="Create" onclick="Create()" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

@section Scripts {
    <script>
        function Create() {
            var name = '@Model.Name'
            $.ajax({
                url: "/Tests/Create?name=" + name,
                type: 'Post',
                headers: { 'RequestVerificationToken': $('input:hidden[name="__RequestVerificationToken"]').val() },
                success: function (data) {
                    alert("success");
                }
            })
        }
    </script>
}

【讨论】：