How to pass ASP.NET Core collection to JavaScript?

Question

I'm completely new in .NET core world. I faced a problem with converting @foreach (var item in Model.Products) into JavaScript array holding JSON product object (id, name). I tried solutions found in Stack Overflow and in some blogs, but each of them ends up in from server status 500 to ignored assignment.

Wrong attempts:

var yourjavascriptArray = <%=new JavaScriptSerializer().Serialize(cSharpArrayName);%>;

var inData = @Html.Raw(Json.Encode(Model.Products));

Code that is used:

Controller:

public IActionResult Index(string searchkey)
{
  ... 
  return View(new Models.ProductSearcherModel() { SearchKey = searchkey, Products = prods 
});

Index.cshtml:

@foreach (var item in Model.Products)
{
   //how to assign Model.Products to js array?
}

Please edit your question to show your attempts. We don't want to waste your time and ours suggesting solutions you've already tried and found to be lacking. — Heretic Monkey
– Heretic Monkey, Commented Jun 3, 2020 at 12:39

Fei Han · Accepted Answer · 2020-06-04 06:38:12Z

1

how to assign Model.Products to js array?

You can try to use JsonHelper.Serialize Method, like below.

@section scripts{
    <script>
        var products = @Json.Serialize(Model.Products);
        console.log(products);
    </script>
}

Test Result

Besides, if you'd like to retrieve data and do operation on JavaScript client side, you could achieve it using ajax etc.

answered Jun 4, 2020 at 6:38

Fei Han

28k1 gold badge35 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

teambanana · Accepted Answer · 2020-06-03 12:53:16Z

1

This feels like the wrong approach.

I would probably generally recommend a separate ajax call to a controller to retrieve the json. But without seeing the code that you have it's difficult to say more.

answered Jun 3, 2020 at 12:53

teambanana

2581 silver badge8 bronze badges

Collectives™ on Stack Overflow

How to pass ASP.NET Core collection to JavaScript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related