Display record from json file in mvc

Posted by Klbaiju under ASP.NET MVC on 4/11/2018 | Points: 10 | Views : 255 | Status : [Member] | Replies : 0
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 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":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

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

<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&




Responses

(No response found.)

Login to post response