Embed server-side data into JavaScript file in ASP.NET Core

Question

I have a JavaScript file inside my wwwroot folder referenced from my views. I want some variables in the file set server-side like this:

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

The content inside wwwroot is static, so I thought I'd convert the JavaScript file into a Razor Page and put it /Pages/SomeFile/Index.cshtml

However, I cannot figure out how to change content type to text/javascript. Any idea how to do this or is there a better way to serve up JavaScript that contains data set server-side?

Hi @Sandy,If my answer helped you,could you accept as answer?If you still have questions,please follow up to let me know. — Rena
@Rena - Sorry if my question was not clear. I was hoping .cshtml files had similar functionality to old .aspx files where the .aspx file could return any mime type like this: Response.ContentType = "text/javascript"; I want to be able to do the same from a .cshtml file. — Sandy

Rena Rena · Accepted Answer · 2020-05-13T04:40:24

so I thought I'd convert the JavaScript file into a Razor Page and put it /Pages/SomeFile/Index.cshtml

There is no way to implement Razor code in separate JS files.

1.You should set variable data in your .cshtml files like below:

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

Your site.js file in wwwroot/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.Another way is to put the js code in the razor pages:

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

Embed server-side data into JavaScript file in ASP.NET Core

1 Answers