How to read ViewBag list in Jquery

May 16 2021 by Admin

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

In this article, we will explain how to read 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 .

Step -2

Select new project type.

Index.cshtml

We have provided html code below.

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<title>How to read 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 read ViewBag list in Jquery