Convert ViewBag List to Javascript Array

August 23 2020 by Admin

In this article, we will explain how to convert ViewBag list to Javascript array with an example and a sample code.

In this article, we will explain how to convert ViewBag list to Javascript array with an example and a sample code. In this example, We are binding table in view using the map function.

Step -1

Open Visual Studio. Click on the file in the menu and select new Project .

convert viewbag list to javascript array

Step -2

Select new project type.

Index.cshtml

We have provided html code below.

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<title>Convert ViewBag List to Javascript Array.</title>

window.onload = function () {

var StockList =@Html.Raw(Json.Encode(@ViewBag.StockList));

if (StockList != '') {

let output = StockList.map(i => "<tr><td>" + i.stockId + "</td><td>" + i.StockName + "</td><td>" + i.StockPrice + "</td></tr>");

document.getElementById("output").innerHTML=output;

}

</script>

</head>

<body>

<h1 class="display-4">Stock List</h1>

<th>Stock Id</th>

<th> Stock Name</th>

<th> Stock Price</th>

</tr>

</table>

</body>

</html>

Model

public class Stockmodel

{

public int stockId { get; set; }

public string StockName { get; set; }

public decimal StockPrice { get; set; }

}

StockController

public ActionResult Index()

{

List<Stockmodel> Stock = new List<Stockmodel>();

Stock.Add(new Stockmodel

{

stockId = 1,

StockName = "Rel",

StockPrice = 2200

});

Stock.Add(new Stockmodel

{

stockId = 2,

StockName = "TCS",

StockPrice = 2300

});

Stock.Add(new Stockmodel

{

stockId = 3,

StockName = "Relaxo",

StockPrice = 650

});

ViewBag.StockList = Stock;

return View();

}

Screenshot

ViewBag

Home > MVC > Convert ViewBag List to Javascript Array