Append json data in table using jquery and View in MVC

Question

Controller I'm getting data from using datacontext

 private Data.EmployeeDataContext _employees = new Data.EmployeeDataContext();

 public ActionResult Index()
    {          
       var data = from emp in _employees.Employees
                   select new Models.Employees
                   {
                       FirstName = emp.FirstName,
                       LastName = emp.LastName,
                   };
       ViewData["Employees"] = data;
       return View(data);
    }

View

@{
    var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
    var employees = serializer.Serialize(ViewData["Employees"]);
}

<html>
<head>
    <title>Index</title>
</head>
<body>
    <script src="../../Scripts/jquery-1.7.1.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#ViewData").click(function () { 
           $("#employee2").append("<tr><td>" + '@employees.ToString()' + "</tr></td>");      
            });  
         });
    </script>

    <div>
       <button id="ViewData">View Data</button>       
              <table id="employee2">
              <tr>
              <td>FirstName</td>
              </tr>
              <tr>
              <td>LastName</td>
              </tr>
              </table>
    </div>
</body>

Model

 public class Employees
    {
        public string FirstName
        {
            get;
            set;
        }
        public string LastName
        {
            get;
            set;
        }
     }

*This is what I'm getting so far, or the data that's appending to my table*

[{"FirstName":"Nancy","LastName":"Davolio"},{"FirstName":"Andrew","LastName":"Fuller"},    {"FirstName":"Janet","LastName":"Leverling"},{"FirstName":"Margaret","LastName":"Peacock"},{"FirstName":"Steven","LastName":"Buchanan"},{"FirstName":"Michael","LastName":"Suyama"},{"FirstName":"Robert","LastName":"King"},{"FirstName":"Laura","LastName":"Callahan"},{"FirstName":"Anne","LastName":"Dodsworth"}]

Question

How can I append those data to my table properly? Please help me, I just wanted to be just like this one.

    <div>
       <button id="ViewData">View Data</button>       
              <table id="employee2">
              <tr>
              <td>Nancy</td>
              </tr>
              <tr>
              <td>Davolio</td>
              </tr>....
              </table>
    </div>

you can try using JQgrid, a plugin that plays well with json.. — AthibaN
– AthibaN, Commented Oct 3, 2013 at 6:29
what is the point passing data to view, serialize to json and then use javascript to append it, why not render data right away using razor? — Giedrius
– Giedrius, Commented Oct 3, 2013 at 6:34

Andrey Gubal · Accepted Answer · 2013-10-03 10:52:54Z

if you want just populate table with data on button click, you've selected not an easiest solution. I would better create partialView:

In your controller:

public ActionResult Index()
    {                 
       return View();
    }


public ActionResult Employees()
    {          
       var data = from emp in _employees.Employees
                   select new Models.Employees
                   {
                       FirstName = emp.FirstName,
                       LastName = emp.LastName,
                   };
       return PartialView(data);
    }

In your Employees PartialView:

              <table>
@foreach(var i in Model)
{
              <tr>
              <td>@i.FirstName @i.LastName</td>
              </tr>
}
              </table>

In your Index View:

<script>
        $("#ViewData").click(function () { 
           $(".data").load("@Url.Action("Employees", "Home")");      
            });  
    </script>


   <button id="ViewData">View Data</button>

   <div class="data"></div>

Jagz S · Accepted Answer · 2013-10-03 06:39:24Z

1

<table>@foreach(var item in employees){<tr><td>@Html.DisplayFor(item.FirstName)</td><td>@Html.DisplayFor(item.LastName)</td>}</tr>}</table>

You can use foreach loop.

answered Oct 3, 2013 at 6:39

Jagz S

9073 gold badges12 silver badges29 bronze badges

Collectives™ on Stack Overflow

Append json data in table using jquery and View in MVC

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related