How to pass entire ViewModel into External Javascript file in .net core mvc 3.1?

As far as I know, if you want to pass the model to JS scripts, I suggest you could use @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(object model)) to convert the model to a json string as @Seabizkit suggests. Then you could convert this json to model in the js and read its property.

More details, you could refer to below codes: Model class:

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

In your view set a button like below:

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

Then add a script at cshtml like below:

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

Then in the another js file add below codes:

Since my model is just a simple model like this to test, if you want to use my codes, you should modify it.

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

Result:

i think.... you lookng for

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

so in your case something like

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

I got my own answer but was not fully satisfied with it yet, so didn't post until today. Need more refinement though.

test.cshtml:

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

test.js: at the top:

var viewmodel;

Only by doing this does it work correctly. Most similar to @brando Zang's answer except for the extra initializing part. Still not sure why it works without var or let in the main cshtml page.

Also, intellisense is not working yet on my external js file test.js. But thanks a ton to Brando Zang and Sea Bizkut for taking the time to help me out.

Some findings which will be useful for other people:

In default .net core mvc 3.1 , the default json is automatically converting viewmodel values to camelcase from pascal case, so using newtonsoft instead keeps default functionality and naming conventions. Can do it for default JSon parser itself in startup itself but it is a hassle, so using Newtonsoft instead.

2. Also for enum values, it takes the value and not the string by default. so in the model. e.g in js object for CustomerType you will get 0,1,2 instead of Standard, Premium or VIP. so to fix it,

   (VB syntax below for enum - not able to show code indented properly in SO) Public Enum CustomerType Standard = 0 Premium = 1 VIP = 2 End Enum

TestModel.cs:

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

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