Display record from json in mvc

Hi,

I want to display records from a table using storedprocedure and entity framework in MVC.

this is my storedprocedure

create procedure [dbo].[usp_selectall]
as
select * from employee

next I have added only storedprocedure into the application not table using databasefirst method of entity framework.

next i added a controller add following code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Newtonsoft.Json;
using Newtonsoft.Json.Serialization;

namespace MvcUsing_Storedprroc.Controllers
{
public class Test1Controller : Controller
{
//
// GET: /Test1/
ExerciseEntities db = new ExerciseEntities();
public ActionResult Index()
{
var emp = db.usp_selectall().ToList();
var k = JsonConvert.SerializeObject(emp);
ViewBag.Message = ((object)k);
return View((object)k);
}
}
}
viewbag to pass records to view
when i put a breakpoint in actionmethod of above code i got following result

[{"Id":11,"FirstName":"karun","LastName":"K Nair","Company":"RCB"},{"Id":14,"FirstName":"kiran","LastName":"Kumar","Company":"HCL"},{"Id":15,"FirstName":"Satya","LastName":"kumar","Company":"TCS"},{"Id":17,"FirstName":"Sarin","LastName":"Hasin","Company":"BBC"},{"Id":18,"FirstName":"jkjkjk","LastName":"jkjkjk","Company":"hhh"},{"Id":19,"FirstName":"hhjh","LastName":"jhjhjh","Company":"hkkkll"},{"Id":20,"FirstName":"jkjk","LastName":"jkjkj","Company":"kjkjkkk"},{"Id":21,"FirstName":"arun","LastName":"juk","Company":"78999"}]

every fieldname and values are showing.

My requirement is to display these record in a view automatically using mvc

for this I have used following code in View

-------------------------------------------

@{
ViewBag.Title = "Index";

}
<style>
table, th, td {
margin: 10px 0;
border: solid 1px #333;
padding: 2px 4px;
font: 15px Verdana;
}

th {
font-weight: bold;
}
</style>



<h2>Index</h2>
<div id="showData"></div>
<div id="disp"></div>
<script type="text/javascript" language="javascrit">

var myBooks = "@ViewBag.Message";
var col = [];
for (var i = 0; i < myBooks.length; i++) {
for (var key in myBooks[i]) {
if (col.indexOf(key) === -1) {
col.push(key);
}
}
}

// CREATE DYNAMIC TABLE.
var table = document.createElement("table");

// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

var tr = table.insertRow(-1); // TABLE ROW.

for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}

// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < myBooks.length; i++) {

tr = table.insertRow(-1);

for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = myBooks[i][col[j]];
}
}

// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("showData");
divContainer.innerHTML = "";
divContainer.appendChild(table);

</script>

the above code is not working
because of
var myBooks = "@ViewBag.Message";
mybooks is not in correct json format

instead of "@ViewBag.Message";
directly add the json file like
var myBooks = [{ "Id": 14, "FirstName": "kiran", "LastName": "Kumar", "Company": "HCL" }, { "Id": 15, "FirstName": "Satya", "LastName": "kumar", "Company": "TCS" }, { "Id": 17, "FirstName": "Sarin", "LastName": "Hasin", "Company": "BBC" }, { "Id": 18, "FirstName": "jkjkjk", "LastName": "jkjkjk", "Company": "hhh" }, { "Id": 19, "FirstName": "hhjh", "LastName": "jhjhjh", "Company": "hkkkll" }, { "Id": 20, "FirstName": "jkjk", "LastName": "jkjkj", "Company": "kjkjkkk" }, { "Id": 21, "FirstName": "arun", "LastName": "juk", "Company": "78999" }, { "Id": 22, "FirstName": "Ram", "LastName": "Singh", "Company": "5000" }, { "Id": 24, "FirstName": "Snig", "LastName": "kk", "Company": "HCL" }]


it will work fine and display in correct html table.
how to solve this

Regards
Baiju