Convert ViewBag to JSON object in jquery

August 28 2020 by Admin

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

In this article, we will explain how to convert ViewBag to JSON object 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 .

convert viewbag to json object in jquery

Step -2

Select new project type.

Index.cshtml

We have provided html code below.

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<title>Convert ViewBag to JSON object 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 > Convert ViewBag to JSON object in jquery