How to loop through ViewBag List in Jquery

August 25 2020 by Admin

In this article, we will explain how to loop through ViewBag list in jquery with an example and a sample code.

In this article, we will explain how to loop through ViewBag list in jquery with an example and a sample code. In this example, We are binding table in view using jquery each loop.

Step -1

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

How to loop through viewbag list in jquery

Step -2

Select new project type.

Index.cshtml

We have provided html code below.

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<title>How to loop through viewbag list in jquery.</title>

$(document).ready(function(){

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

if (StockList != '') {

var tableHtml;

$.each(StockList, function( index, value ) {

tableHtml +="<tr><td>" + value.stockId + "</td><td>" + value.StockName + "</td><td>" + value.StockPrice + "</td></tr>";

});

$("#output").html(tableHtml);

}

})

</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 > How to loop through ViewBag List in Jquery