CODEWITHSUNDEEP
jqueryjsonasp.net-mvc-3
Francis Padron
Francis Padron

Reputation: 327

Append json data in table using jquery and View in MVC

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>

Upvotes: 0

Views: 2390

Answers (2)

Andrey Gubal
Andrey Gubal

Reputation: 3479

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>

Upvotes: 1

Jagz S
Jagz S

Reputation: 907

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

Upvotes: 1

Related Questions